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.

Mobile view
Design specification
{
  "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"
    }
  ]
}
View
$-row-n80441$-row-n14499$-row-p93713$-row-p23155$-row-n27222$-row-n81124$-row-p93284$-row-n61435$leg-p4856$leg-n42284$leg-n69470
200
$1,010 billion
0
81
627
302
203
346
36
300
293
436
111
277
382
110
274
437
105
256
1,118
18
83
736
Already passed
$3.2 trillion
Republican plan
$1.1 trillion
Democratic plan
$3.4 trillion
Small-business aid
Other measures
Business tax breaks
Stimulus checks
Health care
Unemployment benefits
State and local aid
Safety net and other tax cuts
Cicero Specification
Specification
{
  "$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
      }
    }
  ]
}
Transformed View
$-y-n80441!@@@@@@@…$-y-n14499!@@@@@@@…$-y-p93713!@@@@@@@…$-y-p23155!@@@@@@@…$-y-n27222!@@@@@@@…$-y-n81124!@@@@@@@…$-y-p93284!@@@@@@@…$-y-n61435!@@@@@@@…$-c-n42284!@@$-c-p4856!@@$-c-n69470!@@
$200 billion
$1,010 billion
$0 billion
81
627
302
203
346
36
300
293
436
111
277
382
110
274
437
105
256
1,118
18
83
736
Republican plan
$1.1 trillion
Already passed
$3.2 trillion
Democratic plan
$3.4 trillion
Small-business aid
Other measures
Business tax breaks
Stimulus checks
Health care
Unemployment benefits
State and local aid
Safety net and other tax cuts