Skip to content

Instantly share code, notes, and snippets.

@skokenes

skokenes/grouped_bar.json

Created November 27, 2015 16:11
Show Gist options
  • Save skokenes/9aeb3d550b525846af54 to your computer and use it in GitHub Desktop.
Save skokenes/9aeb3d550b525846af54 to your computer and use it in GitHub Desktop.
Download ZIP
Vega Grouped Bar - Streaming Data
Raw
grouped_bar.json
{
"width": 300,
"height": 240,
"data": [{
"name": "table",
"values": [{
"category": "A",
"position": "a",
"value": 0.1
}, {
"category": "A",
"position": "b",
"value": 0.6
}, {
"category": "A",
"position": "c",
"value": 0.9
}, {
"category": "A",
"position": "d",
"value": 0.4
}, {
"category": "B",
"position": "a",
"value": 0.7
}, {
"category": "B",
"position": "b",
"value": 0.2
}, {
"category": "B",
"position": "c",
"value": 1.1
}, {
"category": "B",
"position": "d",
"value": 0.8
}, {
"category": "C",
"position": "a",
"value": 0.6
}, {
"category": "C",
"position": "b",
"value": 0.1
}, {
"category": "C",
"position": "c",
"value": 0.2
}, {
"category": "C",
"position": "d",
"value": 0.7
}]
}],
"scales": [{
"name": "cat",
"type": "ordinal",
"domain": {
"data": "table",
"field": "category"
},
"range": "height",
"padding": 0.2
}, {
"name": "val",
"type": "linear",
"domain": {
"data": "table",
"field": "value"
},
"range": "width",
"round": true,
"nice": true
}, {
"name": "color",
"type": "ordinal",
"domain": {
"data": "table",
"field": "position"
},
"range": "category20"
}],
"axes": [{
"type": "y",
"scale": "cat",
"tickSize": 0,
"tickPadding": 8
}, {
"type": "x",
"scale": "val"
}],
"marks": [{
"type": "group",
"from": {
"data": "table",
"transform": [{
"type": "facet",
"groupby": ["category"]
}]
},
"properties": {
"enter": {
"y": {
"scale": "cat",
"field": "key"
},
"height": {
"scale": "cat",
"band": true
}
},
"update": {
"y": {
"scale": "cat",
"field": "key"
},
"height": {
"scale": "cat",
"band": true
}
}
},
"scales": [{
"name": "pos",
"type": "ordinal",
"range": "height",
"domain": {
"field": "position"
}
}],
"marks": [{
"name": "bars",
"type": "rect",
"properties": {
"enter": {
"y": {
"scale": "pos",
"field": "position"
},
"height": {
"scale": "pos",
"band": true
},
"x": {
"scale": "val",
"field": "value"
},
"x2": {
"scale": "val",
"value": 0
},
"fill": {
"scale": "color",
"field": "position"
}
}
}
}, {
"type": "text",
"from": {
"mark": "bars"
},
"properties": {
"enter": {
"x": {
"field": "x2",
"offset": -5
},
"y": {
"field": "y"
},
"dy": {
"field": "height",
"mult": 0.5
},
"fill": {
"value": "white"
},
"align": {
"value": "right"
},
"baseline": {
"value": "middle"
},
"text": {
"field": "datum.position"
}
}
}
}]
}]
}
Raw
index.html
<html>
<head>
<title>Vega Scaffold</title>
<script src="http://vega.github.io/vega-editor/vendor/d3.min.js"></script>
<script src="http://vega.github.io/vega-editor/vendor/d3.geo.projection.min.js"></script>
<script src="http://vega.github.io/vega-editor/vendor/topojson.js"></script>
<script src="http://vega.github.io/vega/vega.min.js"></script>
</head>
<body>
<div id="vis"></div>
</body>
<script type="text/javascript">
vg.parse.spec("grouped_bar.json", function(chart) {
view = chart({el:"#vis"});
view.update();
var tableData = [
{"category":"A", "position":"a", "value":0.1},
{"category":"A", "position":"b", "value":0.6},
{"category":"A", "position":"c", "value":0.9},
{"category":"A", "position":"d", "value":0.4},
{"category":"B", "position":"a", "value":0.7},
{"category":"B", "position":"b", "value":0.2},
{"category":"B", "position":"c", "value":1.1},
{"category":"B", "position":"d", "value":0.8},
{"category":"C", "position":"a", "value":0.6},
{"category":"C", "position":"b", "value":0.1},
{"category":"C", "position":"c", "value":0.2},
{"category":"C", "position":"d", "value":0.7}
];
view.data('table')
.remove(function(d) {return true;});
view.update();
view.data('table')
.insert(tableData);
view.update();
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment