A map visualization about oil spills on the ocean. This example covers transformation strategies for map transpose, and legend positioning.
{
"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
}
]
}
Below, we provide one transformation rule at a time, and show the intermediate result on the side.
{
"$schema": "../cicero.json",
"name": "spills-mobile",
"description": "This is a Cicero specification for 'Oil Spills' visualization from desktop to mobile.",
"metadata": {
"condition": "small"
},
"transformations": [
...
]
}
proportionate
keyword
{
"description": "Resize the chart",
"specifier": {
"role": "view"
},
"action": "modify",
"option": {
"width": 500,
"proportionate": true
}
}
{
"description": "Remove the legend value of 5000.",
"specifier": {
"role": "legend"
},
"action": "remove",
"option": {
"values": [
50000
]
}
}
{
"description": "Remove the mark label for 'ABT Summer'.",
"specifier": {
"role": "mark.label"
},
"action": "remove",
"option": {
"values": [
"ABT Summer"
]
}
}
{
"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 }
}
}
}
}
Below, we provide alternative rules to the first Cicero specification (original) to generate the example illustrated in Hoffswell et al.'s demonstration (Link).
{
"description": "Resize the chart",
"specifier": {
"role": "view"
},
"action": "modify",
"option": {
"size": [
325,
585
]
}
}
{
"description": "Swap longitude & latitude.",
"specifier": {
"role": "view"
},
"action": "transpose"
}
{
"description": "Remove the legend for 5000.",
"specifier": {
"role": "legend"
},
"action": "remove",
"option": {
"values": [
50000
]
}
}
{
"description": "Move the legend to the bottom-right position",
"specifier": {
"role": "legend"
},
"action": "reposition",
"option": {
"position": "bottom-right"
}
}