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"}}