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","layout": {"align": "center","composition": "single","width": 375,"height": 350,"row": [{"field": "sector","sort": {"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"]}},{"field": "plan","sort": {"order": ["Already passed","Republican plan","Democratic plan"]}}],"column": ["amount"]},"layer": [{"mark": {"type": "bar","color": {"field": "plan","scale": {"domain": ["Republican plan","Already passed","Democratic plan"],"range": ["pink","lightgray","skyblue"]}},"stroke": {"field": "plan","scale": {"domain": ["Republican plan","Already passed","Democratic plan"],"range": ["lightcoral","gray","dodgerblue"]}}},"text": [{"type": "legend","field": "plan","anchor": "start","offset": 40,"orient": "top","direction": "horizontal","gap": 10,"items": [{"width": 80,"align": "left","fontSize": 14,"fontWeight": "700","lineHeight": 100,"marginBottom": 5},{"width": 80,"expression": "'$' + round(sum('amount') / 1000, 1) + ' trillion'","align": "left","fontSize": 12,"fontWeight": "100","lineHeight": 120}]},{"type": "on-axis","field": "sector","angle": 0,"anchor": "middle","orient": "left","items": [{"align": "left","width": 100,"fontSize": 14,"padding": 0,"fontWeight": 100}]},{"type": "on-mark","field": "amount","orient": "middle-right","dx": 5,"width": 50,"items": [{"fontSize": 13,"fontWeight": 200,"color": "#333333","format": ",d","expression": "(isFirst('sector', datum) && isFirst('plan', datum) ? '$' + datum.value + ' billion' : datum.value)"}]}],"tooltip": {"visibility": "on-mark","fields": [{"field": "plan"},{"field": "sector"},{"field": "amount","format": ",d","expression": "'$' + datum.value + ' billion'"}]}}],"data": [{"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"}]}
{"$schema": "../cicero.json","name": "budgets-desktop","description": "This is a Cicero specification for 'COVID-19 Aid Budget Plans' visualization from mobile to desktop.","metadata": {"condition": "large"},"transformations": [{"description": "Resize the chart","specifier": {"role": "view"},"action": "modify","option": {"size": [750,280]}},{"description": "Change the layout by assigning the second row field as the first column element","specifier": {"role": "view"},"action": "replace","option": {"from": {"role": "row","index": 1},"to": {"role": "column","index": 0}}},{"description": "Change the order of the 'plan' field in column","specifier": {"role": "column","field": "plan"},"action": "modify","option": {"sort": {"sortBy": ["Republican plan","Already passed","Democratic plan"]}}},{"description": "Change the visibility of on-axis labels using 'to' keyword","specifier": {"role": "legend","field": "plan"},"action": "replace","option": {"to": {"role": "hAxis","width": null,"offset": 30}}},{"description": "Change the format of mark labels for the 'amount' value of 200, 0, 1010","specifier": {"role": "mark.label","data": {"amount": [200,0,1010]}},"action": "modify","option": {"expression": "'$'+datum.value+' billion'","width": 120}},{"description": "Change the format of labels for the 'amount' value of 1010","specifier": {"role": "mark.label","data": {"amount": [1010]}},"action": "modify","option": {"anchor": "end","width": 120,"dx": -10}},{"comment": "Change the width and offset of axis labels","specifier": {"role": "axis.label","field": "sector"},"action": "modify","option": {"width": 150,"padding": 10}}]}