Built with blockbuilder.org
forked from anonymous's block: try a vega block 1
Built with blockbuilder.org
forked from anonymous's block: try a vega block 1
| [ | |
| {"x": 1, "y": 28}, {"x": 2, "y": 55}, | |
| {"x": 3, "y": 43}, {"x": 4, "y": 91}, | |
| {"x": 5, "y": 81}, {"x": 6, "y": 53}, | |
| {"x": 7, "y": 19}, {"x": 8, "y": 87}, | |
| {"x": 9, "y": 52}, {"x": 10, "y": 48}, | |
| {"x": 11, "y": 24}, {"x": 12, "y": 49}, | |
| {"x": 13, "y": 87}, {"x": 14, "y": 66}, | |
| {"x": 15, "y": 17}, {"x": 16, "y": 27}, | |
| {"x": 17, "y": 68}, {"x": 18, "y": 16}, | |
| {"x": 19, "y": 49}, {"x": 20, "y": 15} | |
| ] |
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://vega.github.io/vega-editor/vendor/d3.min.js"></script> | |
| <script src="https://vega.github.io/vega-editor/vendor/d3.geo.projection.min.js"></script> | |
| <script src="https://vega.github.io/vega-editor/vendor/topojson.js"></script> | |
| <script src="https://vega.github.io/vega-editor/vendor/d3.layout.cloud.js"></script> | |
| <script src="http://vega.github.io/vega/vega.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| svg { width:100%; height: 100% } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="vis"></div> | |
| <script> | |
| function parse(spec){ | |
| vg.parse.spec( spec, function(error, chart) { | |
| chart({el:"#vis"}).update(); | |
| }) | |
| } | |
| parse("spec.json"); | |
| </script> | |
| </body> |
| { | |
| "width": 400, | |
| "height": 200, | |
| "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10}, | |
| "data": [ | |
| { | |
| "name": "table", | |
| "url": "data.json" | |
| } | |
| ], | |
| "scales": [ | |
| { | |
| "name": "x", | |
| "type": "ordinal", | |
| "range": "width", | |
| "domain": {"data": "table", "field": "x"} | |
| }, | |
| { | |
| "name": "y", | |
| "type": "linear", | |
| "range": "height", | |
| "domain": {"data": "table", "field": "y"}, | |
| "nice": true | |
| } | |
| ], | |
| "axes": [ | |
| {"type": "x", "scale": "x"}, | |
| {"type": "y", "scale": "y"} | |
| ], | |
| "marks": [ | |
| { | |
| "type": "rect", | |
| "from": {"data": "table"}, | |
| "properties": { | |
| "enter": { | |
| "x": {"scale": "x", "field": "x"}, | |
| "width": {"scale": "x", "band": true, "offset": -1}, | |
| "y": {"scale": "y", "field": "y"}, | |
| "y2": {"scale": "y", "value": 0} | |
| }, | |
| "update": { | |
| "fill": {"value": "steelblue"} | |
| }, | |
| "hover": { | |
| "fill": {"value": "red"} | |
| } | |
| } | |
| } | |
| ] | |
| } |