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.
{
"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
}
]
}
}
{
"$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"
}
}
]
}