|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<script src="http://d3js.org/d3.v4.min.js"></script> |
|
<script src="http://dimplejs.org/dist/dimple.v2.3.0.min.js"></script> |
|
<style> |
|
</style> |
|
<title>Wind Capacity by state</title> |
|
</head> |
|
<body> |
|
<script type="text/javascript"> |
|
function drawChart(data) { |
|
var margin = 75, |
|
width = 1200 - margin, |
|
height = 600 - margin; |
|
|
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("width", width + margin) |
|
.attr("height", height + margin) |
|
.append('g') |
|
.attr('class','chart'); |
|
|
|
const myChart = new dimple.chart(svg, data); |
|
myChart.setBounds(margin, margin, width - margin, height - margin); |
|
const xAxis = myChart.addCategoryAxis("x", "State"); |
|
xAxis.addOrderRule("TrumpPercent"); |
|
const yAxis = myChart.addMeasureAxis("y", "Capacity"); |
|
myChart.addMeasureAxis("z", "TwoPartyVoters"); |
|
const colourAxis = myChart.addColorAxis( |
|
"TrumpPercent", |
|
["#0000FF", "#0000FF", "#AAAAAA", "#FF0000", "#FF0000"], |
|
); |
|
colourAxis.overrideMin = 0; |
|
colourAxis.overrideMax = 100; |
|
myChart.addSeries(null, dimple.plot.bubble); |
|
myChart.draw(); |
|
}; |
|
|
|
const entriesToDiscard = [ |
|
"", |
|
"Nationwide", |
|
"Year", |
|
"Region", |
|
"The Midwest", |
|
"The Northeast", |
|
"The South", |
|
"The West", |
|
]; |
|
|
|
function parseCsvValueAsNumber(str) { |
|
if (typeof str !== 'string') { |
|
return str; |
|
} |
|
return +(str.trim().replace(/\,/g, "",)); |
|
} |
|
|
|
function preProcessData(cb) { |
|
d3.csv("us-elections.csv", (elections) => { |
|
d3.csv("wind.csv", (wind) => { |
|
const windMap = new Map(); |
|
wind.forEach((windEntry) => { |
|
const { State, Capacity } = windEntry; |
|
windMap.set(State, windEntry); |
|
}); |
|
const stateMap = new Map(); |
|
elections.forEach((electionsEntry) => { |
|
const { State } = electionsEntry; |
|
if (entriesToDiscard.indexOf(State) >= 0) { |
|
return; |
|
} |
|
const windEntry = windMap.get(State); |
|
const Capacity = windEntry ? |
|
parseCsvValueAsNumber(windEntry.Capacity) : 0; |
|
let { |
|
'2016_clinton': Clinton, |
|
'2016_trump': Trump, |
|
} = electionsEntry; |
|
([ |
|
Clinton, |
|
Trump, |
|
] = [ |
|
parseCsvValueAsNumber(Clinton), |
|
parseCsvValueAsNumber(Trump), |
|
]); |
|
const TwoPartyVoters = (Clinton + Trump); |
|
const TrumpPercent = Math.round(Trump / TwoPartyVoters * 10000) / 100; |
|
const stateEntry = { |
|
State, |
|
Capacity, |
|
Clinton, |
|
Trump, |
|
TwoPartyVoters, |
|
TrumpPercent, |
|
}; |
|
stateMap.set(State, stateEntry); |
|
}); |
|
const data = [...stateMap.values()]; |
|
cb(data); |
|
}); |
|
}); |
|
} |
|
|
|
preProcessData(drawChart); |
|
</script> |
|
</body> |
|
</html> |