Skip to content

Instantly share code, notes, and snippets.

@marcprux

marcprux/index.html

Created April 16, 2013 22:55
Show Gist options
  • Save marcprux/5400368 to your computer and use it in GitHub Desktop.
Save marcprux/5400368 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Visualization</title>
<meta
charset="UTF-8" />
<meta
http-equiv="Content-type"
content="text/html;charset=UTF-8" />
<script
id="viz-script-d3"
type="text/javascript"
src="http://d3js.org/d3.v3.min.js">
</script>
<script
id="viz-script-vega"
type="text/javascript"
src="http://trifacta.github.io/vega/vega.min.js">
</script>
<script
id="viz-script-spec"
type="text/javascript">
//<![CDATA[
var viz_vega_spec = {"padding":{"top":10,"left":30,"bottom":30,"right":10},
"data":[
{"name":"table","values":[{"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}]}],
"scales":[{"name":"x","type":"linear","range":"width","zero":false,"domain":{"data":"table","field":"data.x"}}, {"name":"y","type":"linear","range":"height","nice":true,"domain":{"data":"table","field":"data.y"}}],
"axes":[{"type":"x","scale":"x","ticks":20},{"type":"y","scale":"y"}],
"marks":[{"type":"area","from":{"data":"table"},
"properties":{
"enter":{
"interpolate":{"value":"monotone"},
"x":{"scale":"x","field":"data.x"},
"y":{"scale":"y","field":"data.y"},
"y2":{"scale":"y","value":0},
"fill":{"value":"steelblue"},
},
"update":{
"fillOpacity":{"value":1},
},
"hover":{
"fillOpacity":{"value":0.5}}
}}]};
viz_render = function() {
viz_view.width(window.innerWidth-viz_vega_spec.padding.left-viz_vega_spec.padding.right).height(window.innerHeight-viz_vega_spec.padding.top - viz_vega_spec.padding.bottom).renderer('svg').update('enter').update();
}
vg.parse.spec(viz_vega_spec, function(chart) {
self.viz_chart = chart;
self.viz_view = viz_chart({el:'#viz-visualization'});
viz_render();
});
window.onresize = viz_render;
//]]>
</script>
<style
id="viz-styles"
type="text/css">
</style>
</head>
<body
style="padding:0; margin:0; overflow:hidden;">
<div
id="viz-visualization">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment