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.

Mobile view
Design specification
{
  "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"
    }
  ]
}
View
$leg-p83305$leg-p83306$leg-p83307$leg-p83308$leg-p83309
12345
Candidate A
Candidate B
Candidate C
Candidate D
Candidate E
1.
Mr. Hamon was humiliated in Lille, traditionally a Socialist bastion, and finished with less than 7 percent over all.
2.
Ms. Le Pen dominated most of the north, strengthening the National Front’s roots in a region with high unemployment.
3.
Mr. Fillon, who finished third, struggled to beat Ms. Le Pen in parts of his home region, where he received less than 30 percent.
4.
Mr. Macron won big around Bordeaux, a center-left area where he is expected to rack up large margins in the runoff.
5.
Compared with 2012, Ms. Le Pen surged in the Nice region, historically a stronghold of parties on the right.
Cicero Specification
Specification
{
  "$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"
      }
    }
  ]
}
Transformed View
$leg-p83305$leg-p83306$leg-p83307$leg-p83308$leg-p83309
Mr. Hamon was humiliated in Lille, traditionally a Socialist bastion, and finished with less than 7 percent over all.
Ms. Le Pen dominated most of the north, strengthening the National Front’s roots in a region with high unemployment.
Mr. Fillon, who finished third, struggled to beat Ms. Le Pen in parts of his home region, where he received less than 30 percent.
Mr. Macron won big around Bordeaux, a center-left area where he is expected to rack up large margins in the runoff.
Compared with 2012, Ms. Le Pen surged in the Nice region, historically a stronghold of parties on the right.
Candidate A
Candidate B
Candidate C
Candidate D
Candidate E