A dot plot about the percentage of the time in which each of the Supreme Court Justices voted in majority. This example covers transformation strategies for mark type and data highlight.
{
"name": "kennedy",
"layout": {
"width": 800,
"height": 180,
"composition": "single",
"column": [
{
"field": "percentage",
"scale": {
"domain": [
35,
95
]
}
}
],
"haxis": {
// horizontal axis design "grid": true,
"gridColor": "#cccccc",
"gridDash": [
3,
1
]
}
},
"layer": [
{
"mark": {
"type": "circle",
// dot mark "color": {
"value": "black"
},
"size": {
"value": 80
}
},
"text": [
// axis values {
"type": "on-axis",
"field": "percentage",
"values": [
40,
50,
60,
70,
80,
90
],
"orient": "top",
"padding": 10,
"items": [
{
"fontSize": 13,
"color": "black",
"expression": "datum.value + '%'"
}
]
},
{
// general positionoing of mark labels "type": "on-mark",
"field": "justice",
"orient": "bottom-center",
"dy": 20,
"dx": -2,
"values": [
"Gorsuch",
"White",
"O'Connor",
"Roberts",
"Thomas",
"Scalia",
"Alito",
"Blackmun",
"Souter",
"Brennan",
"Kagan",
"Sotomayor",
"Marshall"
],
"items": [
{
"fontWeight": 100,
"fontSize": 13
}
],
"angle": 45
},
{
// specific positioning of overlapping mark labels "type": "on-mark",
"field": "justice",
"orient": "bottom-center",
"dy": 53,
"dx": 29,
"values": [
"Rehnquist"
],
"items": [
{
"fontWeight": 100,
"fontSize": 13,
"expression": "', ' + datum.value"
}
],
"angle": 45
},
{
"type": "on-mark",
"field": "justice",
"orient": "bottom-center",
"dy": 63,
"dx": 39,
"values": [
"Breyer"
],
"items": [
{
"fontWeight": 100,
"fontSize": 13,
"expression": "', ' + datum.value"
}
],
"angle": 45
},
{
"type": "on-mark",
"field": "justice",
"orient": "bottom-center",
"dy": 54,
"dx": 30,
"values": [
"Stevens"
],
"items": [
{
"fontWeight": 100,
"fontSize": 13,
"expression": "', ' + datum.value"
}
],
"angle": 45
},
{
"type": "on-mark",
"field": "justice",
"orient": "bottom-center",
"dy": 55,
"dx": 33,
"values": [
"Ginsburg"
],
"items": [
{
"fontWeight": 100,
"fontSize": 13,
"expression": "', ' + datum.value"
}
],
"angle": 45
},
{
// special design for a mark label (Kennedy) "type": "on-mark",
"field": "justice",
"orient": "bottom-center",
"dy": 15,
"dx": -7,
"width": 65,
"values": [
"Kennedy"
],
"items": [
{
"fontWeight": 900,
"fontSize": 13
}
],
"fill": "#ffe100",
"padding": 5,
"radius": 5,
"angle": 45
}
]
}
],
"nondata": {
"items": [
{
// manually drawing an axis domain line "name": "domain",
"type": "mark",
"mark": {
"shape": "rule",
"stroke": "black"
},
"width": 800,
"height": 1,
"x": 0,
"y": 106
},
{
// nondata annotation "type": "text",
"x": 9,
"y": 75,
"width": 240,
"text": [
{
"align": "left",
"fontColor": "#999999",
"text": "Percentage of votes in the majority,
over each justice’s career","lineHeight": "120%"
}
],
"box": {
"fill": "white"
}
}
]
},
"title": {
// title "width": 350,
"items": [
{
"text": "In close decisions, Kennedy voted in the majority 76 percent of the time.",
"fontSize": 22,
"fontWeight": 700,
"offset": 30
}
]
},
"data": [
// dataset for the visualization {
"justice": "Gorsuch",
"percentage": 82,
"_index_": 0
},
{
"justice": "Kennedy",
"percentage": 76,
"_index_": 1
},
{
"justice": "White",
"percentage": 68,
"_index_": 2
},
{
"justice": "O'Connor",
"percentage": 66,
"_index_": 3
},
{
"justice": "Roberts",
"percentage": 65,
"_index_": 4
},
{
"justice": "Rehnquist",
"percentage": 65,
"_index_": 5
},
{
"justice": "Thomas",
"percentage": 63,
"_index_": 6
},
{
"justice": "Scalia",
"percentage": 62,
"_index_": 7
},
{
"justice": "Alito",
"percentage": 61,
"_index_": 8
},
{
"justice": "Blackmun",
"percentage": 57,
"_index_": 9
},
{
"justice": "Souter",
"percentage": 47,
"_index_": 10
},
{
"justice": "Stevens",
"percentage": 46,
"_index_": 11
},
{
"justice": "Brennan",
"percentage": 46,
"_index_": 12
},
{
"justice": "Kagan",
"percentage": 45,
"_index_": 13
},
{
"justice": "Sotomayor",
"percentage": 44,
"_index_": 14
},
{
"justice": "Breyer",
"percentage": 44,
"_index_": 15
},
{
"justice": "Ginsburg",
"percentage": 42,
"_index_": 16
},
{
"justice": "Marshall",
"percentage": 42,
"_index_": 17
}
]
}
Below, we provide one transformation rule at a time, and show the intermediate result on the side.
{
"$schema": "../cicero.json",
"name": "kennedy-mobile",
"description": "This is a Cicero specification for 'Justice Kennedy' visualization from desktop to mobile.",
"metadata": {
"condition": "small"
},
"transformations": [
...
]
}
{
"description": "Resize the chart",
"specifier": {
"role": "view"
},
"action": "modify",
"option": {
"size": [
375,
500
]
}
}
{
"description": "Add a row element",
"specifier": {
"role": "view"
},
"action": "add",
"option": {
"role": "row",
"field": "justice",
"datatype": "nominal",
"sort": {
"field": "percentage",
"sortBy": "descending"
}
}
}
{
"description": "Replace mark labels as axis labels"
"specifier": {
"role": "mark.label",
"field": "justice"
},
"action": "replace",
"option": {
"to": {
"role": "axis.label",
"orient": "left"
}
}
}
{
"description": "Re-format axis labels",
"specifier": {
"role": "axis.label",
"field": "justice"
},
"action": "modify",
"option": {
"angle": null,
"dx": null,
"dy": null,
"fontSize": 14,
"fontWeight": 400,
"padding": 20,
"anchor": "middle",
"textAlign": "left",
"width": 70
}
}
The mark label for "Kennedy" is also changed.
{
"description": "Re-format axis labels",
"specifier": {
"role": "axis.label",
"field": "justice",
"values": [
"Kennedy"
]
},
"action": "modify",
"option": {
"fontWeight": 700
}
}
{
"description": "Remove horizontal axis labels",
"specifier": {
"role": "axis.label",
"field": "percentage"
},
"action": "remove"
}
{
"description": "Remove the horizontal axis grids",
"specifier": {
"role": "axis.grid",
"field": "percentage"
},
"action": "remove"
}
{
"description": "Change the scale domain of the column element",
// to enable 'zero' option for the axis as well "specifier": {
"role": "column",
"field": "percentage"
// can be auxiliary if there's only a single column element },
"action": "modify",
"option": {
"scale": {
"domain": null
}
}
}
{
"description": "Remove rule mark",
"specifier": {
"role": "emphasis"
// no need for further decoration because there's only a single emphasis mark },
"action": "remove"
}
{
"description": "Externalize annotation",
"specifier": {
"role": "annotation"
},
"action": "reposition",
"option": {
"external": true,
"position": "top"
}
}
{
"description": "Change annotation color",
"specifier": {
"role": "annotation"
},
"action": "modify",
"option": {
"fontColor": "black"
}
},
{
"description": "Change mark type to bar",
"specifier": {
"role": "mark"
},
"action": "modify",
"option": {
"mark": "bar",
"size": null,
"color": {
"value": "#eeeeee"
}
}
},
The above rule makes the color of the mark for 'Kennedy' same as the others
{
"description": "Color mark",
"specifier": {
"role": "mark",
"data": {
"justice": "Kennedy"
}
},
"action": "modify",
"option": {
"color": {
"value": "#d90000"
}
}
}
{
"description": "Add mark label for percentage",
"specifier": {
"role": "mark"
},
"action": "add",
"option": {
"role": "label",
"field": "percentage",
"orient": "middle-right",
"dx": -10,
"color": "black",
"anchor": "end",
"expression": "( isFirst('justice', datum) ? datum.value + '%' : datum.value )"
}
}
The above rule sets the color of the label for 'Kennedy' same as the others
{
"description": "Color a mark label",
"specifier": {
"role": "mark.label",
"data": {
"justice": "Kennedy"
}
},
"action": "modify",
"option": {
"fontColor": "white",
"fontWeight": 700
}
}
{
"description": "Reduce title font size",
"specifier": {
"role": "title"
},
"action": "modify",
"option": {
"fontSize": 18
}
}
{
"description": "Resize the chart",
"specifier": {
"role": "view"
},
"action": "modify",
"option": {
"size": [
375,
500
]
}
},
{
"description": "Serialize labels and marks (additional)",
"specifier": {
"role": "vAxis.label"
},
"action": "transpose",
"option": {
"serial": true
}
}