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.

Desktop view
Design specification 
{
  "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
    }
  ]
}
View
In close decisions, Kennedy voted in the majority 76 percent of the time.
$-x-p1660$-x-p1691$-x-p1722$-x-p1753$-x-p1784$-x-p1815
Gorsuch
White
O'Connor
Roberts
Thomas
Scalia
Alito
Blackmun
Souter
Brennan
Kagan
Sotomayor
Marshall
, Rehnquist
, Breyer
, Stevens
, Ginsburg
Kennedy
Percentage of votes in the majority,
over each justice’s career
40%
50%
60%
70%
80%
90%
Cicero Specification

Below, we provide one transformation rule at a time, and show the intermediate result on the side.

Specification
{
  "$schema": "../cicero.json",
  "name": "kennedy-mobile",
  "description": "This is a Cicero specification for 'Justice Kennedy' visualization from desktop to mobile.",
  "metadata": {
    "condition": "small"
  },
  "transformations": [
  ...
  ]
}
View
Rules: Resize the chart and add a new row element
Resize the chart 
    {
      "description": "Resize the chart",
      "specifier": {
        "role": "view"
      },
      "action": "modify",
      "option": {
        "size": [
          375,
          500
        ]
      }
    }
Add a row element with sorting details 
    {
      "description": "Add a row element",
      "specifier": {
        "role": "view"
      },
      "action": "add",
      "option": {
        "role": "row",
        "field": "justice",
        "datatype": "nominal",
        "sort": {
          "field": "percentage",
          "sortBy": "descending"
        }
      }
    }
View
In close decisions, Kennedy voted in the majority 76 percent of the time.
$-x-p1660$-x-p1691$-x-p1722$-x-p1753$-x-p1784$-x-p1815
Gorsuch
White
O'Connor
Roberts
Thomas
Scalia
Alito
Blackmun
Souter
Brennan
Kagan
Sotomayor
Marshall
, Rehnquist
, Breyer
, Stevens
, Ginsburg
Kennedy
Percentage of votes in the majority,
over each justice’s career
40%
50%
60%
70%
80%
90%
Rules: Convert mark labels as axis labels
Replace mark labels as axis labels 
    {
      "description": "Replace mark labels as axis labels"
      "specifier": {
        "role": "mark.label",
        "field": "justice"
      },
      "action": "replace",
      "option": {
        "to": {
          "role": "axis.label",
          "orient": "left"
        }
      }
    }
Re-format axis labels (general) 
    {
      "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.

View
In close decisions, Kennedy voted in the majority 76 percent of the time.
$-x-p1660$-x-p1691$-x-p1722$-x-p1753$-x-p1784$-x-p1815$-y-p79391$-y-p83774$-y-p56708$-y-n8648$-y-n60154$-y-n42835$-y-n18928$-y-n86513$-y-p56602$-y-n22865$-y-n99807$-y-n53327$-y-p48032$-y-p62400$-y-n51778$-y-p13606$-y-p38145$-y-p5245
Percentage of votes in the majority,
over each justice’s career
40%
50%
60%
70%
80%
90%
Gorsuch
White
O'Connor
Roberts
Thomas
Scalia
Alito
Blackmun
Souter
Brennan
Kagan
Sotomayor
Marshall
Rehnquist
Breyer
Stevens
Ginsburg
Kennedy
Rule: Remove axis values
Re-format axis labels (special for 'Kennedy') 
    {
      "description": "Re-format axis labels",
      "specifier": {
        "role": "axis.label",
        "field": "justice",
        "values": [
          "Kennedy"
        ]
      },
      "action": "modify",
      "option": {
        "fontWeight": 700
      }
    }
View
In close decisions, Kennedy voted in the majority 76 percent of the time.
$-x-p1660$-x-p1691$-x-p1722$-x-p1753$-x-p1784$-x-p1815$-y-p79391$-y-p83774$-y-p56708$-y-n8648$-y-n60154$-y-n42835$-y-n18928$-y-n86513$-y-p56602$-y-n22865$-y-n99807$-y-n53327$-y-p48032$-y-p62400$-y-n51778$-y-p13606$-y-p38145$-y-p5245
Percentage of votes in the majority,
over each justice’s career
40%
50%
60%
70%
80%
90%
Gorsuch
White
O'Connor
Roberts
Thomas
Scalia
Alito
Blackmun
Souter
Brennan
Kagan
Sotomayor
Marshall
Rehnquist
Breyer
Stevens
Ginsburg
Kennedy
Rules: Remove the axis
Remove the horizontal axis labels 
    {
      "description": "Remove horizontal axis labels",
      "specifier": {
        "role": "axis.label",
        "field": "percentage"
      },
      "action": "remove"
    }
Remove the horizontal axis grids 
    {
      "description": "Remove the horizontal axis grids",
      "specifier": {
        "role": "axis.grid",
        "field": "percentage"
      },
      "action": "remove"
    }
Change the scale domain of the column element 
    {
      "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
        }
      }
    }
Remove the rule mark 
    {
        "description": "Remove rule mark",
        "specifier": {
          "role": "emphasis"// no need for further decoration because there's only a single emphasis mark
        },
        "action": "remove"
      }
View
In close decisions, Kennedy voted in the majority 76 percent of the time.
$-y-p79391$-y-p83774$-y-p56708$-y-n8648$-y-n60154$-y-n42835$-y-n18928$-y-n86513$-y-p56602$-y-n22865$-y-n99807$-y-n53327$-y-p48032$-y-p62400$-y-n51778$-y-p13606$-y-p38145$-y-p5245
Percentage of votes in the majority,
over each justice’s career
Gorsuch
White
O'Connor
Roberts
Thomas
Scalia
Alito
Blackmun
Souter
Brennan
Kagan
Sotomayor
Marshall
Rehnquist
Breyer
Stevens
Ginsburg
Kennedy
Rules: Modify a non-data annotation (externalize & formatting)
Externalize annotation 
    {
      "description": "Externalize annotation",
      "specifier": {
        "role": "annotation"
      },
      "action": "reposition",
      "option": {
        "external": true,
        "position": "top"
      }
    }
Change the color of the annotation 
    {
      "description": "Change annotation color",
      "specifier": {
        "role": "annotation"
      },
      "action": "modify",
      "option": {
        "fontColor": "black"
      }
    },
View
In close decisions, Kennedy voted in the majority 76 percent of the time.
Percentage of votes in the majority,
over each justice’s career
$-y-p79391$-y-p83774$-y-p56708$-y-n8648$-y-n60154$-y-n42835$-y-n18928$-y-n86513$-y-p56602$-y-n22865$-y-n99807$-y-n53327$-y-p48032$-y-p62400$-y-n51778$-y-p13606$-y-p38145$-y-p5245
Gorsuch
White
O'Connor
Roberts
Thomas
Scalia
Alito
Blackmun
Souter
Brennan
Kagan
Sotomayor
Marshall
Rehnquist
Breyer
Stevens
Ginsburg
Kennedy
Rule: Change the mark type
    {
      "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

View
In close decisions, Kennedy voted in the majority 76 percent of the time.
Percentage of votes in the majority,
over each justice’s career
$-y-p79391$-y-p83774$-y-p56708$-y-n8648$-y-n60154$-y-n42835$-y-n18928$-y-n86513$-y-p56602$-y-n22865$-y-n99807$-y-n53327$-y-p48032$-y-p62400$-y-n51778$-y-p13606$-y-p38145$-y-p5245
Gorsuch
White
O'Connor
Roberts
Thomas
Scalia
Alito
Blackmun
Souter
Brennan
Kagan
Sotomayor
Marshall
Rehnquist
Breyer
Stevens
Ginsburg
Kennedy
Rules: Change the mark color (special)
    {
      "description": "Color mark",
      "specifier": {
        "role": "mark",
        "data": {
          "justice": "Kennedy"
        }
      },
      "action": "modify",
      "option": {
        "color": {
          "value": "#d90000"
        }
      }
    }
View
In close decisions, Kennedy voted in the majority 76 percent of the time.
Percentage of votes in the majority,
over each justice’s career
$-y-p79391$-y-p83774$-y-p56708$-y-n8648$-y-n60154$-y-n42835$-y-n18928$-y-n86513$-y-p56602$-y-n22865$-y-n99807$-y-n53327$-y-p48032$-y-p62400$-y-n51778$-y-p13606$-y-p38145$-y-p5245
Gorsuch
White
O'Connor
Roberts
Thomas
Scalia
Alito
Blackmun
Souter
Brennan
Kagan
Sotomayor
Marshall
Rehnquist
Breyer
Stevens
Ginsburg
Kennedy
Rule: Add mark labels
Add mark labels for the percentage value (with general properties) 
    {
      "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

Change the color of the mark label (special) 
    {
      "description": "Color a mark label",
      "specifier": {
        "role": "mark.label",
        "data": {
          "justice": "Kennedy"
        }
      },
      "action": "modify",
      "option": {
        "fontColor": "white",
        "fontWeight": 700
      }
    }
View
In close decisions, Kennedy voted in the majority 76 percent of the time.
Percentage of votes in the majority,
over each justice’s career
$-y-p79391$-y-p83774$-y-p56708$-y-n8648$-y-n60154$-y-n42835$-y-n18928$-y-n86513$-y-p56602$-y-n22865$-y-n99807$-y-n53327$-y-p48032$-y-p62400$-y-n51778$-y-p13606$-y-p38145$-y-p5245
76
82%
68
66
65
65
63
62
61
57
47
46
46
45
44
44
42
42
Gorsuch
White
O'Connor
Roberts
Thomas
Scalia
Alito
Blackmun
Souter
Brennan
Kagan
Sotomayor
Marshall
Rehnquist
Breyer
Stevens
Ginsburg
Kennedy
Rule: Reduce the font size of the title
    {
      "description": "Reduce title font size",
      "specifier": {
        "role": "title"
      },
      "action": "modify",
      "option": {
        "fontSize": 18
      }
    }
View
In close decisions, Kennedy voted in the majority 76 percent of the time.
Percentage of votes in the majority,
over each justice’s career
$-y-p79391$-y-p83774$-y-p56708$-y-n8648$-y-n60154$-y-n42835$-y-n18928$-y-n86513$-y-p56602$-y-n22865$-y-n99807$-y-n53327$-y-p48032$-y-p62400$-y-n51778$-y-p13606$-y-p38145$-y-p5245
76
82%
68
66
65
65
63
62
61
57
47
46
46
45
44
44
42
42
Gorsuch
White
O'Connor
Roberts
Thomas
Scalia
Alito
Blackmun
Souter
Brennan
Kagan
Sotomayor
Marshall
Rehnquist
Breyer
Stevens
Ginsburg
Kennedy
Rules: Serialize labels and marks (additional)
Resize the chart (needs longer height to accomodate the label-mark offsets) 
              {
                  "description": "Resize the chart",
                  "specifier": {
                    "role": "view"
                  },
                  "action": "modify",
                  "option": {
                    "size": [
                      375,
                      500
                    ]
                  }
                },
Serialize labels and marks 
    {
      "description": "Serialize labels and marks (additional)",
      "specifier": {
        "role": "vAxis.label"
      },
      "action": "transpose",
      "option": {
        "serial": true
      }
    }
View
In close decisions, Kennedy voted in the majority 76 percent of the time.
Percentage of votes in the majority,
over each justice’s career
$-y-p79391$-y-p83774$-y-p56708$-y-n8648$-y-n60154$-y-n42835$-y-n18928$-y-n86513$-y-p56602$-y-n22865$-y-n99807$-y-n53327$-y-p48032$-y-p62400$-y-n51778$-y-p13606$-y-p38145$-y-p5245
76
82%
68
66
65
65
63
62
61
57
47
46
46
45
44
44
42
42
Gorsuch
White
O'Connor
Roberts
Thomas
Scalia
Alito
Blackmun
Souter
Brennan
Kagan
Sotomayor
Marshall
Rehnquist
Breyer
Stevens
Ginsburg
Kennedy