Small multiples of bar charts about death cases due to drug overdose in six counties in Ohio from 2010 to 2017. This example covers transformation strategies for small multiples layout.

Desktop view
Design specification 
{
  "name": "overdose",
  "layout": {
    "composition": "repeated",// repeated view layout
    "width": 840,
    "height": 220,
    "row": [// row of a single view
      {
        "field": "death",
        "type": "quantitative"
      }
    ],
    "column": [// column of a single view
      {
        "field": "year",
        "type": "nominal"
      }
    ],
    "split": {// conditions for making repeated views
      "field": "county",
      "values": [// also in this order
        "Warren Co.",
        "Butler",
        "Summit",
        "Hamilton",
        "Cuyahoga",
        "Montgomery"
      ],
      "label": {
        "align": "left",
        "anchor": "start",
        "fontSize": 13,
        "fontWeight": 100
      }
    },
    "nColumns": 6,// number of columns
    "haxis": {
      "domain": true,
      "domainColor": "black"
    },
    "vaxis": {
      "grid": true,
      "gridColor": "#dddddd",
      "gridDash": [
        5,
        2
      ]
    }
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "color": {// manual color scale
          "field": "year",
          "scale": {
            "domain": [
              2010,
              2011,
              2012,
              2013,
              2014,
              2015,
              2016,
              2017
            ],
            "range": [
              "#cccccc",
              "#cccccc",
              "#cccccc",
              "#cccccc",
              "#cccccc",
              "#cccccc",
              "#cccccc",
              "red"
            ]
          }
        }
      },
      "text": [
        {// horizontal axis labels
          "type": "on-axis",
          "field": "year",
          "values": [
            2010,
            2017
          ],
          "items": [
            {
              "fontSize": 13,
              "color": "#999999",
              "expression": "(\"'\" + (datum.value).toString().slice(2))",
              "fontWeight": 100
            }
          ],
          "tick": {
            "color": "#cccccc"
          }
        },
        {// vertical axis labels
          "type": "on-axis",
          "field": "death",
          "values": [
            200,
            400,
            600
          ],
          "anchor": "start",
          "orient": "left",
          "items": [
            {
              "align": "right",
              "fontSize": 13,
              "color": "#999999",
              "fontWeight": 100
            }
          ]
        },
        {// mark label for 2010 and 2017 only
          "type": "on-mark",
          "field": "year",
          "anchorAlign": "middle",
          "orient": "top-center",
          "values": [
            2010,
            2017
          ],
          "dy": -15,
          "width": 30,
          "items": [
            {// to allow boldface for the 2017 value
              "condition": [2017],
              "align": "center",
              "fontSize": 12,
              "color": "black",
              "fontWeight": 700,
              "expression": "(datum.death)"
            },
            {
              "condition": [2010],
              "align": "center",
              "fontSize": 12,
              "color": "black",
              "fontWeight": 100,
              "expression": "(datum.death)"
            }
          ]
        }
      ]
    }
  ],
  "title": {// title element
    "items": [
      {
        "fontWeight": 700,
        "text": "Drug overdose deaths in six Ohio counties, 2010 to 2017",
        "fontSize": 16,
        "fontcolor": "black"
      }
    ]
  },
  "data": [// dataset for the visualization
    {
      "county": "Warren Co.",
      "year": 2010,
      "death": 11
    },
    {
      "county": "Warren Co.",
      "year": 2011,
      "death": 15
    },
    {
      "county": "Warren Co.",
      "year": 2012,
      "death": 20
    },
    {
      "county": "Warren Co.",
      "year": 2013,
      "death": 25
    },
    {
      "county": "Warren Co.",
      "year": 2014,
      "death": 35
    },
    {
      "county": "Warren Co.",
      "year": 2015,
      "death": 55
    },
    {
      "county": "Warren Co.",
      "year": 2016,
      "death": 65
    },
    {
      "county": "Warren Co.",
      "year": 2017,
      "death": 130
    },
    {
      "county": "Butler",
      "year": 2010,
      "death": 61
    },
    {
      "county": "Butler",
      "year": 2011,
      "death": 90
    },
    {
      "county": "Butler",
      "year": 2012,
      "death": 100
    },
    {
      "county": "Butler",
      "year": 2013,
      "death": 130
    },
    {
      "county": "Butler",
      "year": 2014,
      "death": 150
    },
    {
      "county": "Butler",
      "year": 2015,
      "death": 190
    },
    {
      "county": "Butler",
      "year": 2016,
      "death": 195
    },
    {
      "county": "Butler",
      "year": 2017,
      "death": 268
    },
    {
      "county": "Summit",
      "year": 2010,
      "death": 75
    },
    {
      "county": "Summit",
      "year": 2011,
      "death": 70
    },
    {
      "county": "Summit",
      "year": 2012,
      "death": 85
    },
    {
      "county": "Summit",
      "year": 2013,
      "death": 90
    },
    {
      "county": "Summit",
      "year": 2014,
      "death": 130
    },
    {
      "county": "Summit",
      "year": 2015,
      "death": 210
    },
    {
      "county": "Summit",
      "year": 2016,
      "death": 300
    },
    {
      "county": "Summit",
      "year": 2017,
      "death": 290
    },
    {
      "county": "Hamilton",
      "year": 2010,
      "death": 154
    },
    {
      "county": "Hamilton",
      "year": 2011,
      "death": 190
    },
    {
      "county": "Hamilton",
      "year": 2012,
      "death": 201
    },
    {
      "county": "Hamilton",
      "year": 2013,
      "death": 220
    },
    {
      "county": "Hamilton",
      "year": 2014,
      "death": 250
    },
    {
      "county": "Hamilton",
      "year": 2015,
      "death": 410
    },
    {
      "county": "Hamilton",
      "year": 2016,
      "death": 400
    },
    {
      "county": "Hamilton",
      "year": 2017,
      "death": 543
    },
    {
      "county": "Cuyahoga",
      "year": 2010,
      "death": 267
    },
    {
      "county": "Cuyahoga",
      "year": 2011,
      "death": 280
    },
    {
      "county": "Cuyahoga",
      "year": 2012,
      "death": 300
    },
    {
      "county": "Cuyahoga",
      "year": 2013,
      "death": 320
    },
    {
      "county": "Cuyahoga",
      "year": 2014,
      "death": 350
    },
    {
      "county": "Cuyahoga",
      "year": 2015,
      "death": 365
    },
    {
      "county": "Cuyahoga",
      "year": 2016,
      "death": 640
    },
    {
      "county": "Cuyahoga",
      "year": 2017,
      "death": 775
    },
    {
      "county": "Montgomery",
      "year": 2010,
      "death": 127
    },
    {
      "county": "Montgomery",
      "year": 2011,
      "death": 126
    },
    {
      "county": "Montgomery",
      "year": 2012,
      "death": 180
    },
    {
      "county": "Montgomery",
      "year": 2013,
      "death": 220
    },
    {
      "county": "Montgomery",
      "year": 2014,
      "death": 240
    },
    {
      "county": "Montgomery",
      "year": 2015,
      "death": 238
    },
    {
      "county": "Montgomery",
      "year": 2016,
      "death": 385
    },
    {
      "county": "Montgomery",
      "year": 2017,
      "death": 800
    }
  ]
}
View
Drug overdose deaths in six Ohio counties, 2010 to 2017
$-y-p49586$-y-p51508$-y-p53430$-x-p37380$-x-p37387$-x-p37380$-x-p37387$-x-p37380$-x-p37387$-x-p37380$-x-p37387$-x-p37380$-x-p37387$-x-p37380$-x-p37387Warren Co.ButlerSummitHamiltonCuyahogaMontgomery
11
130
61
268
75
290
154
543
267
775
127
800
'10
'10
'10
'10
'10
'10
'17
'17
'17
'17
'17
'17
200
400
600
Cicero Specification

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

Specification
{
  "$schema": "../cicero.json",
  "name": "overdose-mobile",
  "description": "This is a Cicero specification for 'Drug Overdose' visualization from desktop to mobile.",
  "metadata": {
    "condition": "small"
  },
  "transformations": [
  ...
  ]
}
View
Rules: Resize the chart and adjust the layout (original)
Resize the chart 
    {
      "description": "Resize",
      "specifier": {
        "role": "view"
      },
      "action": "modify",
      "option": {
        "width": 375,
        "height": 400
      }
    }
Adjust the layout by changing the number of columns 
    {
      "description": "Adjusting the number of columns",
      "specifier": {
        "role": "view.facet"
      },
      "action": "modify",
      "option": {
        "nColumns": 3
      }
    }
View
Drug overdose deaths in six Ohio counties, 2010 to 2017
$-y-p49586$-y-p51508$-y-p53430$-y-p49586$-y-p51508$-y-p53430$-x-p37380$-x-p37387$-x-p37380$-x-p37387$-x-p37380$-x-p37387Warren Co.ButlerSummitHamiltonCuyahogaMontgomery
11
130
61
268
75
290
154
543
267
775
127
800
'10
'10
'10
'17
'17
'17
200
200
400
400
600
600
Rules: Resize the chart and adjust the layout (alternative)
Resize the chart 
    {
      "description": "Resize",
      "specifier": {
        "role": "view"
      },
      "action": "modify",
      "option": {
        "width": 375,
        "height": 400
      }
    }
Adjust the layout by changing the number of columns to 1 
    {
      "description": "Adjusting the number of columns",
      "specifier": {
        "role": "view.facet"
      },
      "action": "modify",
      "option": {
        "nColumns": 1
      }
    }
View
Drug overdose deaths in six Ohio counties, 2010 to 2017
$-y-p49586$-y-p51508$-y-p53430$-y-p49586$-y-p51508$-y-p53430$-y-p49586$-y-p51508$-y-p53430$-y-p49586$-y-p51508$-y-p53430$-y-p49586$-y-p51508$-y-p53430$-y-p49586$-y-p51508$-y-p53430$-x-p37380$-x-p37387Warren Co.ButlerSummitHamiltonCuyahogaMontgomery
11
130
61
268
75
290
154
543
267
775
127
800
'10
'17
200
200
200
200
200
200
400
400
400
400
400
400
600
600
600
600
600
600