| license: bsd-3-clause |
You can go to the blockbuilder and to fork this block and create your own visualizations. Check out the Vega website for more information, tutorials, and documentation. This example uses Vega-Embed. Happy hacking!
Also, check out the Vega-Lite version.
| { | |
| "$schema": "https://vega.github.io/schema/vega/v4.0.json", | |
| "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" | |
| }, | |
| { | |
| "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", "offset": 1}, | |
| "width": {"scale": "xscale", "band": 1, "offset": -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} | |
| ] | |
| } | |
| } | |
| } | |
| ] | |
| } |
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdn.jsdelivr.net/npm/vega@5"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vega-embed@5"></script> | |
| </head> | |
| <body> | |
| <div id="vis"></div> | |
| <script> | |
| const spec = "bar.vg.json"; | |
| vegaEmbed("#vis", spec) | |
| // result.view provides access to the Vega View API | |
| .then(result => console.log(result)) | |
| .catch(console.warn); | |
| </script> | |
| </body> |
