Simple line plot for IFR traffic using Vega 2.0.
| <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