A line chart about changes to how people have been spending money since the COVID-19 outbreak. This example covers transformation strategies for the axis labels.

Desktop view
Design specification
{
  "name": "spending",
  "layout": {
    "stroke": true,
    "strokeColor": "#dddddd",
    "width": 800,
    "height": 500,
    "composition": "single",
    "column": [
      {
        "field": "date",
        "type": "temporal"
      }
    ],
    "row": [
      {
        "field": "value",
        "type": "quantitative"
      }
    ],
    "haxis": {
      "domain": true,
      "domainColor": "#dddddd",
      "grid": true,
      "gridColor": "#dddddd"
    },
    "vaxis": {
      "domain": true,
      "domainColor": "#dddddd",
      "grid": true,
      "gridColor": "#dddddd"
    }
  },
  "layer": [
    {
      "mark": {
        "type": "line",
        "interpolate": "monotone",
        "strokeWidth": {
          "value": 5
        },
        "color": {
          "field": "category",
          "scale": {
            "domain": [
              "Groceries",
              "Health and beauty",
              "Entertainment",
              "Restaurants",
              "Transportation",
              "Shopping",
              "Travel"
            ],
            "range": [
              "#3ea990",
              "#7da9a4",
              "#ae9e9b",
              "#bc9489",
              "#cb8873",
              "#d97b5c",
              "#f46230"
            ]
          }
        }
      },
      "text": [
        {
          "type": "on-axis",
          "field": "date",
          "values": [
            "2020-01-08",
            "2020-01-20",
            "2020-03-01",
            "2020-03-19",
            "2020-04-01"
          ],
          "tick": {
            "ticks": true,
            "color": "#cccccc"
          },
          "items": [
            {
              "condition": [
                "2020-01-08",
                "2020-03-01",
                "2020-04-01"
              ],
              "format": "%b. %-d",
              "formatType": "datetime",
              "fontSize": 14,
              "color": "#cccccc"
            },
            {
              "condition": [
                "2020-01-20",
                "2020-03-19"
              ],
              "format": "%b. %-d",
              "formatType": "datetime",
              "fontSize": 14,
              "fontWeight": 700
            },
            {
              "width": 100,
              "condition": [
                "2020-01-20"
              ],
              "value": "Fist U.S. coronavirus case",
              "fontSize": 14
            },
            {
              "width": 110,
              "condition": [
                "2020-03-19"
              ],
              "value": "California issues country's first stay-at-home order",
              "fontSize": 14
            }
          ]
        },
        {
          "type": "on-axis",
          "field": "value",
          "values": [
            -1,
            -0.5,
            0,
            0.5
          ],
          "padding": 10,
          "align": "right",
          "items": [
            {
              "format": "+.0%",
              "expr": "(datum.label == 0 ? '' : (datum.label > 0 ? '+' : '-')) + datum.label",
              "fontSize": 14,
              "color": "#cccccc"
            }
          ]
        },
        {
          "type": "on-mark",
          "field": "category",
          "width": 100,
          "dx": 5,
          "items": [
            {
              "align": "left",
              "fontSize": 14,
              "fontWeight": "700",
              "lineHeight": 100,
              "marginBottom": 5,
              "color": "$mark"
            }
          ]
        }
      ],
      "tooltip": {
        "visibility": "on-mark",
        "fields": [
          {
            "field": "category"
          }
        ]
      }
    },
    {
      "mark": {
        "type": "circle",
        "size": {
          "value": 90
        },
        "opacity": {
          "value": 1
        },
        "color": {
          "field": "category",
          "scale": {
            "domain": [
              "Groceries",
              "Health and beauty",
              "Entertainment",
              "Restaurants",
              "Transportation",
              "Shopping",
              "Travel"
            ],
            "range": [
              "#3ea990",
              "#7da9a4",
              "#ae9e9b",
              "#bc9489",
              "#cb8873",
              "#d97b5c",
              "#f46230"
            ]
          }
        }
      },
      "transform": [
        {
          "filter": "datum.date == dateParse('2020-04-01')"
        }
      ]
    }
  ],
  "title": {
    "width": 700,
    "align": "center",
    "items": [
      {
        "text": "Change in credit and debit card spending",
        "align": "center",
        "fontSize": 20,
        "fontWeight": 700,
        "offset": 20
      }
    ]
  },
  "nondata": {
    "items": [
      {
        "type": "text",
        "name": "text-assist-upward",
        "x": 25,
        "y": 140,
        "dx": 0,
        "width": 50,
        "text": {
          "text": "$arrow-up$
More spending",
"align": "right", "fontSize": 13, "lineHeight": 140, "fontColor": "#cccccc" } }, { "type": "text", "name": "text-assist-downward", "x": 25, "y": 225, "width": 50, "text": { "text": "Less spending
$arrow-down$",
"align": "right", "fontSize": 13, "lineHeight": 140, "fontColor": "#cccccc" } } ] }, "data": [ { "date": "2020-01-08", "date_text": "January 8, 2020", "value": 0.0000001, "category": "Groceries" }, { "date": "2020-01-15", "date_text": "January 15, 2020", "value": 0.00001948057484, "category": "Groceries" }, { "date": "2020-01-22", "date_text": "January 22, 2020", "value": -0.0151689254, "category": "Groceries" }, { "date": "2020-01-29", "date_text": "January 29, 2020", "value": -0.03511067424, "category": "Groceries" }, { "date": "2020-02-05", "date_text": "February 5, 2020", "value": 0.02339388132, "category": "Groceries" }, { "date": "2020-02-12", "date_text": "February 12, 2020", "value": 0.04364916594, "category": "Groceries" }, { "date": "2020-02-19", "date_text": "February 19, 2020", "value": 0.01238221206, "category": "Groceries" }, { "date": "2020-02-26", "date_text": "February 26, 2020", "value": 0.01119674652, "category": "Groceries" }, { "date": "2020-03-04", "date_text": "March 4, 2020", "value": 0.08274813095, "category": "Groceries" }, { "date": "2020-03-11", "date_text": "March 11, 2020", "value": 0.1516048952, "category": "Groceries" }, { "date": "2020-03-18", "date_text": "March 18, 2020", "value": 0.4105352919, "category": "Groceries" }, { "date": "2020-03-25", "date_text": "March 25, 2020", "value": 0.4396332885, "category": "Groceries" }, { "date": "2020-04-01", "date_text": "April 1, 2020", "value": 0.1371888215, "category": "Groceries" }, { "date": "2020-01-08", "date_text": "January 8, 2020", "value": 0.0000001, "category": "Health and beauty" }, { "date": "2020-01-15", "date_text": "January 15, 2020", "value": -0.05503383, "category": "Health and beauty" }, { "date": "2020-01-22", "date_text": "January 22, 2020", "value": -0.08340414276, "category": "Health and beauty" }, { "date": "2020-01-29", "date_text": "January 29, 2020", "value": -0.09739717236, "category": "Health and beauty" }, { "date": "2020-02-05", "date_text": "February 5, 2020", "value": -0.013983605, "category": "Health and beauty" }, { "date": "2020-02-12", "date_text": "February 12, 2020", "value": 0.003749074, "category": "Health and beauty" }, { "date": "2020-02-19", "date_text": "February 19, 2020", "value": -0.043150098, "category": "Health and beauty" }, { "date": "2020-02-26", "date_text": "February 26, 2020", "value": -0.033018074, "category": "Health and beauty" }, { "date": "2020-03-04", "date_text": "March 4, 2020", "value": 0.080791618, "category": "Health and beauty" }, { "date": "2020-03-11", "date_text": "March 11, 2020", "value": 0.09799929, "category": "Health and beauty" }, { "date": "2020-03-18", "date_text": "March 18, 2020", "value": 0.028241623, "category": "Health and beauty" }, { "date": "2020-03-25", "date_text": "March 25, 2020", "value": -0.048250468, "category": "Health and beauty" }, { "date": "2020-04-01", "date_text": "April 1, 2020", "value": 0.0000001, "category": "Health and beauty" }, { "date": "2020-01-08", "date_text": "January 8, 2020", "value": 0.0000001, "category": "Entertainment" }, { "date": "2020-01-15", "date_text": "January 15, 2020", "value": -0.14137686, "category": "Entertainment" }, { "date": "2020-01-22", "date_text": "January 22, 2020", "value": -0.156452665, "category": "Entertainment" }, { "date": "2020-01-29", "date_text": "January 29, 2020", "value": -0.160575356, "category": "Entertainment" }, { "date": "2020-02-05", "date_text": "February 5, 2020", "value": -0.160226738, "category": "Entertainment" }, { "date": "2020-02-12", "date_text": "February 12, 2020", "value": -0.12352617, "category": "Entertainment" }, { "date": "2020-02-19", "date_text": "February 19, 2020", "value": -0.085734832, "category": "Entertainment" }, { "date": "2020-02-26", "date_text": "February 26, 2020", "value": -0.082306385, "category": "Entertainment" }, { "date": "2020-03-04", "date_text": "March 4, 2020", "value": -0.043338236, "category": "Entertainment" }, { "date": "2020-03-11", "date_text": "March 11, 2020", "value": -0.038458738, "category": "Entertainment" }, { "date": "2020-03-18", "date_text": "March 18, 2020", "value": -0.152686141, "category": "Entertainment" }, { "date": "2020-03-25", "date_text": "March 25, 2020", "value": -0.241046999, "category": "Entertainment" }, { "date": "2020-04-01", "date_text": "April 1, 2020", "value": -0.31529887, "category": "Entertainment" }, { "date": "2020-01-08", "date_text": "January 8, 2020", "value": 0.0000001, "category": "Restaurants" }, { "date": "2020-01-15", "date_text": "January 15, 2020", "value": -0.023076466, "category": "Restaurants" }, { "date": "2020-01-22", "date_text": "January 22, 2020", "value": -0.013947434, "category": "Restaurants" }, { "date": "2020-01-29", "date_text": "January 29, 2020", "value": -0.005165228, "category": "Restaurants" }, { "date": "2020-02-05", "date_text": "February 5, 2020", "value": 0.005844618, "category": "Restaurants" }, { "date": "2020-02-12", "date_text": "February 12, 2020", "value": 0.035088322, "category": "Restaurants" }, { "date": "2020-02-19", "date_text": "February 19, 2020", "value": 0.080400292, "category": "Restaurants" }, { "date": "2020-02-26", "date_text": "February 26, 2020", "value": 0.090775817, "category": "Restaurants" }, { "date": "2020-03-04", "date_text": "March 4, 2020", "value": 0.091548377, "category": "Restaurants" }, { "date": "2020-03-11", "date_text": "March 11, 2020", "value": 0.109985847, "category": "Restaurants" }, { "date": "2020-03-18", "date_text": "March 18, 2020", "value": 0.00392837, "category": "Restaurants" }, { "date": "2020-03-25", "date_text": "March 25, 2020", "value": -0.210426521, "category": "Restaurants" }, { "date": "2020-04-01", "date_text": "April 1, 2020", "value": -0.322017366, "category": "Restaurants" }, { "date": "2020-01-08", "date_text": "January 8, 2020", "value": 0.0000001, "category": "Shopping" }, { "date": "2020-01-15", "date_text": "January 15, 2020", "value": -0.116202456, "category": "Shopping" }, { "date": "2020-01-22", "date_text": "January 22, 2020", "value": -0.156525644, "category": "Shopping" }, { "date": "2020-01-29", "date_text": "January 29, 2020", "value": -0.19456499, "category": "Shopping" }, { "date": "2020-02-05", "date_text": "February 5, 2020", "value": -0.192867532, "category": "Shopping" }, { "date": "2020-02-12", "date_text": "February 12, 2020", "value": -0.130319654, "category": "Shopping" }, { "date": "2020-02-19", "date_text": "February 19, 2020", "value": -0.089365211, "category": "Shopping" }, { "date": "2020-02-26", "date_text": "February 26, 2020", "value": -0.102171713, "category": "Shopping" }, { "date": "2020-03-04", "date_text": "March 4, 2020", "value": -0.078215203, "category": "Shopping" }, { "date": "2020-03-11", "date_text": "March 11, 2020", "value": -0.05672383, "category": "Shopping" }, { "date": "2020-03-18", "date_text": "March 18, 2020", "value": -0.203825827, "category": "Shopping" }, { "date": "2020-03-25", "date_text": "March 25, 2020", "value": -0.432594654, "category": "Shopping" }, { "date": "2020-04-01", "date_text": "April 1, 2020", "value": -0.578998828, "category": "Shopping" }, { "date": "2020-01-08", "date_text": "January 8, 2020", "value": 0.0000001, "category": "Transportation" }, { "date": "2020-01-15", "date_text": "January 15, 2020", "value": -0.008393458, "category": "Transportation" }, { "date": "2020-01-22", "date_text": "January 22, 2020", "value": -0.008140312, "category": "Transportation" }, { "date": "2020-01-29", "date_text": "January 29, 2020", "value": -0.01713353, "category": "Transportation" }, { "date": "2020-02-05", "date_text": "February 5, 2020", "value": 0.00942337, "category": "Transportation" }, { "date": "2020-02-12", "date_text": "February 12, 2020", "value": 0.036202099, "category": "Transportation" }, { "date": "2020-02-19", "date_text": "February 19, 2020", "value": 0.033704293, "category": "Transportation" }, { "date": "2020-02-26", "date_text": "February 26, 2020", "value": 0.048508603, "category": "Transportation" }, { "date": "2020-03-04", "date_text": "March 4, 2020", "value": 0.100802723, "category": "Transportation" }, { "date": "2020-03-11", "date_text": "March 11, 2020", "value": 0.115441461, "category": "Transportation" }, { "date": "2020-03-18", "date_text": "March 18, 2020", "value": 0.001055256, "category": "Transportation" }, { "date": "2020-03-25", "date_text": "March 25, 2020", "value": -0.222458254, "category": "Transportation" }, { "date": "2020-04-01", "date_text": "April 1, 2020", "value": -0.432538734, "category": "Transportation" }, { "date": "2020-01-08", "date_text": "January 8, 2020", "value": 0.0000001, "category": "Travel" }, { "date": "2020-01-15", "date_text": "January 15, 2020", "value": 0.016539395, "category": "Travel" }, { "date": "2020-01-22", "date_text": "January 22, 2020", "value": 0.013165188, "category": "Travel" }, { "date": "2020-01-29", "date_text": "January 29, 2020", "value": -0.001377965, "category": "Travel" }, { "date": "2020-02-05", "date_text": "February 5, 2020", "value": -0.020675581, "category": "Travel" }, { "date": "2020-02-12", "date_text": "February 12, 2020", "value": 0.014049271, "category": "Travel" }, { "date": "2020-02-19", "date_text": "February 19, 2020", "value": 0.07332885, "category": "Travel" }, { "date": "2020-02-26", "date_text": "February 26, 2020", "value": 0.097250078, "category": "Travel" }, { "date": "2020-03-04", "date_text": "March 4, 2020", "value": 0.082129205, "category": "Travel" }, { "date": "2020-03-11", "date_text": "March 11, 2020", "value": -0.000830732, "category": "Travel" }, { "date": "2020-03-18", "date_text": "March 18, 2020", "value": -0.236042745, "category": "Travel" }, { "date": "2020-03-25", "date_text": "March 25, 2020", "value": -0.572854901, "category": "Travel" }, { "date": "2020-04-01", "date_text": "April 1, 2020", "value": -0.792851324, "category": "Travel" } ] }
View
Change in credit and debit card spending
$-x-0$-x-0.25$-x-0.5$-x-0.75$-x-1$-y-p1444$-y-p88319$-y-p48$-y-p47607$-tc0-Groceries$-tc0-Health and beauty$-tc0-Entertainment$-tc0-Restaurants$-tc0-Shopping$-tc0-Transportation$-tc0-Travel

More spending
Less spending
Jan. 7
Jan. 19
Fist U.S. coronavirus case
Feb. 29
Mar. 18
California issues country's first stay-at-home order
Mar. 31
−100%
−50%
+0%
+50%
Groceries
Health and beauty
Entertainment
Restaurants
Shopping
Transportation
Travel
Cicero Specification

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

Specification
{
  "$schema": "../cicero.json",
  "name": "spending-line-mobile",
  "description": "This is a Cicero specification for 'COVID Spending (Line)' visualization from desktop to mobile.",
  "metadata": {
    "condition": "small"
  },
  "transformations": [
  ...
  ]
}
Rules: Resize the chart (disproportionately) and remove some axis labels
Resize the chart disproportionately
    {
      "description": "Resize the chart; with disproportionate rescaling.",
      "specifier": {
        "role": "view"
      },
      "action": "modify",
      "option": {
        "width": 450,
        "proportionate": false// expressing disproportionate size change
      }
    }
Remove some axis values
    {
      "comment": "Remove axis values",
      "specifier": {
        "role": "axis",
        "field": "date",
        "values": ["2020-01-20", "2020-03-01"]// specify by value
      },
      "action": "remove"
    }

The alignment of horizontal axis labels looks not good (overlapping).

View
Change in credit and debit card spending
$-x-0$-x-0.5$-x-1$-y-p1444$-y-p88319$-y-p48$-y-p47607$-tc0-Groceries$-tc0-Health and beauty$-tc0-Entertainment$-tc0-Restaurants$-tc0-Shopping$-tc0-Transportation$-tc0-Travel

More spending
Less spending
Jan. 7
Mar. 18
California issues country's first stay-at-home order
Mar. 31
−100%
−50%
+0%
+50%
Groceries
Health and beauty
Entertainment
Restaurants
Shopping
Transportation
Travel
Rule: Change the alignment of axis labels
    {
      "comment": "Change the alignment of axis label",
      "specifier": {
        "role": "axis.label",
        "field": "date",
        "values": ["2020-03-19"]// query by data
      },
      "action": "modify",
      "option": {// alignment properties
        "textAlign": "right",
        "orient": "end"
      }
    }

View
Change in credit and debit card spending
$-x-0$-x-0.5$-x-1$-y-p1444$-y-p88319$-y-p48$-y-p47607$-tc0-Groceries$-tc0-Health and beauty$-tc0-Entertainment$-tc0-Restaurants$-tc0-Shopping$-tc0-Transportation$-tc0-Travel

More spending
Less spending
Jan. 7
Mar. 18
California issues country's first stay-at-home order
Mar. 31
−100%
−50%
+0%
+50%
Groceries
Health and beauty
Entertainment
Restaurants
Shopping
Transportation
Travel