Created
April 9, 2025 18:11
-
-
Save Giammaria/8dda94caa1fdfc6f13e1992420ef29a6 to your computer and use it in GitHub Desktop.
20250409_drilldown_bar_chart_v_v1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "$schema": "https://vega.github.io/schema/vega/v6.json", | |
| "width": 600, | |
| "autosize": {"contains": "padding", "type": "fit"}, | |
| "signals": [ | |
| {"name": "desiredHeight", "init": "400"}, | |
| {"name": "height", "init": "400"}, | |
| { | |
| "name": "configCategories", | |
| "init": "{sortedValues: ['North', 'South', 'East', 'West'], title: 'Region', step: 150}" | |
| }, | |
| { | |
| "name": "configSubCategories", | |
| "init": "{sortedValues: ['Q1', 'Q2', 'Q3', 'Q4'], title: 'Quarter'}" | |
| }, | |
| { | |
| "name": "configLegend", | |
| "init": "{sortedValues: ['Electronics', 'Furniture', 'Office Supplies'], title: 'Sales Type', fillRange: ['#51137c', '#b6377a', '#fb8762']}" | |
| }, | |
| {"name": "configValues", "init": "{title: 'Sales', format: '$.0f'}"}, | |
| { | |
| "name": "actualHeight", | |
| "update": "max(length(length(selectedCategories) > 0 ? selectedCategories : configCategories.sortedValues)*configCategories.step, desiredHeight)" | |
| }, | |
| {"name": "currentLevel", "update": "'Category'"}, | |
| { | |
| "name": "ctrlKey", | |
| "init": "false", | |
| "on": [ | |
| {"events": "window:keydown[event.ctrlKey]", "update": "true"}, | |
| {"events": "window:keyup", "update": "false"} | |
| ] | |
| }, | |
| { | |
| "name": "selectedCategories", | |
| "init": "[]", | |
| "on": [ | |
| { | |
| "events": "@level0FacetGroup:click", | |
| "update": "!isValid(selectedCategories) || length(selectedCategories) === 0 ? [datum.Category] : !ctrlKey ? indexof (selectedCategories, datum.Category) < 0 ? [datum.Category] : [] : (length(selectedCategories) === 1 && datum.Category === selectedCategories[0]) ? [] : (indexof(selectedCategories, datum.Category) >= 0 ? split(replace(replace(trim(join(selectedCategories, ',')), datum.Category, ''), /^,|,$/, ''),',') : split(replace(trim(join(selectedCategories, ',')), /^,|,$/, '') + ','+datum.Category, ','))" | |
| } | |
| ] | |
| } | |
| ], | |
| "marks": [ | |
| { | |
| "name": "chartGroup", | |
| "type": "group", | |
| "from": { | |
| "facet": { | |
| "name": "level0Facet", | |
| "data": "dataset", | |
| "groupby": ["level0"] | |
| } | |
| }, | |
| "encode": { | |
| "update": { | |
| "clip": {"value": true}, | |
| "width": {"signal": "width"}, | |
| "height": {"signal": "desiredHeight"} | |
| } | |
| }, | |
| "data": [ | |
| { | |
| "name": "level0FacetFormatted", | |
| "source": "level0Facet", | |
| "transform": [ | |
| { | |
| "type": "formula", | |
| "expr": "datum['Total SubCategory Value']/datum['level0TotalValue']", | |
| "as": "SubCategory Percentage" | |
| } | |
| ] | |
| } | |
| ], | |
| "scales": [ | |
| { | |
| "name": "scaleYLevel1", | |
| "type": "band", | |
| "domain": { | |
| "signal": "configSubCategories.sortedValues", | |
| "sort": true | |
| }, | |
| "range": { | |
| "signal": "[scale('scaleYLevel0', parent['level0Sort']), scale('scaleYLevel0', parent['level0Sort'])+bandwidth('scaleYLevel0')]" | |
| } | |
| } | |
| ], | |
| "axes": [{"scale": "scaleYLevel1", "orient": "left"}], | |
| "marks": [ | |
| { | |
| "name": "level0FacetGroup", | |
| "type": "group", | |
| "from": {"data": "level0FacetFormatted"}, | |
| "encode": { | |
| "update": { | |
| "tooltip": {"signal": "datum"}, | |
| "y": {"signal": "scale('scaleYLevel0', datum['level0Sort'])"}, | |
| "width": { | |
| "signal": "scale('scaleXValue', datum['level0TotalValue'])" | |
| }, | |
| "height": {"signal": "bandwidth('scaleYLevel0')"}, | |
| "fill": {"value": "gainsboro"}, | |
| "fillOpacity": {"value": 0.25} | |
| } | |
| } | |
| } | |
| ] | |
| } | |
| ], | |
| "scales": [ | |
| { | |
| "name": "scaleXValue", | |
| "type": "linear", | |
| "domain": {"data": "dataset", "fields": ["level0TotalValue"]}, | |
| "range": {"signal": "[0,width]"}, | |
| "zero": true | |
| }, | |
| { | |
| "name": "scaleYLevel0", | |
| "type": "band", | |
| "domain": {"data": "dataset", "field": "level0Sort", "sort": true}, | |
| "range": {"signal": "[0, actualHeight]"}, | |
| "paddingInner": 0.15 | |
| } | |
| ], | |
| "axes": [ | |
| { | |
| "scale": "scaleXValue", | |
| "orient": "top", | |
| "domain": false, | |
| "encode": { | |
| "labels": { | |
| "update": { | |
| "text": {"signal": "format(datum.value, configValues.format)"} | |
| } | |
| } | |
| } | |
| }, | |
| { | |
| "scale": "scaleYLevel0", | |
| "orient": "left", | |
| "domain": false, | |
| "ticks": false, | |
| "offset": 30, | |
| "encode": { | |
| "labels": { | |
| "update": { | |
| "text": {"signal": "configCategories.sortedValues[datum.value]"} | |
| } | |
| } | |
| } | |
| } | |
| ], | |
| "data": [ | |
| { | |
| "name": "dataset", | |
| "values": [ | |
| { | |
| "Category": "North", | |
| "SubCategory": "Q1", | |
| "Legend": "Electronics", | |
| "Value": 12000 | |
| }, | |
| { | |
| "Category": "North", | |
| "SubCategory": "Q1", | |
| "Legend": "Furniture", | |
| "Value": 8000 | |
| }, | |
| { | |
| "Category": "North", | |
| "SubCategory": "Q1", | |
| "Legend": "Office Supplies", | |
| "Value": 5000 | |
| }, | |
| { | |
| "Category": "North", | |
| "SubCategory": "Q2", | |
| "Legend": "Electronics", | |
| "Value": 15000 | |
| }, | |
| { | |
| "Category": "North", | |
| "SubCategory": "Q2", | |
| "Legend": "Furniture", | |
| "Value": 7000 | |
| }, | |
| { | |
| "Category": "North", | |
| "SubCategory": "Q2", | |
| "Legend": "Office Supplies", | |
| "Value": 6000 | |
| }, | |
| { | |
| "Category": "North", | |
| "SubCategory": "Q3", | |
| "Legend": "Electronics", | |
| "Value": 13500 | |
| }, | |
| { | |
| "Category": "North", | |
| "SubCategory": "Q3", | |
| "Legend": "Furniture", | |
| "Value": 8500 | |
| }, | |
| { | |
| "Category": "North", | |
| "SubCategory": "Q3", | |
| "Legend": "Office Supplies", | |
| "Value": 6200 | |
| }, | |
| { | |
| "Category": "North", | |
| "SubCategory": "Q4", | |
| "Legend": "Electronics", | |
| "Value": 16000 | |
| }, | |
| { | |
| "Category": "North", | |
| "SubCategory": "Q4", | |
| "Legend": "Furniture", | |
| "Value": 7700 | |
| }, | |
| { | |
| "Category": "North", | |
| "SubCategory": "Q4", | |
| "Legend": "Office Supplies", | |
| "Value": 5800 | |
| }, | |
| { | |
| "Category": "South", | |
| "SubCategory": "Q1", | |
| "Legend": "Electronics", | |
| "Value": 10000 | |
| }, | |
| { | |
| "Category": "South", | |
| "SubCategory": "Q1", | |
| "Legend": "Furniture", | |
| "Value": 9000 | |
| }, | |
| { | |
| "Category": "South", | |
| "SubCategory": "Q1", | |
| "Legend": "Office Supplies", | |
| "Value": 4000 | |
| }, | |
| { | |
| "Category": "South", | |
| "SubCategory": "Q2", | |
| "Legend": "Electronics", | |
| "Value": 13000 | |
| }, | |
| { | |
| "Category": "South", | |
| "SubCategory": "Q2", | |
| "Legend": "Furniture", | |
| "Value": 8500 | |
| }, | |
| { | |
| "Category": "South", | |
| "SubCategory": "Q2", | |
| "Legend": "Office Supplies", | |
| "Value": 4500 | |
| }, | |
| { | |
| "Category": "South", | |
| "SubCategory": "Q3", | |
| "Legend": "Electronics", | |
| "Value": 12500 | |
| }, | |
| { | |
| "Category": "South", | |
| "SubCategory": "Q3", | |
| "Legend": "Furniture", | |
| "Value": 8700 | |
| }, | |
| { | |
| "Category": "South", | |
| "SubCategory": "Q3", | |
| "Legend": "Office Supplies", | |
| "Value": 4200 | |
| }, | |
| { | |
| "Category": "South", | |
| "SubCategory": "Q4", | |
| "Legend": "Electronics", | |
| "Value": 14500 | |
| }, | |
| { | |
| "Category": "South", | |
| "SubCategory": "Q4", | |
| "Legend": "Furniture", | |
| "Value": 7900 | |
| }, | |
| { | |
| "Category": "South", | |
| "SubCategory": "Q4", | |
| "Legend": "Office Supplies", | |
| "Value": 4600 | |
| }, | |
| { | |
| "Category": "East", | |
| "SubCategory": "Q1", | |
| "Legend": "Electronics", | |
| "Value": 11000 | |
| }, | |
| { | |
| "Category": "East", | |
| "SubCategory": "Q1", | |
| "Legend": "Furniture", | |
| "Value": 6000 | |
| }, | |
| { | |
| "Category": "East", | |
| "SubCategory": "Q1", | |
| "Legend": "Office Supplies", | |
| "Value": 5500 | |
| }, | |
| { | |
| "Category": "East", | |
| "SubCategory": "Q2", | |
| "Legend": "Electronics", | |
| "Value": 14000 | |
| }, | |
| { | |
| "Category": "East", | |
| "SubCategory": "Q2", | |
| "Legend": "Furniture", | |
| "Value": 7500 | |
| }, | |
| { | |
| "Category": "East", | |
| "SubCategory": "Q2", | |
| "Legend": "Office Supplies", | |
| "Value": 6500 | |
| }, | |
| { | |
| "Category": "East", | |
| "SubCategory": "Q3", | |
| "Legend": "Electronics", | |
| "Value": 11500 | |
| }, | |
| { | |
| "Category": "East", | |
| "SubCategory": "Q3", | |
| "Legend": "Furniture", | |
| "Value": 7000 | |
| }, | |
| { | |
| "Category": "East", | |
| "SubCategory": "Q3", | |
| "Legend": "Office Supplies", | |
| "Value": 6000 | |
| }, | |
| { | |
| "Category": "East", | |
| "SubCategory": "Q4", | |
| "Legend": "Electronics", | |
| "Value": 15000 | |
| }, | |
| { | |
| "Category": "East", | |
| "SubCategory": "Q4", | |
| "Legend": "Furniture", | |
| "Value": 7200 | |
| }, | |
| { | |
| "Category": "East", | |
| "SubCategory": "Q4", | |
| "Legend": "Office Supplies", | |
| "Value": 6700 | |
| }, | |
| { | |
| "Category": "West", | |
| "SubCategory": "Q1", | |
| "Legend": "Electronics", | |
| "Value": 9500 | |
| }, | |
| { | |
| "Category": "West", | |
| "SubCategory": "Q1", | |
| "Legend": "Furniture", | |
| "Value": 8800 | |
| }, | |
| { | |
| "Category": "West", | |
| "SubCategory": "Q1", | |
| "Legend": "Office Supplies", | |
| "Value": 4800 | |
| }, | |
| { | |
| "Category": "West", | |
| "SubCategory": "Q2", | |
| "Legend": "Electronics", | |
| "Value": 12000 | |
| }, | |
| { | |
| "Category": "West", | |
| "SubCategory": "Q2", | |
| "Legend": "Furniture", | |
| "Value": 9100 | |
| }, | |
| { | |
| "Category": "West", | |
| "SubCategory": "Q2", | |
| "Legend": "Office Supplies", | |
| "Value": 5300 | |
| }, | |
| { | |
| "Category": "West", | |
| "SubCategory": "Q3", | |
| "Legend": "Electronics", | |
| "Value": 10500 | |
| }, | |
| { | |
| "Category": "West", | |
| "SubCategory": "Q3", | |
| "Legend": "Furniture", | |
| "Value": 8200 | |
| }, | |
| { | |
| "Category": "West", | |
| "SubCategory": "Q3", | |
| "Legend": "Office Supplies", | |
| "Value": 4900 | |
| }, | |
| { | |
| "Category": "West", | |
| "SubCategory": "Q4", | |
| "Legend": "Electronics", | |
| "Value": 13500 | |
| }, | |
| { | |
| "Category": "West", | |
| "SubCategory": "Q4", | |
| "Legend": "Furniture", | |
| "Value": 8600 | |
| }, | |
| { | |
| "Category": "West", | |
| "SubCategory": "Q4", | |
| "Legend": "Office Supplies", | |
| "Value": 5100 | |
| } | |
| ], | |
| "transform": [ | |
| { | |
| "type": "formula", | |
| "expr": "configCategories.sortedValues", | |
| "as": "Category Sort" | |
| }, | |
| { | |
| "type": "formula", | |
| "expr": "indexof(datum['Category Sort'], datum.Category)", | |
| "as": "Category Sort" | |
| }, | |
| { | |
| "type": "formula", | |
| "expr": "configSubCategories.sortedValues", | |
| "as": "SubCategory Sort" | |
| }, | |
| { | |
| "type": "formula", | |
| "expr": "indexof(datum['SubCategory Sort'], datum.SubCategory)", | |
| "as": "SubCategory Sort" | |
| }, | |
| { | |
| "type": "formula", | |
| "expr": "configLegend.sortedValues", | |
| "as": "Legend Sort" | |
| }, | |
| { | |
| "type": "formula", | |
| "expr": "indexof(datum['Legend Sort'], datum.Legend)", | |
| "as": "Legend Sort" | |
| }, | |
| {"type": "formula", "expr": "currentLevel", "as": "currentLevel"}, | |
| { | |
| "type": "joinaggregate", | |
| "ops": ["distinct"], | |
| "fields": ["SubCategory"], | |
| "groupby": ["Category"], | |
| "as": ["Category Member Count"] | |
| }, | |
| { | |
| "type": "joinaggregate", | |
| "ops": ["distinct"], | |
| "fields": ["Legend"], | |
| "groupby": ["Category", "SubCategory"], | |
| "as": ["SubCategory Member Count"] | |
| }, | |
| { | |
| "type": "formula", | |
| "expr": "datum.currentLevel === 'Category' ? datum.Category : datum['SubCategory']", | |
| "as": "level0" | |
| }, | |
| { | |
| "type": "formula", | |
| "expr": "datum.currentLevel === 'Category' ? datum['Category Sort'] : datum['SubCategory Sort']", | |
| "as": "level0Sort" | |
| }, | |
| { | |
| "type": "formula", | |
| "expr": "datum.currentLevel === 'Category' ? datum['SubCategory'] : datum['Legend']", | |
| "as": "level1" | |
| }, | |
| { | |
| "type": "formula", | |
| "expr": "datum.currentLevel === 'Category' ? datum['SubCategory Sort'] : datum['Legend Sort']", | |
| "as": "level1Sort" | |
| }, | |
| { | |
| "type": "formula", | |
| "expr": "datum.currentLevel === 'Category' ? configCategories.step/length(isValid(selectedCategories) && length(selectedCategories) ? selectedCategories : configCategories.sortedValues) : configCategories.step/length(configLegend.sortedValues)", | |
| "as": "level1Height" | |
| }, | |
| { | |
| "type": "formula", | |
| "expr": "(datum.currentLevel === 'Category' ? datum['Category Member Count'] : datum['SubCategory Member Count'])*datum.level1Height", | |
| "as": "level0Height" | |
| }, | |
| { | |
| "type": "formula", | |
| "expr": "datum.level0Height*datum['level0Sort']", | |
| "as": "level0Y" | |
| }, | |
| { | |
| "type": "formula", | |
| "expr": "datum.level0Y+datum.level1Height*datum['level1Sort']", | |
| "as": "level1Y" | |
| }, | |
| { | |
| "type": "formula", | |
| "expr": "datum.level0Height/2+datum.level0Y", | |
| "as": "level0YMid" | |
| }, | |
| { | |
| "type": "formula", | |
| "expr": "datum.level1Height/2+datum.level1Y", | |
| "as": "level1YMid" | |
| }, | |
| { | |
| "type": "joinaggregate", | |
| "fields": ["Value"], | |
| "ops": ["sum"], | |
| "groupby": ["Category"], | |
| "as": ["level0TotalValue"] | |
| }, | |
| { | |
| "type": "project", | |
| "fields": [ | |
| "level0", | |
| "level0Sort", | |
| "level0Y", | |
| "level0YMid", | |
| "level0TotalValue", | |
| "level1", | |
| "level1Sort", | |
| "level1Y", | |
| "level1YMid" | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment