A multi-column bar chart about budget plans for the COVID-19 aid by the political parties of U.S.A. This example covers responsive transformation regarding partial transpose, axis-legend replacement, and label formatting.
{"name": "budgets",// name of the view "layout": {// layout object "composition": "single",// single view composition "width": 750,// the width of the entire view "height": 280,// the height of the entire view "row": [// row shelf {// first row element "field": "sector",// field name "sort": {// sort by "order": [// a specific order "Small-business aid","Other measures","Business tax breaks","Stimulus checks","Health care","Unemployment benefits","State and local aid","Safety net and other tax cuts"]}}],"column": [// column shelf {// the irst column element "field": "plan",// field name "sort": {// sort by "order": [// a specific order "Republican plan","Already passed","Democratic plan"]}},"amount"// the second column element (just by name) ]},"layer": [// layers {// the first layer "mark": {// mark type and properties "type": "bar",// mark type "color": {// mark color (fill) property "field": "plan",// providing a field name makes an encoding channel "scale": {// encoding scale details "domain": [// domain order "Republican plan","Already passed","Democratic plan"],"range": [// mannual range (color) value "pink","lightgray","skyblue"]}},"stroke": {// mark stroke color property "field": "plan",// details are as same as the color channel "scale": {"domain": ["Republican plan","Already passed","Democratic plan"],"range": ["lightcoral","gray","dodgerblue"]}}},"text": [// text elements {// the first text element "type": "on-axis",// axis labels; maps to the horizontal axis header "field": "plan",// field of the axis "anchor": "start",// text element anchoring (reference for positioning) "padding": 30,// offset from the visualization elements "items": [// text items, each item = each row {// the first text item, style details "align": "left","fontSize": 14,"fontWeight": "700"},{// the second text item, style details "expression": "'$' + round(sum('amount') / 1000, 1) + ' trillion'",// particular expression (summary statistics--sum for 'amount' field) with text formatting "align": "left","fontSize": 12,"fontWeight": "100"}]},{// the second text element "type": "on-axis",// axis labels "field": "sector",// field of the axis; maps to the vertical axis "padding": 10,// offset from the visualization elements "items": [{"width": 100,"fontSize": 14,"fontWeight": 100,"align": "left"}]},{// the third text elements "type": "on-mark",// mark labels "field": "amount",// field; for mark labels, it's reference field for label values "orient": "middle-right",// reference point to the mark objects "width": 85,// Set the width of each mark label "dx": 5,x position translate value "items": [{"fontSize": 13,"fontWeight": 200,"color": "#333333","expression": "(isFirst('sector', datum) ? '$' + format(datum.value, ',d') + ' billion' : format(datum.value, ',d'))"// if it is the first item in terms of 'sector' field, then it has format of $,d billion; otherwise just ,d number format }],"conditions": [// special conditions {"data": {// for the specified data point "plan": "Already passed","amount": 1010},"options": {// change the following values "orient": "middle-left",// reference point to the mark object "anchor": {"anchorAlign": "end"// reference point from the text object },"dx": -5// x position translate value }}]}]}],"data": [// dataset for the visualization {"sector": "Small-business aid","amount": 200,"plan": "Republican plan","special_label": true},{"sector": "Small-business aid","amount": 1010,"plan": "Already passed","special_label": true},{"sector": "Small-business aid","amount": 0,"plan": "Democratic plan","special_label": true},{"sector": "Other measures","amount": 81,"plan": "Republican plan"},{"sector": "Other measures","amount": 627,"plan": "Already passed"},{"sector": "Other measures","amount": 302,"plan": "Democratic plan"},{"sector": "Business tax breaks","amount": 203,"plan": "Republican plan"},{"sector": "Business tax breaks","amount": 346,"plan": "Already passed"},{"sector": "Business tax breaks","amount": 36,"plan": "Democratic plan"},{"sector": "Stimulus checks","amount": 300,"plan": "Republican plan"},{"sector": "Stimulus checks","amount": 293,"plan": "Already passed"},{"sector": "Stimulus checks","amount": 436,"plan": "Democratic plan"},{"sector": "Health care","amount": 111,"plan": "Republican plan"},{"sector": "Health care","amount": 277,"plan": "Already passed"},{"sector": "Health care","amount": 382,"plan": "Democratic plan"},{"sector": "Unemployment benefits","amount": 110,"plan": "Republican plan"},{"sector": "Unemployment benefits","amount": 274,"plan": "Already passed"},{"sector": "Unemployment benefits","amount": 437,"plan": "Democratic plan"},{"sector": "State and local aid","amount": 105,"plan": "Republican plan"},{"sector": "State and local aid","amount": 256,"plan": "Already passed"},{"sector": "State and local aid","amount": 1118,"plan": "Democratic plan"},{"sector": "Safety net and other tax cuts","amount": 18,"plan": "Republican plan"},{"sector": "Safety net and other tax cuts","amount": 83,"plan": "Already passed"},{"sector": "Safety net and other tax cuts","amount": 736,"plan": "Democratic plan"}]}
Below, we provide one transformation rule at a time, and show the intermediate result on the side.
{"$schema": "../cicero.json","name": "budgets-mobile","description": "This is a Cicero specification for 'COVID-19 Aid Budget Plans' visualization from desktop to mobile.","metadata": {"condition": "small"},"transformations": [...]}
{"description": "Resize the chart","specifier": {"role": "view"},"action": "modify","option": {"size": [// given the targeted size dimension 375,350]}}
{"description": "Change the layout by assigning 'plan' field to row","specifier": {"role": "view"},"action": "replace","option": {"from": {// from the first element of column "role": "column","index": 0},"to": {// to the second element of row "role": "row","index": 1}}}
After the partial transpose, the labels are not removed but repositioned according to its associating elements (marks)—compiler principle (downstream effect to layout).
{"description": "Change the order of field","specifier": {"role": "row","field": "plan"},"action": "modify","option": {"sort": {"sortBy": ["Already passed","Republican plan","Democratic plan"]}}}
{"description": "Change the visibility of axis labels.","specifier": {"role": "axis","field": "plan"},"action": "replace","option": {"to": {"role": "legend",// Change the role to 'legend' "channel": "color","position": "top","direction": "horizontal","margin": 40,"width": 80,"padding": null}}}
The label positions look ugly because the design properties are not modified.
{"description": "Change the width and offset of axis labels.","specifier": {"role": "axis.label","field": "sector"},"action": "modify","option": {"width": 100,"offset": 30}}
{"description": "Change the format of labels for the 'amount' values of 200 and 0","specifier": {"role": "mark.label","data": {"amount": [200, 0]}},"action": "modify","option": {"format": ",d"}}
{"description": "Reposition and reformat a label for the 'amount' value of 1010","specifier": {"role": "mark.label","data": {"amount": [1010]}},"action": "modify","option": {"anchor": "start","dx": 5,"width": 60}}