A map visualization about oil spills on the ocean. This example covers transformation strategies for map transpose and legend positioning. This example starts from the alternative design appearing in Hoffswell et al.

Mobile view
Design specification
{
  "data": [
    {
      "position": 1,
      "shipname": "Atlantic Empress",
      "year": 1979,
      "lat": 12.029449,
      "long": -64.228516,
      "location": "Off Tobago, West Indies",
      "size": 287000,
      "_index_": 0
    },
    {
      "position": 2,
      "shipname": "ABT Summer",
      "year": 1991,
      "lat": -13.215012,
      "long": 0.151367,
      "location": "700 nautical miles off Angola",
      "size": 260000,
      "_index_": 1
    },
    {
      "position": 3,
      "shipname": "Castillo De Bellver",
      "year": 1983,
      "lat": -34.916734,
      "long": 13.466797,
      "location": "Off Saldanha Bay, South Africa",
      "size": 252000,
      "_index_": 2
    },
    {
      "position": 4,
      "shipname": "Amoco Cadiz",
      "year": 1978,
      "lat": 50.281135,
      "long": -0.112305,
      "location": "Off Brittany, France",
      "size": 223000,
      "_index_": 3
    },
    {
      "position": 5,
      "shipname": "Haven",
      "year": 1991,
      "lat": 43.969741,
      "long": 8.984375,
      "location": "Genoa, Italy",
      "size": 144000,
      "_index_": 4
    },
    {
      "position": 6,
      "shipname": "Odyssey",
      "year": 1988,
      "lat": 55.064726,
      "long": -32.807617,
      "location": "700 nautical miles off Nova Scotia, Canada",
      "size": 132000,
      "_index_": 5
    },
    {
      "position": 7,
      "shipname": "Torrey Canyon",
      "year": 1967,
      "lat": 51.71482,
      "long": 1.66748,
      "location": "Scilly Isles, UK",
      "size": 119000,
      "_index_": 6
    },
    {
      "position": 8,
      "shipname": "Sea Star",
      "year": 1972,
      "lat": 23.032537,
      "long": 60.883789,
      "location": "Gulf of Oman",
      "size": 115000,
      "_index_": 7
    },
    {
      "position": 9,
      "shipname": "Sanchi",
      "year": 2018,
      "lat": 31.320384,
      "long": 124.494629,
      "location": "Off Shanghai, China",
      "size": 113000,
      "_index_": 8
    },
    {
      "position": 10,
      "shipname": "Irenes Serenade",
      "year": 1980,
      "lat": 38.355281,
      "long": 19.487305,
      "location": "Navarino Bay, Greece",
      "size": 100000,
      "_index_": 9
    },
    {
      "position": 11,
      "shipname": "Urquiola",
      "year": 1976,
      "lat": 44.140482,
      "long": -9.187012,
      "location": "La Coruna, Spain",
      "size": 100000,
      "_index_": 10
    },
    {
      "position": 12,
      "shipname": "Hawaiian Patriot",
      "year": 1977,
      "lat": 22.363603,
      "long": -161.918945,
      "location": "300 nautical miles off Honolulu",
      "size": 95000,
      "_index_": 11
    },
    {
      "position": 13,
      "shipname": "Independenta",
      "year": 1979,
      "lat": 42.38964,
      "long": 31.132813,
      "location": "Bosphorus, Turkey",
      "size": 94000,
      "_index_": 12
    },
    {
      "position": 14,
      "shipname": "Jakob Maersk",
      "year": 1975,
      "lat": 40.287541,
      "long": -9.58252,
      "location": "Oporto, Portugal",
      "size": 88000,
      "_index_": 13
    },
    {
      "position": 15,
      "shipname": "Braer",
      "year": 1993,
      "lat": 58.905107,
      "long": -2.177734,
      "location": "Shetland Islands, UK",
      "size": 85000,
      "_index_": 14
    },
    {
      "position": 16,
      "shipname": "Aegean Sea",
      "year": 1992,
      "lat": 43.181799,
      "long": -9.912109,
      "location": "La Coruna, Spain",
      "size": 74000,
      "_index_": 15
    },
    {
      "position": 17,
      "shipname": "Sea Empress",
      "year": 1996,
      "lat": 51.612602,
      "long": -5.539551,
      "location": "Milford Haven, UK",
      "size": 72000,
      "_index_": 16
    },
    {
      "position": 18,
      "shipname": "Khark 5",
      "year": 1989,
      "lat": 35.535188,
      "long": -12.06543,
      "location": "120 nautical miles off Atlantic coast of Morocco",
      "size": 70000,
      "_index_": 17
    },
    {
      "position": 19,
      "shipname": "Nova",
      "year": 1985,
      "lat": 27.853223,
      "long": 50.974121,
      "location": "Off Kharg Island, Gulf of Iran",
      "size": 70000,
      "_index_": 18
    },
    {
      "position": 20,
      "shipname": "Katina P",
      "year": 1992,
      "lat": -23.658801,
      "long": 38.076172,
      "location": "Off Maputo, Mozambique",
      "size": 67000,
      "_index_": 19
    },
    {
      "position": 21,
      "shipname": "Prestige",
      "year": 2002,
      "lat": 41.801673,
      "long": -11.955566,
      "location": "Off Galicia, Spain",
      "size": 63000,
      "_index_": 20
    },
    {
      "position": 36,
      "shipname": "Exxon Valdez",
      "year": 1989,
      "lat": 60.476612,
      "long": -146.845703,
      "location": "Prince William Sound, Alaska, USA",
      "size": 37000,
      "_index_": 21
    },
    {
      "position": 132,
      "shipname": "Hebei Spirit",
      "year": 2007,
      "lat": 36.322484,
      "long": 125,
      "location": "South Korea",
      "size": 11000,
      "_index_": 22
    }
  ],
  "name": "spills",
  "layout": {
    "align": "center",
    "composition": "projection",
    "projection": {
      "scale": 105,
      "translate": [200, 250],
      "transpose": true,
      "type": "transverseMercator"
    },
    "width": 325,
    "height": 585,
    "row": [ 
      "lat"
    ],
    "column": [
      "long"
    ]
  },
  "layer": [
    {
      "mark": {
        "type": "circle",
        "size": {
          "field": "size",
          "scale": {
            "range": [10, 1000]
          }
        },
        "color": {
          "value": "black"
        },
        "opacity": {
          "value": 0.7
        }
      },
      "text": [
        {
          "type": "on-mark",
          "field": "shipname",
          "orient": "bottom-center",
          "anchorAlign": "middle",
          "values": ["Exxon Valdez", "ABT Summer", "Castillo De Bellver", "Atlantic Empress", "Sanchi"],
          "dy": 5,
          "width": 120,
          "items": [
            {
              "fontSize": 13,
              "fontWeight": 700,
              "align": "center",
              "expression": "(datum.shipname)"
            },
            {
              "fontSize": 13,
              "fontWeight": 400,
              "align": "center",
              "format": ",d",
              "expression": "(datum.size)"
            }
          ]
        }, {
          "type": "legend",
          "field": "size",
          "orient": "bottom-right",
          "values": [10000, 100000, 200000],
          "gap": 5,
          "items": [
            {
              "fontSize": 13,
              "fontWeight": 700,
              "align": "left",
              "format": ",d",
              "marginLeft": 8
            }
          ],
          "title": {
            "value": "Spill size (tonnes)",
            "marginBottom": 5
          }
        }
      ],
      "tooltip": {
        "visibility": "on-mark",
        "fields": [
          {
            "field": "shipname"
          }, {
            "field": "year"
          }, {
            "field": "size",
            "format": ",d"
          }
        ]
      }
    }
  ],
  "title":  {
    "width": 350,
    "align": "center",
    "items":[ 
      {
        "name": "main_title",
        "text": "Incidents at sea",
        "fontSize": 20,
        "fontWeight": 900,
        "offset": 10,
        "lineHeight": 200,
        "align": "center"
      }, {
        "name": "subtitle",
        "text": "Most of the largest spills on record occurred far from shore with less obvious environmental impact. However, when a spill reaches a coastline it can be devastating. The Sanchi sank around 250 km from Japan’s southern island of Okinawa, raising fears of damage to the marine ecosystem. On Feb 2, Japan’s Coast Guard said it was checking reports of black oil lumps on the shore of Amami-Oshima in the Okinawa chain of islands.",
        "fontSize": 14,
        "fontWeight": 100,
        "offset": 20,
        "lineHeight": 160
      }
    ]
  }
}
View
Incidents at sea
Most of the largest spills on record occurred far from shore with less obvious environmental impact. However, when a spill reaches a coastline it can be devastating. The Sanchi sank around 250 km from Japan’s southern island of Okinawa, raising fears of damage to the marine ecosystem. On Feb 2, Japan’s Coast Guard said it was checking reports of black oil lumps on the shore of Amami-Oshima in the Okinawa chain of islands.
$leg-p34364$leg-p65422$leg-p97147$leg-size-title
Atlantic Empress
287000
ABT Summer
260000
Castillo De Bellver
252000
Sanchi
113000
Exxon Valdez
37000
Spill size (tonnes)
10,000
100,000
200,000
Cicero Specification
Specification
{
  "$schema": "../cicero.json",
  "name": "spills-mobile",
  "description": "This is a Cicero specification for 'Oil Spills' visualization from mobile to desktop.",
  "metadata": {
    "condition": "large"
  },
  "transformations": [
    {
      "description": "Resize the chart",// For a map visualization, resizing also does rescaling as a default option.
      "specifier": {
        "role": "view"
      },
      "action": "modify",
      "option": {
        "size": [
          1100,
          600
        ]
      }
    },
    {
      "description": "Swap longitude & latitude.",
      "specifier": {
        "role": "view"
      },
      "action": "transpose"
    },
    {
      "description": "Add the legend for 5000.",
      "specifier": {
        "role": "legend"
      },
      "action": "add",
      "option": {
        "values": [
          50000
        ]
      }
    },
    {
      "description": "Move the legend to the bottom-left position.",
      "specifier": {
        "role": "legend"
      },
      "action": "reposition",
      "option": {
        "position": "bottom-left"
      }
    }
  ]
}
Transformed View
Incidents at sea
Most of the largest spills on record occurred far from shore with less obvious environmental impact. However, when a spill reaches a coastline it can be devastating. The Sanchi sank around 250 km from Japan’s southern island of Okinawa, raising fears of damage to the marine ecosystem. On Feb 2, Japan’s Coast Guard said it was checking reports of black oil lumps on the shore of Amami-Oshima in the Okinawa chain of islands.
$leg-p34364$leg-p28781$leg-p65422$leg-p97147$leg-size-title
Atlantic Empress
287000
ABT Summer
260000
Castillo De Bellver
252000
Sanchi
113000
Exxon Valdez
37000
Spill size (tonnes)
10,000
50,000
100,000
200,000