Skip to content

Instantly share code, notes, and snippets.

@marcprux
Last active December 17, 2015 23:49
Show Gist options
  • Save marcprux/5691940 to your computer and use it in GitHub Desktop.
Save marcprux/5691940 to your computer and use it in GitHub Desktop.
Extrema-highlighed animated bars in Vega+D3
<!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[
Number.prototype.formatMoney = function(c, d, t){
var n = this,
c = isNaN(c = Math.abs(c)) ? 2 : c,
d = d == undefined ? "." : d,
t = t == undefined ? "," : t,
s = n < 0 ? "-" : "",
i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};
function random_value() {
return Math.floor((Math.random()*100)*(Math.random()*100)*(Math.random()<=.1 ? -1 : 1));
}
function randomized_data() {
var a = [];
for (var x = 1; x <= 20; x++)
a.push({"x": x, "y": random_value() });
return a;
}
var viz_vega_spec = {
"width": 300,
"height": 20,
"padding": {"top": 10, "left": 50, "bottom": 30, "right": 10},
"data": [
{
"name": "table",
"values": randomized_data()
},
{
"name": "tableStats",
"source": "table",
"transform": [
{"type": "stats", "value": "data.y"}
]
},
{
"name": "tableWithStats",
"source": "table",
"transform": [
{
"type": "zip",
"with": "tableStats",
"as": "stats"
},
{
"type": "formula",
"field": "isExtremum",
"expr": "(d.data.y >= d.stats.max) || (d.data.y <= d.stats.min)"
},
{
"type": "formula",
"field": "formattedYValue",
"expr": "('$' + ((d.data.y).toFixed(2)))"
},
{
"type": "formula",
"field": "textVerticalOffset",
"expr": "d.data.y > 0 ? 15 : d.data.y < 0 ? -15 : 0"
}
]
}
],
"scales": [
{
"name": "x",
"type": "ordinal",
"range": "width",
"domain": {"data": "table", "field": "data.x"}
},
{
"name": "y",
"range": "height",
"nice": true,
"domain": {"data": "table", "field": "data.y"}
},
{
"name": "color",
"domain": {"data": "tableWithStats", "field": "isExtremum"},
"range": ["steelblue","forestgreen"]
}
],
"axes": [
{"type": "x", "scale": "x"},
{"type": "y", "scale": "y"}
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"properties": {
"update": {
"x": {"scale": "x", "field": "data.x"},
"width": {"scale": "x", "band": true, "offset": -1},
"y": {"scale": "y", "field": "data.y"},
"y2": {"scale": "y", "value": 0},
"fill": {"scale": "color", "field": "isExtremum"},
"stroke": {"value": "black"},
"strokeWidth": {"value": "0"}
},
"hover": {
"stroke": {"value": "black"},
"strokeWidth": {"value": "1"}
}
}
},
{
"type": "text",
"from": {"data": "table"},
"properties": {
"update": {
"text": {"field": "formattedYValue"},
"font": {"value": "Helvetica Neue"},
"fontWeight": {"value": "bold"},
"x": {"scale": "x", "field": "data.x", "offset": 2 },
"y": {"scale": "y", "field": "data.y"},
"fill": {"value": "black"},
"align": {"value": "left"},
"baseline": {"value": "middle"},
"dy": {"field": "textVerticalOffset"}
}
}
}
]
};
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();
}
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;
var viz_interval = setInterval(function(){
viz_view.data({table:randomized_data()}).update({duration:1000 });
},1000);
//]]>
</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