Skip to content

Instantly share code, notes, and snippets.

@espinielli
Last active Mar 4, 2016
Embed
What would you like to do?
IFR traffic with Vega 2.0

Simple line plot for IFR traffic using Vega 2.0.

year daily
2008 26.541
2009 24.748
2010 24.803
2011 25.483
2012 24.729
2013 24.413
2014 24.879
<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>
{
"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