Skip to content

Instantly share code, notes, and snippets.

@marcprux
Last active December 16, 2015 15:29
Show Gist options
  • Save marcprux/5456100 to your computer and use it in GitHub Desktop.
Save marcprux/5456100 to your computer and use it in GitHub Desktop.
<html>
<head>
<title>Vega Object Constancy Issue Demo</title>
<script src="http://trifacta.github.com/vega/d3.v3.min.js"></script>
<script src="http://trifacta.github.com/vega/vega.js"></script>
</head>
<body>
<div id="vis"></div>
</body>
<script type="text/javascript">
var viz = null;
function parse(spec) {
vg.parse.spec(spec, function(chart) {
viz = chart({el:"#vis"});
viz.update();
});
}
var data_values = [
{"x": "A", "y": 28, "c":0}, {"x": "A", "y": 55, "c":1},
{"x": "B", "y": 43, "c":0}, {"x": "B", "y": 91, "c":1},
{"x": "C", "y": 81, "c":0}, {"x": "C", "y": 53, "c":1},
{"x": "D", "y": 19, "c":0}, {"x": "D", "y": 87, "c":1},
{"x": "E", "y": 52, "c":0}, {"x": "E", "y": 48, "c":1},
{"x": "F", "y": 24, "c":0}, {"x": "F", "y": 49, "c":1},
{"x": "G", "y": 87, "c":0}, {"x": "G", "y": 66, "c":1},
{"x": "H", "y": 17, "c":0}, {"x": "H", "y": 27, "c":1},
{"x": "I", "y": 68, "c":0}, {"x": "I", "y": 16, "c":1},
{"x": "J", "y": 49, "c":0}, {"x": "J", "y": 15, "c":1}
];
var spec = {
"width": 400,
"height": 400,
"padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
"data": [
{
"name": "table",
"values": data_values
}
],
"scales": [
{
"name": "g",
"type": "ordinal",
"range": "height",
"domain": {"data": "table", "field": "data.c"}
},
{
"name": "x",
"type": "ordinal",
"range": "width",
"domain": {"data": "table", "field": "data.x"}
},
{
"name": "c",
"type": "ordinal",
"domain": [0, 1],
"range": ["steelblue","green"],
}
],
"axes": [
{"type": "x", "scale": "x"},
],
"marks": [
{
"type": "group",
"from": {
"data": "table",
"transform": [
{"type": "facet", "keys": ["data.c"]}
]
},
"properties": {
"update": {
"x": {"value": 0},
"y": {"scale": "g", "field": "index"},
"width": {"value": 400},
"height": {"value": 200},
"stroke": {"value": "#ccc"},
"strokeWidth": {"value": 1}
}
},
"scales": [
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"domain": {"data": "table", "field": "data.y"}
}
],
"axes": [
{"type": "y", "scale": "y"}
],
"marks": [
{
"type": "rect",
"key": "data.x",
"properties": {
"update": {
"fill": {"scale": "c", "field": "data.c"},
"opacity":{"value":0.8},
"x": {"scale": "x", "field": "data.x"},
"width": {"scale": "x", "band": true, "offset": -1},
"y": {"scale": "y", "field": "data.y"},
"y2": {"scale": "y", "value": 0}
},
}
}
]
}
]
};
parse(spec);
var sort_directions = { };
function toggle_sort(field) {
var ascending = sort_directions[field] ? true : false;
sort_directions[field] = !ascending;
data_values.sort(function(a,b) {
if (a[field] < b[field]) return ascending ? 1 : -1;
if (a[field] > b[field]) return ascending ? -1 : 1;
return 0;
});
viz.data({ table: data_values }).update({ duration: 1000 });
}
</script>
<input type="button" value="Toggle Sort X" onclick="javascript:toggle_sort('x')" />
<input type="button" value="Toggle Sort Y" onclick="javascript:toggle_sort('y')" />
<input type="button" value="Toggle Sort C" onclick="javascript:toggle_sort('c')" />
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment