Skip to content

Instantly share code, notes, and snippets.

@adg29
Last active August 29, 2015 14:22
Show Gist options
  • Save adg29/bae10eb34da6e7c78d8c to your computer and use it in GitHub Desktop.
Save adg29/bae10eb34da6e7c78d8c to your computer and use it in GitHub Desktop.
Vega Scatter Plot of Nuclear Energy Plants Per Town Per State
<!DOCTYPE html>
<meta charset="utf-8">
<link href="http://trifacta.github.com/vega/css/vega.css" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://trifacta.github.com/vega/vega.js"></script>
<script>
function parse(spec) {
vg.parse.spec(spec, function(chart) {
var view = chart({ el:"#vis" });
view.viewport(null)
.renderer("svg")
.update();
});
}
parse({
"width": 720,
"height": 384,
"padding": "auto",
"data": [
{
"name": "raw",
"format": {"type": "csv","parse": {"count": "number"}},
"url": "https://s3.amazonaws.com/t-brand-studio/data/nuclear/14/nuclear-plant-data.csv",
"transform": []
},
{
"name": "table",
"source": "raw",
"transform": [
{
"type": "aggregate",
"groupby": ["data.town","data.state"],
"fields": [{"op": "count","field": "*"}]
}
]
}
],
"marks": [
{
"_name": "cell",
"type": "group",
"properties": {"enter": {"width": {"value": 720},"height": {"value": 384}}},
"scales": [
{
"name": "x",
"type": "ordinal",
"domain": {"data": "table","field": "data.town"},
"sort": true,
"bandWidth": 12,
"round": true,
"nice": true,
"points": true,
"padding": 1
},
{
"name": "y",
"type": "ordinal",
"domain": {"data": "table","field": "data.state"},
"sort": true,
"bandWidth": 12,
"round": true,
"nice": true,
"points": true,
"padding": 1
},
{
"name": "size",
"type": "linear",
"domain": {"data": "table","field": "data.count"},
"range": [10,320],
"round": true,
"zero": false
}
],
"axes": [
{
"type": "x",
"scale": "x",
"grid": true,
"layer": "back",
"properties": {
"grid": {"stroke": {"value": "black"},"opacity": {"value": 0.08}},
"labels": {
"angle": {"value": 270},
"align": {"value": "left"},
"baseline": {"value": "middle"}
}
},
"title": "Town",
"titleOffset": 116,
"orient": "top",
"tickPadding": 10
},
{
"type": "y",
"scale": "y",
"grid": true,
"layer": "back",
"properties": {"grid": {"stroke": {"value": "black"},"opacity": {"value": 0.08}}},
"title": "State",
"titleOffset": 56
}
],
"marks": [
{
"type": "symbol",
"from": {"data": "table"},
"properties": {
"enter": {
"x": {"scale": "x","field": "data.town"},
"y": {"scale": "y","field": "data.state"},
"size": {"scale": "size","field": "data.count"},
"shape": {"value": "circle"},
"stroke": {"value": "steelblue"},
"opacity": {"value": 1},
"strokeWidth": {"value": 2}
},
"update": {
"x": {"scale": "x","field": "data.town"},
"y": {"scale": "y","field": "data.state"},
"size": {"scale": "size","field": "data.count"},
"shape": {"value": "circle"},
"stroke": {"value": "steelblue"},
"opacity": {"value": 1},
"strokeWidth": {"value": 2}
}
}
}
],
"legends": [{"size": "size","orient": "right","title": "Number of Nuclear Plants"}]
}
],
"scales": []
});
</script>
<body>
<div id="vis"></div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment