In your chart it shows that states like Colorado, Virginia, New Hampshire, New Mexico, and Minnesota used their electoral college votes for the Republican party which is not true, these states where blue in 2016. I think the mistake lies in how you are calculating the color. For example, only 48% of New Mexico voted for the Democratic candidate, but it was still the simple majority, only 40% voted for the Republican candidate. I think your data does not take into account third party candidates? The Libertarian candidate received 9% of the vote in New Mexico, which was extremely high that year. I am new to Javascript and D3 so I don't know how to write it, but could you do some kind of conditional statement like if democratic votes are higher than republican votes then color blue? Instead of rounding the fraction?
Anyways, thanks for these tutorials they have been loads of fun to work through!
Hi Scott. I'm glad you're enjoying the course and I hope you're getting a lot out of it!
Great insight on this one. I did a simple round on the proportion of democratic votes for coloring and positioning. A less naive approach would be to check conditionally which is higher: the republican or democrat proportion and color based on that. A safer approach would be to have the party that took the electoral college votes in the data, but it wasn't included here. Positioning the bubbles is a little more complicated.
In the spirit of teaching, I encourage you to make the fix. Then make a PR and I'll merge your code.
Here's a hint - you can do it with a ternary operator in this one line:
.style('fill', d => color(Math.round(d.dem/d.total)))