| 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> |
Hi, @domoritz! Really liked your tutorial. It helped me get the grasp of a lot of concepts even being that simple.
When I was toying with the spec I noticed one issue:
In the
"update"set of the text, there's this condition:The issue is that
datum === tooltipis nevertrue. So after a bunch of searching I changed the condition to this...And it worked!
I did not fully understand what input datum is referencing. I started to think it was the text mark itself, but I'm new to Vega. So... I don't know yet, but I would like to :)
Sorry if this is the wrong place to report this issue, I was not sure if it would be better to report it here or in the Vega repo.