Skip to content

Instantly share code, notes, and snippets.

@adg29
Last active August 29, 2015 14:22
Show Gist options
  • Save adg29/0c1199441c94da9320b5 to your computer and use it in GitHub Desktop.
Save adg29/0c1199441c94da9320b5 to your computer and use it in GitHub Desktop.
Vega Scatter Plot of Nuclear Energy as Percent of all Energy by State
<html>
<head>
<title></title>
<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>
</head>
<body>
<div id="vis"></div>
</body>
<script type="text/javascript">
function parse(spec) {
vg.parse.spec(spec, function(chart) {
var view = chart({ el:"#vis" });
view.viewport(null)
.renderer("svg")
.update();
});
}
parse({
"width": 200,
"height": 384,
"padding": "auto",
"data": [
{
"name": "raw",
"format": {
"type": "csv",
"parse": {
"percent_state_nuclear_v_electric": "number"
}
},
"url": "https://s3.amazonaws.com/t-brand-studio/data/nuclear/14/nuclear-plant-data.csv",
"transform": [
{
"type": "filter",
"test": "d.data.percent_state_nuclear_v_electric!==null"
}
]
},
{
"name": "table",
"source": "raw",
"transform": []
}
],
"marks": [
{
"_name": "cell",
"type": "group",
"properties": {
"enter": {
"width": {
"value": 310
},
"height": {
"value": 384
}
}
},
"scales": [
{
"name": "x",
"type": "linear",
"domain": {
"data": "table",
"field": "data.percent_state_nuclear_v_electric"
},
"range": [
0,
200
],
"zero": true,
"reverse": false,
"round": true,
"nice": true
},
{
"name": "y",
"type": "ordinal",
"domain": {
"data": "table",
"field": "data.state"
},
"sort": true,
"bandWidth": 12,
"round": true,
"nice": true,
"points": true,
"padding": 1
}
],
"axes": [
{
"type": "x",
"scale": "x",
"grid": true,
"layer": "back",
"properties": {
"grid": {
"stroke": {
"value": "black"
},
"opacity": {
"value": 0.08
}
}
},
"title": "Percent Nuclear of all Energy by State",
"titleOffset": 38,
"orient": "top",
"ticks": 5,
"values": [0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1]
},
{
"type": "y",
"scale": "y",
"grid": true,
"layer": "back",
"properties": {
"grid": {
"stroke": {
"value": "black"
},
"opacity": {
"value": 0.08
}
}
},
"title": "state",
"titleOffset": 56
}
],
"marks": [
{
"type": "symbol",
"shape": "circle",
"from": {
"data": "table"
},
"properties": {
"enter": {
"x": {
"scale": "x",
"field": "data.percent_state_nuclear_v_electric"
},
"y": {
"scale": "y",
"field": "data.state",
"offset": -4
},
"width": {
"value": 1
},
"height": {
"value": 8
},
"fill": {
"value": "steelblue"
},
"opacity": {
"value": 0.7
}
},
"update": {
"x": {
"scale": "x",
"field": "data.percent_state_nuclear_v_electric"
},
"y": {
"scale": "y",
"field": "data.state",
"offset": -4
},
"width": {
"value": 1
},
"height": {
"value": 8
},
"fill": {
"value": "steelblue"
},
"opacity": {
"value": 0.7
}
}
}
}
],
"legends": []
}
],
"scales": []
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment