A map visualization about oil spills on the ocean. This example covers transformation strategies for map transpose, and legend positioning.

Desktop view
Design specification
{
  "name": "spills",
  "layout": {
    "align": "center",
    "composition": "projection",// map (projection) composition layout
    "projection": {// projection details, default map is world map with country level
      "scale": 190,
      "translate": [540, 370]
    },
    "width": 1100,
    "height": 600,
    "row": [ // for map vis, row = latitude
      "lat"
    ],
    "column": [// for map vis, column = longitude
      "long"
    ]
  },
  "layer": [
    {
      "mark": {
        "type": "circle",// circle mark; if not specified, map is automatically drawn.
        "size": {
          "field": "size",
          "scale": {
            "range": [10, 3000]
          }
        },
        "color": {
          "value": "black"
        },
        "opacity": {
          "value": 0.7
        }
      },
      "text": [
        {// mark labels, defined individually for detailed positioning
          "type": "on-mark",
          "field": "shipname",
          "orient": "bottom-center",
          "anchorAlign": "middle",
          "values": ["Exxon Valdez"],
          "dy": 5,
          "width": 50,
          "items": [
            {
              "fontSize": 13,
              "fontWeight": 700,
              "align": "center",
              "expression": "(datum.shipname)"
            },
            {
              "fontSize": 13,
              "fontWeight": 400,
              "align": "center",
              "expression": "(format(datum.size, ',d'))"
            }
          ]
        }, {
          "type": "on-mark",
          "field": "shipname",
          "orient": "bottom-center",
          "anchorAlign": "middle",
          "values": ["ABT Summer", "Castillo De Bellver"],
          "dy": 5,
          "width": 120,
          "items": [
            {
              "fontSize": 13,
              "fontWeight": 700,
              "align": "center",
              "expression": "(datum.shipname)"
            },
            {
              "fontSize": 13,
              "fontWeight": 400,
              "align": "center",
              "expression": "(format(datum.size, ',d'))"
            }
          ]
        }, {
          "type": "on-mark",
          "field": "shipname",
          "orient": "middle-right",
          "anchorAlign": "start",
          "values": ["Atlantic Empress", "Sanchi"],
          "dx": 5,
          "width": 150,
          "items": [
            {
              "fontSize": 13,
              "fontWeight": 700,
              "align": "left",
              "expression": "(datum.shipname)"
            },
            {
              "fontSize": 13,
              "fontWeight": 400,
              "align": "left",
              "expression": "(format(datum.size, ',d'))"
            }
          ]
        }, {// legend
          "type": "legend",
          "field": "size",
          "orient": "bottom-left",
          "values": [10000, 50000, 100000, 200000],// for specific values
          "gap": 5,
          "items": [
            {
              "fontSize": 13,
              "fontWeight": 700,
              "align": "left",
              "format": ",d",
              "marginLeft": 8
            }
          ],
          "title": {
            "value": "Spill size (tonnes)",
            "marginBottom": 5
          }
        }
      ],
      "tooltip": {// tooltip (is not available for technical reason)
        "visibility": "on-mark",
        "fields": [
          {
            "field": "shipname"
          }, {
            "field": "year"
          }, {
            "field": "size",
            "format": ",d"
          }
        ]
      }
    }
  ],
  "title":  {// title elements
    "width": 500,
    "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
      }
    ]
  },
  "data": [// visualization 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
    }
  ]
}
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
Exxon Valdez
37,000
ABT Summer
260,000
Castillo De Bellver
252,000
Atlantic Empress
287,000
Sanchi
113,000
Spill size (tonnes)
10,000
50,000
100,000
200,000
Tooltip demo image for Oil Spills visualization
Tooltip demonstration
Cicero Specification 1 (Original)

Below, we provide one transformation rule at a time, and show the intermediate result on the side.

Specification
{
  "$schema": "../cicero.json",
  "name": "spills-mobile",
  "description": "This is a Cicero specification for 'Oil Spills' visualization from desktop to mobile.",
  "metadata": {
    "condition": "small"
  },
  "transformations": [
  ...
  ]
}
Rules: Resize the chart & remove the legend value of 5,000
Resize the chart with proportionate keyword
    {
      "description": "Resize the chart",
      "specifier": {
        "role": "view"
      },
      "action": "modify",
      "option": {
        "width": 500,
        "proportionate": true
      }
    }
Remove the legende value of 5000
    {
      "description": "Remove the legend value of 5000.",
      "specifier": {
        "role": "legend"
      },
      "action": "remove",
      "option": {
        "values": [
          50000
        ]
      }
    }
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
Exxon Valdez
37,000
ABT Summer
260,000
Castillo De Bellver
252,000
Atlantic Empress
287,000
Sanchi
113,000
Spill size (tonnes)
10,000
100,000
200,000
Rule: Remove mark label
    {
      "description": "Remove the mark label for 'ABT Summer'.",
      "specifier": {
        "role": "mark.label"
      },
      "action": "remove",
      "option": {
        "values": [
          "ABT Summer"
        ]
      }
    }

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
Exxon Valdez
37,000
Castillo De Bellver
252,000
Atlantic Empress
287,000
Sanchi
113,000
Spill size (tonnes)
10,000
100,000
200,000
Rule: Resize the size encoding scale with relative value.
    {
      "description": "Resize the size encoding scale with relative value.",
      "specifier": {
        "role": "mark"
      },
      "action": "modify",
      "option": {
        "size": {
          "scale": {
            "range": {
              "prod": 0.4// multiply 0.4 to range values
            }
          }
        }
      }
    }
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
Exxon Valdez
37,000
Castillo De Bellver
252,000
Atlantic Empress
287,000
Sanchi
113,000
Spill size (tonnes)
10,000
100,000
200,000
Cicero Specification 2 (Hoffswell et al.'s demonstration)

Below, we provide alternative rules to the first Cicero specification (original) to generate the example illustrated in Hoffswell et al.'s demonstration (Link).

Rules: Resize the chart and transpose the map
Resize the chart
    {
      "description": "Resize the chart",
      "specifier": {
        "role": "view"
      },
      "action": "modify",
      "option": {
        "size": [
          325,
          585
        ]
      }
    }
Swap the longitude and latitude
    {
      "description": "Swap longitude & latitude.",
      "specifier": {
        "role": "view"
      },
      "action": "transpose"
    }
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
Exxon Valdez
37,000
ABT Summer
260,000
Castillo De Bellver
252,000
Atlantic Empress
287,000
Sanchi
113,000
Spill size (tonnes)
10,000
50,000
100,000
200,000
Rules: Remove the legend value of 5000 and reposition the legend
Remove the legend value of 5000
    {
      "description": "Remove the legend for 5000.",
      "specifier": {
        "role": "legend"
      },
      "action": "remove",
      "option": {
        "values": [
          50000
        ]
      }
    }
Reposition the legend
    {
      "description": "Move the legend to the bottom-right position",
      "specifier": {
        "role": "legend"
      },
      "action": "reposition",
      "option": {
        "position": "bottom-right"
      }
    }
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
Exxon Valdez
37,000
ABT Summer
260,000
Castillo De Bellver
252,000
Atlantic Empress
287,000
Sanchi
113,000
Spill size (tonnes)
10,000
100,000
200,000