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.

Mobile view
Design specification 
{
  "data": [
    {
      "date": "2020-01-08",
      "date_text": "January 8, 2020",
      "value": 1e-7,
      "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": 1e-7,
      "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": 1e-7,
      "category": "Health and beauty"
    },
    {
      "date": "2020-01-08",
      "date_text": "January 8, 2020",
      "value": 1e-7,
      "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": 1e-7,
      "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": 1e-7,
      "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": 1e-7,
      "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": 1e-7,
      "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"
    }
  ],
  "name": "spending-line-mobile",
  "layout": {
    "stroke": true,
    "strokeColor": "#dddddd",
    "width": 450,
    "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-03-19",
            "2020-04-01"
          ],
          "tick": {
            "ticks": true,
            "color": "#cccccc"
          },
          "items": [
            {
              "condition": [
                "2020-01-08",
                "2020-04-01"
              ],
              "format": "%b. %-d",
              "formatType": "datetime",
              "fontSize": 14,
              "color": "#cccccc"
            },
            {
              "condition": [
                "2020-03-19"
              ],
              "format": "%b. %-d",
              "formatType": "datetime",
              "fontSize": 14,
              "fontWeight": 700,
              "align": "right",
              "orient": "end"
            },
            {
              "width": 110,
              "condition": [
                "2020-03-19"
              ],
              "value": "California issues country's first stay-at-home order",
              "fontSize": 14,
              "align": "right",
              "orient": "end"
            }
          ]
        },
        {
          "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": 450,
    "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"
        }
      }
    ]
  }
}
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 spendingLess 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
Cicero Specification
Specification
{
  "$schema": "../cicero.json",
  "name": "spending-line-desktop",
  "description": "This is a Cicero specification for 'Covid Spending (Line)' visualization from mobile to desktop.",
  "metadata": {
    "condition": "large"
  },
  "transformations": [
    {
      "description": "Resize the chart; with disproportionate rescaling.",
      "specifier": {
        "role": "view"
      },
      "action": "modify",
      "option": {
        "width": 700,
        "proportionate": false
      }
    },
    {
      "comment": "Add axis labels (the second can't be automated)",
      "specifier": {
        "role": "axis",
        "field": "date"
      },
      "action": "add",
      "option": [
        {
          "values": ["2020-03-01"]
        },
        {
          "values": ["2020-01-20"],
          "label": {
            "items": {
              "text": ["Jan. 21", "First U.S. coronavirus case"]
            } 
          }
        }
      ]
    },
    {
      "comment": "Change the alignment of label",
      "specifier": {
        "role": "axis.label",
        "field": "date",
        "values": ["2020-01-20", "2020-03-19"]
      },
      "action": "modify",
      "option": {
        "textAlign": "left",
        "orient": "center"
      }
    }
  ]
}
Transformed 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 spendingLess spending
Jan. 7
Jan. 19
First 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