| 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.
forked from domoritz's block: Vega Bl.ocks example
| { | |
| "$schema": "https://vega.github.io/schema/vega/v3.json", | |
| "description": "A scatterplot showing horsepower and miles per gallons for various cars.", | |
| "autosize": "pad", | |
| "padding": 5, | |
| "width": 200, | |
| "height": 200, | |
| "style": "cell", | |
| "data": [ | |
| { | |
| "name": "source_0", | |
| "url": "https://vega.github.io/editor/data/cars.json", | |
| "format": { | |
| "type": "json", | |
| "parse": {"Horsepower": "number", "Miles_per_Gallon": "number"} | |
| }, | |
| "transform": [ | |
| { | |
| "type": "filter", | |
| "expr": "datum[\"Horsepower\"] !== null && !isNaN(datum[\"Horsepower\"]) && datum[\"Miles_per_Gallon\"] !== null && !isNaN(datum[\"Miles_per_Gallon\"])" | |
| } | |
| ] | |
| } | |
| ], | |
| "marks": [ | |
| { | |
| "name": "marks", | |
| "type": "symbol", | |
| "style": ["point"], | |
| "from": {"data": "source_0"}, | |
| "encode": { | |
| "update": { | |
| "opacity": {"value": 0.7}, | |
| "fill": {"value": "transparent"}, | |
| "stroke": {"value": "#4c78a8"}, | |
| "x": {"scale": "x", "field": "Horsepower"}, | |
| "y": {"scale": "y", "field": "Miles_per_Gallon"} | |
| } | |
| } | |
| } | |
| ], | |
| "scales": [ | |
| { | |
| "name": "x", | |
| "type": "linear", | |
| "domain": {"data": "source_0", "field": "Horsepower"}, | |
| "range": [0, {"signal": "width"}], | |
| "nice": true, | |
| "zero": true | |
| }, | |
| { | |
| "name": "y", | |
| "type": "linear", | |
| "domain": {"data": "source_0", "field": "Miles_per_Gallon"}, | |
| "range": [{"signal": "height"}, 0], | |
| "nice": true, | |
| "zero": true | |
| } | |
| ], | |
| "axes": [ | |
| { | |
| "scale": "x", | |
| "orient": "bottom", | |
| "grid": false, | |
| "title": "Horsepower", | |
| "labelFlush": true, | |
| "labelOverlap": true, | |
| "tickCount": {"signal": "ceil(width/40)"}, | |
| "zindex": 1 | |
| }, | |
| { | |
| "scale": "x", | |
| "orient": "bottom", | |
| "grid": true, | |
| "tickCount": {"signal": "ceil(width/40)"}, | |
| "gridScale": "y", | |
| "domain": false, | |
| "labels": false, | |
| "maxExtent": 0, | |
| "minExtent": 0, | |
| "ticks": false, | |
| "zindex": 0 | |
| }, | |
| { | |
| "scale": "y", | |
| "orient": "left", | |
| "grid": false, | |
| "title": "Miles_per_Gallon", | |
| "labelOverlap": true, | |
| "tickCount": {"signal": "ceil(height/40)"}, | |
| "zindex": 1 | |
| }, | |
| { | |
| "scale": "y", | |
| "orient": "left", | |
| "grid": true, | |
| "tickCount": {"signal": "ceil(height/40)"}, | |
| "gridScale": "x", | |
| "domain": false, | |
| "labels": false, | |
| "maxExtent": 0, | |
| "minExtent": 0, | |
| "ticks": false, | |
| "zindex": 0 | |
| } | |
| ], | |
| "config": {"axisY": {"minExtent": 30}} | |
| } |
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdn.jsdelivr.net/npm/vega@3/build/vega.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script> | |
| </head> | |
| <body> | |
| <div id="vis"></div> | |
| <script> | |
| const spec = "bar.vg.json"; | |
| vegaEmbed('#vis', spec, {defaultStyle: true}); | |
| </script> | |
| </body> |