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.
{
"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"
}
]
}
Below, we provide one transformation rule at a time, and show the intermediate result on the side.
{
"$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": [
...
]
}
{
"description": "Resize the chart; with disproportionate rescaling.",
"specifier": {
"role": "view"
},
"action": "modify",
"option": {
"width": 450,
"proportionate": false
// expressing disproportionate size change }
}
{
"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).
{
"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"
}
}