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": "french-electionn","layout": {"align": "center","composition": "projection",// map visualization "projection": {"feature": "regions",// topojson file to draw a French map "url": "data/france.json","datakey": "name",// mapping the region name and data keys "linkkey": "properties.name"},"width": 1050,"height": 926,"row": [// latitude "latitude"],"column": [// longitude "longitude"]},"layer": [{"mark": {// a geoshape layer to draw colored map element "type": "geoshape","color": {"field": "winner","type": "nominal","scale": {// a manual scale for a nominal encoding "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": [{// legend "type": "legend","field": "winner","orient": "top","direction": "horizontal","items": [{"fontSize": 13,"align": "left","marginRight": 8}],"offset": 20},{// mark labels, for manual positioning "type": "on-mark","field": "name","orient": "top-left","anchorAlign": "end","values": ["Nord"],"width": 200,"dx": -50,"dy": 25,"items": [{"align": "left","expression": "(datum.label)"}],"tick": true},{// mark labels, for manual positioning "type": "on-mark","field": "name","orient": "top-left","anchorAlign": "start","values": ["Aisne"],"width": 200,"dx": 150,"dy": -60,"items": [{"align": "left","expression": "(datum.label)"}],"tick": true},{// mark labels, for manual positioning "type": "on-mark","field": "name","orient": "top-left","anchorAlign": "start","values": ["Sarthe"],"width": 200,"dx": -280,"dy": 190,"items": [{"align": "left","expression": "(datum.label)"}],"tick": true},{// mark labels, for manual positioning "type": "on-mark","field": "name","orient": "bottom-left","anchorAlign": "start","values": ["Gironde"],"width": 200,"dx": -230,"dy": -50,"items": [{"align": "left","expression": "(datum.label)"}],"tick": true},{// mark labels, for manual positioning "type": "on-mark","field": "name","orient": "bottom-left","anchorAlign": "end","values": ["Alpes-Maritimes"],"width": 250,"dx": 50,"dy": 50,"items": [{"align": "left","expression": "(datum.label)"}],"tick": true}]}],"data": [// dataset for the visualization {"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"}]}
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 'French Election' visualization from desktop to mobile.","metadata": {"condition": "desktop"},"transformations": [...]}
proportionate keyword
{"description": "Resize the chart proportionately.","specifier": {"role": "view"},"action": "modify","option": {"width": 350,"proportionate": true}}
{"description": "Externalize annotations","specifier": {"role": "mark.label","field": "name"},"action": "reposition","option": {"external": true,"numbering": true,"tick": false,"dx": 0,"dy": 0,"orient": "middle-center"}}