User:SBassett (WMF)/sandbox/graphs

Vega 5 Bar Chart { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A basic bar chart example, with value labels shown upon mouse hover.", "width": 400, "height": 200, "padding": 5,

"data": [ {     "name": "table", "values": [ {"category": "A", "amount": 28}, {"category": "B", "amount": 55}, {"category": "C", "amount": 43}, {"category": "D", "amount": 91}, {"category": "E", "amount": 81}, {"category": "F", "amount": 53}, {"category": "G", "amount": 19}, {"category": "H", "amount": 87} ]   }  ],

"signals": [ {     "name": "tooltip", "value": {}, "on": [ {"events": "rect:mouseover", "update": "datum"}, {"events": "rect:mouseout", "update": "{}"} ]   }  ],

"scales": [ {     "name": "xscale", "type": "band", "domain": {"data": "table", "field": "category"}, "range": "width", "padding": 0.05, "round": true },   {      "name": "yscale", "domain": {"data": "table", "field": "amount"}, "nice": true, "range": "height" } ],

"axes": [ { "orient": "bottom", "scale": "xscale" }, { "orient": "left", "scale": "yscale" } ],

"marks": [ {     "type": "rect", "from": {"data":"table"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "category"}, "width": {"scale": "xscale", "band": 1}, "y": {"scale": "yscale", "field": "amount"}, "y2": {"scale": "yscale", "value": 0} },       "update": { "fill": {"value": "steelblue"} },       "hover": { "fill": {"value": "red"} }     }    },    {      "type": "text", "encode": { "enter": { "align": {"value": "center"}, "baseline": {"value": "bottom"}, "fill": {"value": "#333"} },       "update": { "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5}, "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2}, "text": {"signal": "tooltip.amount"}, "fillOpacity": [ {"test": "datum === tooltip", "value": 0}, {"value": 1} ]       }      }    }  ] }

Vega 5 Grouped Bar Chart { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A basic grouped bar chart example.", "width": 300, "height": 240, "padding": 5,

"data": [ {     "name": "table", "values": [ {"category":"A", "position":0, "value":0.1}, {"category":"A", "position":1, "value":0.6}, {"category":"A", "position":2, "value":0.9}, {"category":"A", "position":3, "value":0.4}, {"category":"B", "position":0, "value":0.7}, {"category":"B", "position":1, "value":0.2}, {"category":"B", "position":2, "value":1.1}, {"category":"B", "position":3, "value":0.8}, {"category":"C", "position":0, "value":0.6}, {"category":"C", "position":1, "value":0.1}, {"category":"C", "position":2, "value":0.2}, {"category":"C", "position":3, "value":0.7} ]   }  ],

"scales": [ {     "name": "yscale", "type": "band", "domain": {"data": "table", "field": "category"}, "range": "height", "padding": 0.2 },   {      "name": "xscale", "type": "linear", "domain": {"data": "table", "field": "value"}, "range": "width", "round": true, "zero": true, "nice": true },   {      "name": "color", "type": "ordinal", "domain": {"data": "table", "field": "position"}, "range": {"scheme": "category20"} } ],

"axes": [ {"orient": "left", "scale": "yscale", "tickSize": 0, "labelPadding": 4, "zindex": 1}, {"orient": "bottom", "scale": "xscale"} ],

"marks": [ {     "type": "group",

"from": { "facet": { "data": "table", "name": "facet", "groupby": "category" }     },

"encode": { "enter": { "y": {"scale": "yscale", "field": "category"} }     },

"signals": [ {"name": "height", "update": "bandwidth('yscale')"} ],

"scales": [ {         "name": "pos", "type": "band", "range": "height", "domain": {"data": "facet", "field": "position"} }     ],

"marks": [ {         "name": "bars", "from": {"data": "facet"}, "type": "rect", "encode": { "enter": { "y": {"scale": "pos", "field": "position"}, "height": {"scale": "pos", "band": 1}, "x": {"scale": "xscale", "field": "value"}, "x2": {"scale": "xscale", "value": 0}, "fill": {"scale": "color", "field": "position"} }         }        },        {          "type": "text", "from": {"data": "bars"}, "encode": { "enter": { "x": {"field": "x2", "offset": -5}, "y": {"field": "y", "offset": {"field": "height", "mult": 0.5}}, "fill": [ {"test": "contrast('white', datum.fill) > contrast('black', datum.fill)", "value": "white"}, {"value": "black"} ],             "align": {"value": "right"}, "baseline": {"value": "middle"}, "text": {"field": "datum.value"} }         }        }      ]    }  ] }