Skip to content

Instantly share code, notes, and snippets.

@willium

willium/index.html

Created December 26, 2015 00:12
Show Gist options
  • Save willium/3e09be5fbf8bbfbc972e to your computer and use it in GitHub Desktop.
Save willium/3e09be5fbf8bbfbc972e to your computer and use it in GitHub Desktop.
Download ZIP
labels VL, will/bar-lebel
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="../../d3/d3.min.js"></script>
<script src="../../vega/vega.js"></script>
<script src="../../vega-lite/vega-lite.js"></script>
<div id="vis"></div>
<script type="text/javascript">
var vertical = {
"data": {
"values": [
{"category":"A", "amount":28},
{"category":"B", "amount":55},
{"category":"C", "amount":43},
{"category":"D", "amount":91},
{"category":"E", "amount":81},
{"category":"F", "amount":53},
{"category":"G", "amount":19},
{"category":"H", "amount":87},
{"category":"I", "amount":52}
]},
"mark": "bar",
"encoding": {
"x": {"type": "quantitative", "field": "amount"},
"y": {"type": "ordinal", "field": "category"},
"label": {
"field": "amount",
"type": "quantitative"
}
}
};
var horizontal = {
"data": {
"values": [
{"category":"A", "amount":28},
{"category":"B", "amount":55},
{"category":"C", "amount":43},
{"category":"D", "amount":91},
{"category":"E", "amount":81},
{"category":"F", "amount":53},
{"category":"G", "amount":19},
{"category":"H", "amount":87},
{"category":"I", "amount":52}
]},
"mark": "bar",
"encoding": {
"x": {"type": "ordinal", "field": "category"},
"y": {"type": "quantitative", "field": "amount"},
"label": {
"field": "amount",
"type": "quantitative"
}
}
};
vlSpec = vertical;
// vlSpec = horizontal;
var vgSpec = vl.compile(vlSpec).spec;
console.log(vgSpec);
vg.parse.spec(vgSpec, function(chart) {
chart({el:"#vis"}).update();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment