All charts/Trees & packs

A company budget

levels= nests the posts in their departments.

1 The data _data/company.json json

[
  { "department": "Engineering", "post": "Salaries",    "amount": 2400 },
  { "department": "Engineering", "post": "Cloud",       "amount":  680 },
  { "department": "Engineering", "post": "Tools",       "amount":  210 },
  { "department": "Sales",       "post": "Salaries",    "amount": 1350 },
  { "department": "Sales",       "post": "Travel",      "amount":  420 },
  { "department": "Sales",       "post": "Events",      "amount":  310 },
  { "department": "Marketing",   "post": "Campaigns",   "amount":  760 },
  { "department": "Marketing",   "post": "Salaries",    "amount":  640 },
  { "department": "Support",     "post": "Salaries",    "amount":  820 },
  { "department": "Support",     "post": "Training",    "amount":  140 },
  { "department": "Office",      "post": "Rent",        "amount":  560 },
  { "department": "Office",      "post": "Facilities",  "amount":  190 }
]

2 The chart tag hierarchy/company.pad pad

{chart 'treemap', data='company', levels='department', label='post', value='amount', title='The budget, in thousands', width=640, height=420}

3 The result inline SVG · no JavaScript