Skip to content

Instantly share code, notes, and snippets.

@espinielli

espinielli/README.md

Last active March 4, 2016 10:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save espinielli/87047968c67c02dbcb8d to your computer and use it in GitHub Desktop.
Save espinielli/87047968c67c02dbcb8d to your computer and use it in GitHub Desktop.
Download ZIP
IFR traffic with Vega 2.0
Raw
README.md

Simple line plot for IFR traffic using Vega 2.0.

Raw
ifr.csv
year daily
2008 26.541
2009 24.748
2010 24.803
2011 25.483
2012 24.729
2013 24.413
2014 24.879
Raw
index.html
<html>
<head>
<title>IFR Traffic</title>
<script src="https://vega.github.io/vega-editor/vendor/d3.min.js"></script>
<script src="https://vega.github.io/vega-editor/vendor/vega.min.js"></script>
</head>
<body>
<div id="vis"></div>
</body>
<script type="text/javascript">
// parse a spec and create a visualization view
function parse(spec) {
vg.parse.spec(spec, function(chart) { chart({el:"#vis"}).update(); });
}
parse("spec.json");
</script>
</html>
Raw
spec.json
{
"width": 400,
"height": 120,
"data": [
{
"name": "table",
"url": "ifr.csv",
"format": {"type": "csv"}
}
],
"signals": [
{
"name": "tooltip",
"init": {},
"streams": [
{"type": "symbol:mouseover", "expr": "datum"},
{"type": "symbol:mouseout", "expr": "{}"}
]
}
],
"predicates": [
{
"name": "tooltip", "type": "==",
"operands": [{"signal": "tooltip._id"}, {"arg": "id"}]
}
],
"scales": [
{"name": "time", "type": "linear", "nice": true, "zero": false, "round": true,
"range": "width", "domain": {"data":"table", "field":"year"}},
{"name": "traffic", "nice": true, "zero": false, "round": true,
"range": "height", "domain": {"data":"table", "field":"daily"}},
{
"name": "align",
"type": "ordinal",
"domain": ["left", "right", "top", "bottom"],
"range": ["right", "left", "center", "center"]
},
{
"name": "base",
"type": "ordinal",
"domain": ["left", "right", "top", "bottom"],
"range": ["middle", "middle", "bottom", "top"]
},
{
"name": "dx",
"type": "ordinal",
"domain": ["left", "right", "top", "bottom"],
"range": [-7, 6, 0, 50]
},
{
"name": "dy",
"type": "ordinal",
"domain": ["left", "right", "top", "bottom"],
"range": [1, 1, -5, 6]
}
],
"axes": [
{"type": "x", "scale": "time", "title": "Year", "titleOffset": 35, "format": "4d", "ticks": 7},
{"type": "y", "scale": "traffic", "title": "Daily (10k)", "titleOffset": 40, "grid": true, "ticks": 7}
],
"marks": [
{
"type": "line",
"from": {"data": "table"},
"properties": {
"enter": {
"interpolate": {"value": "monotone"},
"x": {"scale": "time", "field": "year"},
"y": {"scale": "traffic", "field": "daily"},
"stroke": {"value": "#000"},
"strokeWidth": {"value": 3}
}
}
},
{
"type": "symbol",
"from": {"data": "table"},
"properties": {
"enter": {
"x": {"scale": "time", "field": "year"},
"y": {"scale": "traffic", "field": "daily"},
"fill": {"value": "#fff"},
"stroke": {"value": "#000"},
"strokeWidth": {"value": 1},
"size": {"value": 49}
}
}
},
{
"type": "text",
"properties": {
"enter": {
"align": {"value": "center"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "time", "signal": "tooltip.year"},
"dx": {"scale": "dx", "field": "right"},
"y": {"scale": "traffic", "signal": "tooltip.daily", "offset": -12},
"dy": {"scale": "dy", "field": "right"},
"text": {"signal": "tooltip.daily"},
"fillOpacity": {
"rule": [
{
"predicate": {
"name": "tooltip",
"id": {"value": null}
},
"value": 0
},
{"value": 1}
]
}
}
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment