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"} | |
} | |
} | |
} | |
] | |
} |