Skip to content

Instantly share code, notes, and snippets.

@aboutaaron

aboutaaron/chart.js

Forked from jmuyskens/chart.js
Created March 28, 2016 15:50
Show Gist options
  • Save aboutaaron/3ec2b48fb99982644692 to your computer and use it in GitHub Desktop.
Save aboutaaron/3ec2b48fb99982644692 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
chart.js
function Chart() {
var data = [];
var margin = {
top: 10,
right: 10,
bottom: 10,
left: 10
}
var color = d3.scale.category10();
var height = 500 - margin.top - margin.bottom;
var width = 800 - margin.right - margin.left;
var xScale = d3.scale.linear()
.range([0, width]);
var yScale = d3.scale.linear()
.range([0, height]);
// my tiny d3 jetpack :)
function translate(x, y) {
return 'translate(' + x + ',' + y + ')';
}
function _attr(attrName, func) {
func = func || function (d) { return d; }
return function(d) {
return func(d[attrName]);
}
}
function my(selection) {
selection.each(function(d) {
d3.select(this).select('svg').remove();
var svg = d3.select(this).append('svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', translate(margin.left, margin.top));
});
}
my.height = function(_) {
if (!arguments.length) return height;
height = _;
yScale.range([0, height]);
return my;
}
my.width = function(_) {
if (!arguments.length) return width;
width = _;
xScale.range([0, width]);
return my;
}
return my;
}
Raw
data.csv
state coal petroleum gas nuclear renewable other total pctcoal pctpetroleum pctgas pctnuclear pctrenewable pctother pcttotal rankpctcoal rankpctpetroleum rankpctgas rankpctnuclear rankpctrenewable rankpctother maxnum topfuel coalrank petroleumrank gasrank nuclearrank renewablerank otherrank
VT 0.00 0.00 1.00 0.00 869.00 0.00 870.00 0.00 0.00 0.00 0.00 1.00 0.00 1.00 49.00 45.00 48.00 32.00 1.00 36.00 1.00 renewable 3.00 3.00 2.00 3.00 1.00 3.00
RI 0.00 101.00 2069.00 0.00 100.00 0.00 2270.00 0.00 0.04 0.91 0.00 0.04 0.00 1.00 49.00 6.00 1.00 32.00 41.00 36.00 0.91 gas 4.00 2.00 1.00 4.00 3.00 4.00
OR 26.00 0.00 4851.00 0.00 19806.00 14.00 24697.00 0.00 0.00 0.20 0.00 0.80 0.00 1.00 48.00 45.00 27.00 32.00 5.00 29.00 0.80 renewable 3.00 5.00 2.00 5.00 1.00 4.00
CA 162.00 36.00 38521.00 8126.00 23273.00 329.00 70447.00 0.00 0.00 0.55 0.12 0.33 0.00 1.00 47.00 40.00 7.00 28.00 9.00 12.00 0.55 gas 5.00 6.00 1.00 3.00 2.00 4.00
ID 37.00 0.00 965.00 0.00 5351.00 0.00 6353.00 0.01 0.00 0.15 0.00 0.84 0.00 1.00 46.00 45.00 33.00 32.00 3.00 36.00 0.84 renewable 3.00 4.00 2.00 4.00 1.00 4.00
ME 59.00 492.00 1221.00 0.00 3427.00 155.00 5354.00 0.01 0.09 0.23 0.00 0.64 0.03 1.00 45.00 3.00 24.00 32.00 6.00 2.00 0.64 renewable 5.00 3.00 2.00 6.00 1.00 4.00
WA 735.00 0.00 3037.00 3383.00 40172.00 58.00 47385.00 0.02 0.00 0.06 0.07 0.85 0.00 1.00 44.00 45.00 38.00 31.00 2.00 22.00 0.85 renewable 4.00 6.00 3.00 2.00 1.00 5.00
NY 1321.00 1639.00 20945.00 17933.00 13295.00 380.00 55513.00 0.02 0.03 0.38 0.32 0.24 0.01 1.00 43.00 8.00 14.00 11.00 14.00 8.00 0.38 gas 5.00 4.00 1.00 2.00 3.00 6.00
NJ 1032.00 276.00 13272.00 13562.00 743.00 196.00 29081.00 0.04 0.01 0.46 0.47 0.03 0.01 1.00 42.00 16.00 11.00 5.00 46.00 9.00 0.47 nuclear 3.00 5.00 2.00 1.00 4.00 6.00
CT 586.00 404.00 6468.00 7503.00 485.00 231.00 15677.00 0.04 0.03 0.41 0.48 0.03 0.01 1.00 41.00 9.00 13.00 4.00 44.00 4.00 0.48 nuclear 3.00 5.00 2.00 1.00 4.00 6.00
NV 713.00 5.00 9967.00 0.00 3381.00 10.00 14076.00 0.05 0.00 0.71 0.00 0.24 0.00 1.00 40.00 42.00 3.00 32.00 13.00 27.00 0.71 gas 3.00 5.00 1.00 6.00 2.00 4.00
NH 836.00 168.00 2345.00 4519.00 1482.00 25.00 9375.00 0.09 0.02 0.25 0.48 0.16 0.00 1.00 39.00 11.00 22.00 3.00 18.00 18.00 0.48 nuclear 4.00 5.00 2.00 1.00 3.00 6.00
AK 241.00 355.00 1219.00 0.00 786.00 2601.00 0.09 0.14 0.47 0.00 0.30 0.00 1.00 38.00 2.00 10.00 32.00 10.00 36.00 0.47 gas 4.00 3.00 1.00 5.00 2.00 5.00
MS 2898.00 9.00 17770.00 4696.00 579.00 25952.00 0.11 0.00 0.68 0.18 0.02 0.00 1.00 37.00 43.00 4.00 20.00 48.00 36.00 0.68 gas 3.00 5.00 1.00 2.00 4.00 6.00
DE 395.00 124.00 2602.00 0.00 48.00 0.00 3169.00 0.12 0.04 0.82 0.00 0.02 0.00 1.00 36.00 7.00 2.00 32.00 50.00 36.00 0.82 gas 2.00 3.00 1.00 5.00 4.00 5.00
SD 523.00 15.00 237.00 0.00 3356.00 0.00 4131.00 0.13 0.00 0.06 0.00 0.81 0.00 1.00 35.00 25.00 39.00 32.00 4.00 36.00 0.81 renewable 2.00 4.00 3.00 5.00 1.00 5.00
MA 1528.00 748.00 6390.00 1598.00 1259.00 351.00 11874.00 0.13 0.06 0.54 0.13 0.11 0.03 1.00 34.00 4.00 8.00 24.00 25.00 1.00 0.54 gas 3.00 5.00 1.00 2.00 4.00 6.00
HI 511.00 2797.00 0.00 0.00 553.00 77.00 3938.00 0.13 0.71 0.00 0.00 0.14 0.02 1.00 33.00 1.00 50.00 32.00 21.00 3.00 0.71 petroleum 3.00 1.00 5.00 5.00 2.00 4.00
LA 6207.00 2005.00 25266.00 6754.00 1493.00 193.00 41918.00 0.15 0.05 0.60 0.16 0.04 0.00 1.00 32.00 5.00 6.00 22.00 43.00 13.00 0.60 gas 3.00 4.00 1.00 2.00 5.00 6.00
FL 16629.00 840.00 60778.00 11722.00 2186.00 1164.00 93319.00 0.18 0.01 0.65 0.13 0.02 0.01 1.00 31.00 18.00 5.00 26.00 47.00 5.00 0.65 gas 2.00 6.00 1.00 3.00 4.00 5.00
VA 6886.00 748.00 12179.00 11787.00 2049.00 187.00 33836.00 0.20 0.02 0.36 0.35 0.06 0.01 1.00 30.00 10.00 17.00 8.00 35.00 11.00 0.36 gas 3.00 5.00 1.00 2.00 4.00 6.00
SC 9719.00 158.00 5264.00 22802.00 1950.00 22.00 39915.00 0.24 0.00 0.13 0.57 0.05 0.00 1.00 29.00 23.00 34.00 1.00 38.00 30.00 0.57 nuclear 2.00 5.00 3.00 1.00 4.00 6.00
AL 15475.00 60.00 21823.00 16602.00 6096.00 0.00 60056.00 0.26 0.00 0.36 0.28 0.10 0.00 1.00 28.00 32.00 15.00 14.00 27.00 36.00 0.36 gas 3.00 5.00 1.00 2.00 4.00 6.00
TX 44608.00 119.00 91001.00 17075.00 18279.00 277.00 171359.00 0.26 0.00 0.53 0.10 0.11 0.00 1.00 27.00 37.00 9.00 29.00 24.00 20.00 0.53 gas 2.00 6.00 1.00 4.00 3.00 5.00
GA 16010.00 196.00 18855.00 13888.00 3108.00 17.00 52074.00 0.31 0.00 0.36 0.27 0.06 0.00 1.00 26.00 24.00 16.00 15.00 36.00 31.00 0.36 gas 2.00 5.00 1.00 3.00 4.00 6.00
NC 16939.00 304.00 14610.00 16675.00 3526.00 94.00 52148.00 0.32 0.01 0.28 0.32 0.07 0.00 1.00 25.00 21.00 21.00 12.00 33.00 19.00 0.32 coal 1.00 5.00 3.00 2.00 4.00 6.00
OK 9881.00 0.00 12933.00 0.00 6452.00 29266.00 0.34 0.00 0.44 0.00 0.22 0.00 1.00 24.00 45.00 12.00 32.00 16.00 36.00 0.44 gas 2.00 4.00 1.00 4.00 3.00 4.00
PA 31443.00 495.00 21412.00 32587.00 3960.00 339.00 90236.00 0.35 0.01 0.24 0.36 0.04 0.00 1.00 22.00 22.00 23.00 7.00 42.00 15.00 0.36 nuclear 2.00 5.00 3.00 1.00 4.00 6.00
AZ 13960.00 24.00 7133.00 13395.00 4333.00 0.00 38845.00 0.36 0.00 0.18 0.34 0.11 0.00 1.00 21.00 38.00 28.00 9.00 23.00 36.00 0.36 coal 1.00 5.00 3.00 2.00 4.00 6.00
AR 8595.00 29.00 6863.00 5922.00 1904.00 6.00 23319.00 0.37 0.00 0.29 0.25 0.08 0.00 1.00 20.00 31.00 19.00 17.00 32.00 32.00 0.37 coal 1.00 5.00 2.00 3.00 4.00 6.00
IL 31281.00 22.00 3831.00 39316.00 5217.00 107.00 79774.00 0.39 0.00 0.05 0.49 0.07 0.00 1.00 19.00 44.00 40.00 2.00 34.00 21.00 0.49 nuclear 2.00 6.00 4.00 1.00 3.00 5.00
TN 12943.00 60.00 3563.00 10680.00 4733.00 8.00 31987.00 0.40 0.00 0.11 0.33 0.15 0.00 1.00 18.00 28.00 35.00 10.00 19.00 33.00 0.40 coal 1.00 5.00 4.00 2.00 3.00 6.00
MD 6736.00 164.00 1333.00 5770.00 1282.00 119.00 15404.00 0.44 0.01 0.09 0.37 0.08 0.01 1.00 17.00 15.00 37.00 6.00 30.00 7.00 0.44 coal 1.00 5.00 3.00 2.00 4.00 6.00
MI 21464.00 386.00 7875.00 13610.00 3941.00 153.00 47429.00 0.45 0.01 0.17 0.29 0.08 0.00 1.00 16.00 20.00 32.00 13.00 31.00 16.00 0.45 coal 1.00 5.00 3.00 2.00 4.00 6.00
MN 10708.00 17.00 2395.00 4408.00 5239.00 141.00 22908.00 0.47 0.00 0.10 0.19 0.23 0.01 1.00 15.00 34.00 36.00 19.00 15.00 10.00 0.47 coal 1.00 6.00 4.00 3.00 2.00 5.00
MO 6085.00 206.00 254.00 0.00 5626.00 125.00 12296.00 0.49 0.02 0.02 0.00 0.46 0.01 1.00 14.00 12.00 46.00 32.00 7.00 6.00 0.49 coal 1.00 4.00 3.00 6.00 2.00 5.00
IA 13288.00 18.00 711.00 2160.00 8666.00 0.00 24843.00 0.53 0.00 0.03 0.09 0.35 0.00 1.00 13.00 35.00 44.00 30.00 8.00 36.00 0.53 coal 1.00 5.00 4.00 3.00 2.00 6.00
WI 14789.00 93.00 5330.00 4351.00 2390.00 24.00 26977.00 0.55 0.00 0.20 0.16 0.09 0.00 1.00 12.00 26.00 26.00 21.00 29.00 24.00 0.55 coal 1.00 5.00 2.00 3.00 4.00 6.00
KS 10283.00 30.00 536.00 2435.00 4511.00 0.00 17795.00 0.58 0.00 0.03 0.14 0.25 0.00 1.00 11.00 29.00 43.00 23.00 12.00 36.00 0.58 coal 1.00 5.00 4.00 3.00 2.00 6.00
NE 9368.00 9.00 85.00 4019.00 2018.00 0.00 15499.00 0.60 0.00 0.01 0.26 0.13 0.00 1.00 10.00 39.00 47.00 16.00 22.00 36.00 0.60 coal 1.00 5.00 4.00 2.00 3.00 6.00
OH 32926.00 578.00 11968.00 6226.00 1057.00 3.00 52758.00 0.62 0.01 0.23 0.12 0.02 0.00 1.00 9.00 14.00 25.00 27.00 49.00 35.00 0.62 coal 1.00 5.00 2.00 3.00 4.00 6.00
CO 12990.00 0.00 3632.00 0.00 4160.00 18.00 20800.00 0.62 0.00 0.17 0.00 0.20 0.00 1.00 8.00 45.00 30.00 32.00 17.00 25.00 0.62 coal 1.00 5.00 3.00 5.00 2.00 4.00
NM 7763.00 34.00 3488.00 0.00 1137.00 12422.00 0.62 0.00 0.28 0.00 0.09 0.00 1.00 7.00 27.00 20.00 32.00 28.00 36.00 0.62 coal 1.00 4.00 2.00 5.00 3.00 5.00
ND 11551.00 11.00 14.00 0.00 4055.00 14.00 15645.00 0.74 0.00 0.00 0.00 0.26 0.00 1.00 6.00 36.00 49.00 32.00 11.00 23.00 0.74 coal 1.00 5.00 3.00 6.00 2.00 3.00
IN 33081.00 359.00 8095.00 0.00 2399.00 171.00 44105.00 0.75 0.01 0.18 0.00 0.05 0.00 1.00 5.00 19.00 29.00 32.00 37.00 14.00 0.75 coal 1.00 4.00 2.00 6.00 3.00 5.00
UT 13049.00 8.00 2825.00 0.00 739.00 3.00 16624.00 0.78 0.00 0.17 0.00 0.04 0.00 1.00 4.00 41.00 31.00 32.00 40.00 34.00 0.78 coal 1.00 4.00 2.00 6.00 3.00 5.00
MO 26617.00 45.00 1462.00 4364.00 957.00 25.00 33470.00 0.80 0.00 0.04 0.13 0.03 0.00 1.00 3.00 30.00 42.00 25.00 45.00 26.00 0.80 coal 1.00 5.00 3.00 2.00 4.00 6.00
WY 17396.00 15.00 413.00 0.00 2016.00 0.00 19840.00 0.88 0.00 0.02 0.00 0.10 0.00 1.00 2.00 33.00 45.00 32.00 26.00 36.00 0.88 coal 1.00 4.00 3.00 5.00 2.00 5.00
KY 32024.00 527.00 1706.00 0.00 1717.00 21.00 35995.00 0.89 0.01 0.05 0.00 0.05 0.00 1.00 1.00 13.00 41.00 32.00 39.00 28.00 0.89 coal 1.00 4.00 3.00 6.00 2.00 5.00
WV 29863.00 58.00 316.00 0.00 1329.00 0.00 31566.00 0.95 0.00 0.01 0.00 0.04 0.00 1.00 #N/A #N/A #N/A 32.00 #N/A 36.00 0.95 coal 1.00 4.00 3.00 5.00 2.00 5.00
Raw
index.html
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="chart.js"></script>
<script>
var chart = new Chart()
d3.csv('data.csv', function(data) {
d3.select('body')
.datum(data)
.call(chart);
window.onresize = function() {
d3.select('body')
.datum(data)
.call(chart);
}
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment