The implementation of the (vertical) bar plot as from the Vega tutorial.
| <html> | |
| <head> | |
| <title>Vega Experiment</title> | |
| <script src="https://vega.github.io/vega-editor/vendor/d3.min.js"></script> | |
| <script src="https://vega.github.io/vega-editor/vendor/vega.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="vis"></div> | |
| </body> | |
| <script type="text/javascript"> | |
| // parse a spec and create a visualization view | |
| function parse(spec) { | |
| vg.parse.spec(spec, function(chart) { chart({el:"#vis"}).update(); }); | |
| } | |
| parse("spec.json"); | |
| </script> | |
| </html> |
| { | |
| "width": 200, | |
| "height": 400, | |
| "padding": {"top": 10, "left": 30, "bottom": 20, "right": 10}, | |
| "data": [ | |
| { | |
| "name": "table", | |
| "url": "bar.csv", | |
| "format": {"type": "csv"} | |
| } | |
| ], | |
| "signals": [ | |
| { | |
| "name": "tooltip", | |
| "init": {}, | |
| "streams": [ | |
| {"type": "rect:mouseover", "expr": "datum"}, | |
| {"type": "rect:mouseout", "expr": "{}"} | |
| ] | |
| } | |
| ], | |
| "predicates": [ | |
| { | |
| "name": "tooltip", "type": "==", | |
| "operands": [{"signal": "tooltip._id"}, {"arg": "id"}] | |
| } | |
| ], | |
| "scales": [ | |
| {"name": "categories", "type": "ordinal", "range": "width", "domain": {"data":"table", "field":"cat"}}, | |
| {"name": "results", "range": "height", "nice": true, "domain": {"data":"table", "field":"amt"}} | |
| ], | |
| "axes": [ | |
| {"type": "x", "scale": "categories"}, | |
| {"type": "y", "scale": "results"} | |
| ], | |
| "marks": [ | |
| { | |
| "type": "rect", | |
| "from": {"data":"table"}, | |
| "properties": { | |
| "enter": { | |
| "x": {"scale":"categories", "field":"cat"}, | |
| "width": {"scale":"categories", "band":true, "offset":-1}, | |
| "y": {"scale":"results", "field":"amt"}, | |
| "y2": {"scale":"results", "value":0} | |
| }, | |
| "update": { "fill": {"value":"steelblue"} }, | |
| "hover": { "fill": {"value":"red"} } | |
| } | |
| }, | |
| { | |
| "type": "text", | |
| "properties": { | |
| "enter": { | |
| "align": {"value": "center"}, | |
| "fill": {"value": "#333"} | |
| }, | |
| "update": { | |
| "x": {"scale": "categories", "signal": "tooltip.cat"}, | |
| "dx": {"scale": "categories", "band": true, "mult": 0.5}, | |
| "y": {"scale": "results", "signal": "tooltip.amt", "offset": -5}, | |
| "text": {"signal": "tooltip.amt"}, | |
| "fillOpacity": { | |
| "rule": [ | |
| { | |
| "predicate": { | |
| "name": "tooltip", | |
| "id": {"value": null} | |
| }, | |
| "value": 0 | |
| }, | |
| {"value": 1} | |
| ] | |
| } | |
| } | |
| } | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment