A choropleth about the turnout of 2017 Presidential Election in France. This example covers transformation strategies regarding annotations. Further descriptions are available in Kim et al. (2021). A mock dataset is used for the demonstration purpose only.
{
"name": "spills-mobile",
"layout": {
"align": "center",
"composition": "projection",
"projection": {
"feature": "regions",
"url": "data/france.json",
"datakey": "name",
"linkkey": "properties.name",
"scale": null
},
"width": 350,
"height": 308.66666666666663,
"row": [
"cx"
],
"column": [
"cy"
]
},
"layer": [
{
"mark": {
"type": "geoshape",
"color": {
"field": "winner",
"type": "nominal",
"scale": {
"domain": [
"Candidate A",
"Candidate B",
"Candidate C",
"Candidate D",
"Candidate E"
],
"range": [
"#8fbcef",
"#f9ad8f",
"#1f77b4",
"#7c4ba5",
"#e2de83"
]
}
},
"strokeWidth": {
"value": 0.5
},
"stroke": {
"value": "black"
},
"detail": {
"field": "name"
}
},
"text": [
{
"type": "legend",
"field": "winner",
"orient": "top",
"direction": "horizontal",
"items": [
{
"fontSize": 13,
"align": "left",
"marginRight": 8
}
],
"offset": 20
},
{
"type": "on-mark",
"field": "name",
"orient": "middle-center",
"anchorAlign": "end",
"values": [
"Nord"
],
"width": 200,
"dx": 0,
"dy": 0,
"items": [
{
"align": "left",
"expression": "(datum.label)"
}
],
"tick": true,
"visibility": {
"externalize": {
"position": "bottom",
"numbering": true
}
}
},
{
"type": "on-mark",
"field": "name",
"orient": "middle-center",
"anchorAlign": "start",
"values": [
"Aisne"
],
"width": 200,
"dx": 0,
"dy": 0,
"items": [
{
"align": "left",
"expression": "(datum.label)"
}
],
"tick": true,
"visibility": {
"externalize": {
"position": "bottom",
"numbering": true
}
}
},
{
"type": "on-mark",
"field": "name",
"orient": "middle-center",
"anchorAlign": "start",
"values": [
"Sarthe"
],
"width": 200,
"dx": 0,
"dy": 0,
"items": [
{
"align": "left",
"expression": "(datum.label)"
}
],
"tick": true,
"visibility": {
"externalize": {
"position": "bottom",
"numbering": true
}
}
},
{
"type": "on-mark",
"field": "name",
"orient": "middle-center",
"anchorAlign": "start",
"values": [
"Gironde"
],
"width": 200,
"dx": 0,
"dy": 0,
"items": [
{
"align": "left",
"expression": "(datum.label)"
}
],
"tick": true,
"visibility": {
"externalize": {
"position": "bottom",
"numbering": true
}
}
},
{
"type": "on-mark",
"field": "name",
"orient": "middle-center",
"anchorAlign": "end",
"values": [
"Alpes-Maritimes"
],
"width": 250,
"dx": 0,
"dy": 0,
"items": [
{
"align": "left",
"expression": "(datum.label)"
}
],
"tick": true,
"visibility": {
"externalize": {
"position": "bottom",
"numbering": true
}
}
}
]
}
],
"title": {},
"data": [
{
"name": "Ain",
"population": 603827,
"winner": "Candidate A"
},
{
"name": "Aisne",
"population": 541302,
"winner": "Candidate B",
"label": "Ms. Le Pen dominated most of the north, strengthening the National Front’s roots in a region with high unemployment."
},
{
"name": "Allier",
"population": 342729,
"winner": "Candidate C"
},
{
"name": "Alpes-de-Haute-Provence",
"population": 160959,
"winner": "Candidate D"
},
{
"name": "Hautes-Alpes",
"population": 138605,
"winner": "Candidate E"
},
{
"name": "Alpes-Maritimes",
"population": 1081244,
"winner": "Candidate A",
"label": "Compared with 2012, Ms. Le Pen surged in the Nice region, historically a stronghold of parties on the right."
},
{
"name": "Ardèche",
"population": 317277,
"winner": "Candidate B"
},
{
"name": "Ardennes",
"population": 283110,
"winner": "Candidate C"
},
{
"name": "Ariège",
"population": 152286,
"winner": "Candidate D"
},
{
"name": "Aube",
"population": 303997,
"winner": "Candidate E"
},
{
"name": "Aude",
"population": 359967,
"winner": "Candidate A"
},
{
"name": "Aveyron",
"population": 275813,
"winner": "Candidate B"
},
{
"name": "Bouches-du-Rhône",
"population": 1975896,
"winner": "Candidate C"
},
{
"name": "Calvados",
"population": 685262,
"winner": "Candidate D"
},
{
"name": "Cantal",
"population": 147577,
"winner": "Candidate E"
},
{
"name": "Charente",
"population": 352705,
"winner": "Candidate A"
},
{
"name": "Charente-Maritime",
"population": 625682,
"winner": "Candidate B"
},
{
"name": "Cher",
"population": 311694,
"winner": "Candidate C"
},
{
"name": "Corrèze",
"population": 242454,
"winner": "Candidate D"
},
{
"name": "Corse-du-Sud",
"population": 145846,
"winner": "Candidate E"
},
{
"name": "Haute-Corse",
"population": 168640,
"winner": "Candidate A"
},
{
"name": "Côte-d'Or",
"population": 525931,
"winner": "Candidate B"
},
{
"name": "Côtes-d'Armor",
"population": 594375,
"winner": "Candidate C"
},
{
"name": "Creuse",
"population": 122560,
"winner": "Candidate D"
},
{
"name": "Dordogne",
"population": 415168,
"winner": "Candidate E"
},
{
"name": "Doubs",
"population": 529103,
"winner": "Candidate A"
},
{
"name": "Drôme",
"population": 487993,
"winner": "Candidate B"
},
{
"name": "Eure",
"population": 588111,
"winner": "Candidate C"
},
{
"name": "Eure-et-Loir",
"population": 430416,
"winner": "Candidate D"
},
{
"name": "Finistère",
"population": 899870,
"winner": "Candidate E"
},
{
"name": "Gard",
"population": 718357,
"winner": "Candidate A"
},
{
"name": "Haute-Garonne",
"population": 1260226,
"winner": "Candidate B"
},
{
"name": "Gers",
"population": 188893,
"winner": "Candidate C"
},
{
"name": "Gironde",
"population": 1463662,
"winner": "Candidate D",
"label": "Mr. Macron won big around Bordeaux, a center-left area where he is expected to rack up large margins in the runoff."
},
{
"name": "Hérault",
"population": 1062036,
"winner": "Candidate E"
},
{
"name": "Ille-et-Vilaine",
"population": 996439,
"winner": "Candidate A"
},
{
"name": "Indre",
"population": 230175,
"winner": "Candidate B"
},
{
"name": "Indre-et-Loire",
"population": 593683,
"winner": "Candidate C"
},
{
"name": "Isère",
"population": 1215212,
"winner": "Candidate D"
},
{
"name": "Jura",
"population": 261294,
"winner": "Candidate E"
},
{
"name": "Landes",
"population": 387929,
"winner": "Candidate A"
},
{
"name": "Loir-et-Cher",
"population": 331280,
"winner": "Candidate B"
},
{
"name": "Loire",
"population": 749053,
"winner": "Candidate C"
},
{
"name": "Haute-Loire",
"population": 224907,
"winner": "Candidate D"
},
{
"name": "Loire-Atlantique",
"population": 1296364,
"winner": "Candidate E"
},
{
"name": "Loiret",
"population": 659587,
"winner": "Candidate A"
},
{
"name": "Lot",
"population": 174754,
"winner": "Candidate B"
},
{
"name": "Lot-et-Garonne",
"population": 330866,
"winner": "Candidate C"
},
{
"name": "Lozère",
"population": 77156,
"winner": "Candidate D"
},
{
"name": "Maine-et-Loire",
"population": 790343,
"winner": "Candidate E"
},
{
"name": "Manche",
"population": 499531,
"winner": "Candidate A"
},
{
"name": "Marne",
"population": 566571,
"winner": "Candidate B"
},
{
"name": "Haute-Marne",
"population": 182375,
"winner": "Candidate C"
},
{
"name": "Mayenne",
"population": 307031,
"winner": "Candidate D"
},
{
"name": "Meurthe-et-Moselle",
"population": 733124,
"winner": "Candidate E"
},
{
"name": "Meuse",
"population": 193557,
"winner": "Candidate A"
},
{
"name": "Morbihan",
"population": 727083,
"winner": "Candidate B"
},
{
"name": "Moselle",
"population": 1045146,
"winner": "Candidate C"
},
{
"name": "Nièvre",
"population": 218341,
"winner": "Candidate D"
},
{
"name": "Nord",
"population": 2579208,
"winner": "Candidate E",
"label": "Mr. Hamon was humiliated in Lille, traditionally a Socialist bastion, and finished with less than 7 percent over all."
},
{
"name": "Oise",
"population": 805642,
"winner": "Candidate A"
},
{
"name": "Orne",
"population": 290891,
"winner": "Candidate B"
},
{
"name": "Pas-de-Calais",
"population": 1462807,
"winner": "Candidate C"
},
{
"name": "Puy-de-Dôme",
"population": 635469,
"winner": "Candidate D"
},
{
"name": "Pyrénées-Atlantiques",
"population": 656608,
"winner": "Candidate E"
},
{
"name": "Hautes-Pyrénées",
"population": 229228,
"winner": "Candidate A"
},
{
"name": "Pyrénées-Orientales",
"population": 452530,
"winner": "Candidate B"
},
{
"name": "Bas-Rhin",
"population": 1099269,
"winner": "Candidate C"
},
{
"name": "Haut-Rhin",
"population": 753056,
"winner": "Candidate D"
},
{
"name": "Rhône",
"population": 1744236,
"winner": "Candidate E"
},
{
"name": "Haute-Saône",
"population": 239695,
"winner": "Candidate A"
},
{
"name": "Saône-et-Loire",
"population": 555999,
"winner": "Candidate B"
},
{
"name": "Sarthe",
"population": 565718,
"winner": "Candidate C",
"label": "Mr. Fillon, who finished third, struggled to beat Ms. Le Pen in parts of his home region, where he received less than 30 percent."
},
{
"name": "Savoie",
"population": 418949,
"winner": "Candidate D"
},
{
"name": "Haute-Savoie",
"population": 746994,
"winner": "Candidate E"
},
{
"name": "Paris",
"population": 2249975,
"winner": "Candidate A"
},
{
"name": "Seine-Maritime",
"population": 1251282,
"winner": "Candidate B"
},
{
"name": "Seine-et-Marne",
"population": 1338427,
"winner": "Candidate C"
},
{
"name": "Yvelines",
"population": 1413635,
"winner": "Candidate D"
},
{
"name": "Deux-Sèvres",
"population": 370939,
"winner": "Candidate E"
},
{
"name": "Somme",
"population": 571211,
"winner": "Candidate A"
},
{
"name": "Tarn",
"population": 377675,
"winner": "Candidate B"
},
{
"name": "Tarn-et-Garonne",
"population": 244545,
"winner": "Candidate C"
},
{
"name": "Var",
"population": 1012735,
"winner": "Candidate D"
},
{
"name": "Vaucluse",
"population": 546630,
"winner": "Candidate E"
},
{
"name": "Vendée",
"population": 641657,
"winner": "Candidate A"
},
{
"name": "Vienne",
"population": 428447,
"winner": "Candidate B"
},
{
"name": "Haute-Vienne",
"population": 376058,
"winner": "Candidate C"
},
{
"name": "Vosges",
"population": 378830,
"winner": "Candidate D"
},
{
"name": "Yonne",
"population": 342463,
"winner": "Candidate E"
},
{
"name": "Territoire de Belfort",
"population": 143348,
"winner": "Candidate A"
},
{
"name": "Essonne",
"population": 1225191,
"winner": "Candidate B"
},
{
"name": "Hauts-de-Seine",
"population": 1581628,
"winner": "Candidate C"
},
{
"name": "Seine-Saint-Denis",
"population": 1529928,
"winner": "Candidate D"
},
{
"name": "Val-de-Marne",
"population": 1333702,
"winner": "Candidate E"
},
{
"name": "Val-d'Oise",
"population": 1180365,
"winner": "Candidate A"
}
]
}
{
"$schema": "../cicero.json",
"name": "french-election-desktop",
"description": "This is a Cicero specification for 'French Election' visualization from mobile to desktop.",
"metadata": {
"condition": "large"
},
"transformations": [
{
"description": "Resize the chart with 'proportionate' keyword",
"specifier": {
"role": "view"
},
"action": "modify",
"option": {
"width": 1050,
"proportionate": true
}
},
{
"description": "Internalize annotations",
"specifier": {
"role": "mark.label",
"field": "name"
},
"action": "reposition",
"option": {
"external": false,
"tick": true
}
},
{
"description": "Detail the positions",
"specifier": {
"role": "mark.label",
"field": "name",
"values": ["Nord"]
},
"action": "reposition",
"option": {
"dx": -50,
"dy": 25,
"orient": "top-left"
}
},
{
"description": "Detail the positions",
"specifier": {
"role": "mark.label",
"field": "name",
"values": ["Aisne"]
},
"action": "reposition",
"option": {
"dx": 150,
"dy": -60,
"orient": "top-left"
}
},
{
"description": "Detail the positions",
"specifier": {
"role": "mark.label",
"field": "name",
"values": ["Sarthe"]
},
"action": "reposition",
"option": {
"dx": -280,
"dy": 190,
"orient": "top-left"
}
},
{
"description": "Detail the positions",
"specifier": {
"role": "mark.label",
"field": "name",
"values": ["Gironde"]
},
"action": "reposition",
"option": {
"dx": -230,
"dy": -50,
"orient": "bottom-left"
}
},
{
"description": "Detail the positions",
"specifier": {
"role": "mark.label",
"field": "name",
"values": ["Alpes-Maritimes"]
},
"action": "reposition",
"option": {
"dx": 50,
"dy": 50,
"orient": "bottom-left"
}
}
]
}