Skip to content

Instantly share code, notes, and snippets.

@dhey24

dhey24/.block

Last active September 24, 2016 18:31
Download ZIP
Where is the South?
Raw
.block
license: gpl-3.0
Raw
README.md

#READ ME - Where is the South? ##Summary I am from North Carolina originally, but attended college in upstate New York, and currently work in New York City. Therefore, this article on fivethirtyeight: http://fivethirtyeight.com/datalab/which-states-are-in-the-south/ especially resonated with me, as it is a conversation I have often had (in jest) with friends. There is more debate about which states are actually in the south than one would think.

##Design: The goal is to show consensus about which states are truly in the south. This is most effectively done using a map, where the color scale is indicative of how many votes a given state got as "southern". I used a divergent color scale from color brewer, as I believe it makes the differences in votes more apparent than a single color scale. To bring this to the next level, investigating how various regions of the US percieve which states are really southern is a very interesting investigation. This interaction is enabled with filter buttons on the left. Tooltips enable the user to see specifically how many votes a given state got. Legend shows how many votes each state got and what the color represents on the map. "All" is set as the default filter, and is colored differently to distiguish from the others. When a button is selected, its color is changed to be a darker blue. Added a header to the filters to make it more clear what they are. North Carolina is highlighted to make the central theme of my home state being southern more apparent. I have included a short description at the top of the visualisation to provide some initial context for the reader.

##Feedback: ###Oliver

  • Perhaps add states votes on top of the state?
  • Highlighting seems like you are deselecting the button not selecting it (make the selected button darker and the other ones lighter)
  • Format all or none buttons differently
  • The yellow color scale makes the white borders of the states hard to see
  • Likes the opacity change when you hover

To account for Oliver's feedback I made the following changes:

  • Added black borders to the states
  • changed the color scheme of the filter buttons (default color is light blue, and selected color is darker blue)
  • Put All at the top of the buttons and None at the bottom

###Oye

  • Need a legend for the colors
  • Name of state shown by default?
  • Order the buttons alphabetically
  • Can you enable zoom/pan?

To account for Oye's feedback I made the following changes:

  • Created a legend for the color scale
  • Ordered the buttons alphabetically (except for All and None)
  • The rest of his feedback was not necessary for this viz

###Roshni:

  • What do the colors mean?
  • What do the filters mean?
  • Diverging color scale may be a bit confusing (perhaps legend would fix this)

Adding a label to the filter buttons, and adding the legend attended to most of Roshni's questions.

##Resources: Data Source - https://github.com/fivethirtyeight/data/tree/master/region-survey https://github.com/d3/d3-3.x-api-reference/blob/master/CSV.md http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922 https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html https://github.com/alignedleft/d3-book/tree/master/chapter_12 http://www.w3schools.com/cssref/pr_font_weight.asp http://stackoverflow.com/questions/2647867/how-to-determine-if-variable-is-undefined-or-null http://colorbrewer2.org/ http://d3-legend-v3.susielu.com/ https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet http://stackoverflow.com/questions/25168086/sorting-objects-based-on-property-value-in-d3 http://bl.ocks.org/rgdonohue/9280446 https://bost.ocks.org/mike/join/

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
/* Headers */
h2 {
text-align: center;
font-family: Arial;
width: 1000;
}
h3 {
text-align: center;
font-family: Arial;
top: 210px;
left: 8px;
position: absolute;
width: 170px;
font-size: 14px;
}
main {
/*text-align: center;*/
font-family: Arial;
left: 8px;
width: 950px;
font-size: 14px;
padding-bottom: 5px;
padding-left: 10px;
}
/* On mouse hover, lighten state color */
path:hover {
fill-opacity: .7;
}
/* On mouse hover, lighten state color */
path:hover {
fill-opacity: .7;
}
/* Style for Custom Tooltip */
div.tooltip {
position: absolute;
text-align: center;
width: 100px;
height: 28px;
padding: 2px;
font: bold 12px sans-serif;
background: white;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
/* Style for buttons */
div.regions_buttons {
position: absolute;
top: 255px;
left: 10px;
}
div.regions_buttons div {
background-color: rgb(65,182,196);
color: white;
padding: 3px;
margin: 7px;
border-radius: 8px;
text-align: center;
font-family: "Arial";
opacity: .75;
}
</style>
<body>
<title>D3: Where is the South?</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.12.0/d3-legend.js"></script>
<script type="text/javascript">
//Width and height
var w = 1000;
var h = 600;
//Define map projection
var projection = d3.geo.albersUsa()
.translate([w/2, h/2])
.scale([1000]);
//Define path generator
var path = d3.geo.path()
.projection(projection);
//Define quantize scale to sort data values into buckets of color
//****CONSIDER MAKING SCALE LINEAR****
var color = d3.scale.quantize()
.range(['rgb(255,255,204)','rgb(161,218,180)','rgb(65,182,196)','rgb(44,127,184)','rgb(37,52,148)']);
//Colors taken from colorbrewer.js, included in the D3 download
//create title
d3.select("body")
.append("h2")
.text("Where is the South? ");
//create description
d3.select("body")
.append("main")
.html("There was a great article on <a href='http://fivethirtyeight.com/datalab/which-states-are-in-the-south/'>FiveThirtyEight </a> about which states are actually in the south, where users were asked to vote on which states were truly southern. 2,528 individuals from across the country responded (1,135 of which considered themselves southern). </br>" +
"As a North Carolinan at heart I was surprised to see that my home state <i>(highlighted in red)</i> was not considered to be in the 'most southern' category according to respondents around the country (the default view). However, I was comforted to see that those who actually live in the <b>South Atlantic</b> do consider NC southern (and that is what really matters). Explore how where what region you are from influences your opinion of which states are 'southern' on your own with the filter buttons on the left hand side!</br></br>" +
"<i>Note: Hover over a state to see exactly how many people that participated in the poll (from the region selected on the left) thought that state was 'southern'.</i>");
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// Append Div for tooltip to SVG
var div = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
//Load in voting data
d3.csv("SOUTH_transformed_2.csv", function(data) {
//Get distinct regions from the data
var regions = d3.map(data, function(d) {
return d.Region;
}).keys();
//add one filter for ALL responses
regions.push("All");
//sort alphabetically
regions.sort();
//Add None option to the end
regions.push("None");
//Add buttons for each region
var buttons = d3.select("body")
.append("div")
.attr("class", "regions_buttons")
.selectAll("div")
.data(regions)
.enter()
.append("div")
.text(function(d) {
return d;
})
.style("background-color", function(d) {
if (d == "All") {
return 'rgb(37,52,148)';
} else {
return null;
}
});
//Add header for the filter buttons
d3.select("body")
.append("h3")
.text("Respondent Region Filters");
function update(region) {
//aggregate votes by state
function agg_state(leaves) {
var total = d3.sum(leaves, function(d) {
if(d['Region'] == region || region == "All") {
return d['Votes'];
} else {
return null;
}
});
return {
'Votes' : total
};
};
var nested = d3.nest()
.key(function(d) {
return d['State'];
})
.rollup(agg_state)
.entries(data);
//Set input domain for color scale
color.domain([
d3.min(nested, function(d) { return d.values.Votes; }),
d3.max(nested, function(d) { return d.values.Votes; })
]);
//make legend
svg.append("g")
.attr("class", "legendLinear")
.attr("transform", "translate(8,550)");
var legendLinear = d3.legend.color()
.labelFormat(d3.format(".0f"))
.shapeWidth(70)
.orient('horizontal')
.scale(color);
svg.select(".legendLinear")
.call(legendLinear)
.style("font-family", "Arial")
.style("font-size", "11px");
//load states data
d3.json("us-states.json", function(json) {
//Merge the ag. data and GeoJSON
//Loop through once for each ag. data value
for (var i = 0; i < nested.length; i++) {
//Grab state name
var dataState = nested[i].key;
//Grab data value, and convert from string to float
var dataValue = +nested[i].values.Votes;
//Find the corresponding state inside the GeoJSON
for (var j = 0; j < json.features.length; j++) {
var jsonState = json.features[j].properties.name;
if (dataState == jsonState) {
//Copy the data value into the JSON
json.features[j].properties.value = dataValue;
//Stop looking through the JSON
break;
}
}
}
//Bind data and create one path per GeoJSON feature
var state = svg.selectAll("path")
.data(json.features);
state.enter()
.append("path")
.attr("d", path);
state.transition()
.duration(200)
//custom style for the border
.style("stroke", function(d) {
//Get data value
var value = d.properties.value;
var name = d.properties.name;
if (value && value > 0) {
//If value exists…
console.log(name + ": " + value)
//Give NC a red border, and everything else a black one
if (name == "North Carolina") {
return "red";
} else {
return "black";
}
} else {
//If value is undefined…
return null;
}
})
//custom colors for each state based upon how many votes they have
.style("fill", function(d) {
//Get data value
var value = d.properties.value;
if (value && value > 0) {
//If value exists…
console.log(d.properties.name + ": " + value)
return color(value);
} else {
//If value is undefined…
return "#ccc";
}
})
.style("stroke-width", function(d) {
//make NC's stroke width bigger
var name = d.properties.name;
if (name == "North Carolina") {
return "2px";
} else {
return ".5px";
}
});
// Modification of custom tooltip code provided by Malcolm Maclean, "D3 Tips and Tricks"
// http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
state.on("mouseover", function(d) {
//handle undefined values
function null_votes(d) {
var votes = d.properties.value;
if (votes) {
//if value exists
return votes;
} else {
//value is undefined
return 0;
}
};
div.transition()
.duration(200)
.style("opacity", .9);
div.text(d.properties.name + ": " + null_votes(d))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
// fade out tooltip on mouse out
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
buttons.on("click", function(d) {
d3.select(".regions_buttons")
.selectAll("div")
.transition()
.duration(500)
.style("color", "white")
.style("background", "rgb(65,182,196)");
d3.select(this)
.transition()
.duration(500)
.style("background", "rgb(37,52,148)")
.style("color", "white");
setTimeout(update(d),500);
})
});
};
update("All");
});
</script>
</body>
Raw
SOUTH_transformed_2.csv
Region State Votes
New England Arkansas 45
New England Louisiana 68
New England Oklahoma 18
New England Texas 43
New England Alabama 68
New England Kentucky 49
New England Mississippi 67
New England Tennessee 56
New England Florida 63
New England Georgia 71
New England Maryland 9
New England North Carolina 53
New England South Carolina 68
New England Virginia 53
New England West Virginia 35
New England Delaware 5
New England Arizona 11
New England New Mexico 13
New England Colorado 1
New England Kansas 11
New England Missouri 22
New England Illinois 1
New England Indiana 2
New England Ohio 2
New England Pennsylvania 1
Middle Atlantic Arkansas 75
Middle Atlantic Louisiana 118
Middle Atlantic Oklahoma 21
Middle Atlantic Texas 84
Middle Atlantic Alabama 128
Middle Atlantic Kentucky 83
Middle Atlantic Mississippi 121
Middle Atlantic Tennessee 107
Middle Atlantic Florida 125
Middle Atlantic Georgia 132
Middle Atlantic Maryland 17
Middle Atlantic North Carolina 104
Middle Atlantic South Carolina 126
Middle Atlantic Virginia 88
Middle Atlantic West Virginia 58
Middle Atlantic Delaware 5
Middle Atlantic Arizona 16
Middle Atlantic New Mexico 22
Middle Atlantic Colorado 3
Middle Atlantic Kansas 10
Middle Atlantic Missouri 28
Middle Atlantic Illinois 2
Middle Atlantic Indiana 4
Middle Atlantic Ohio 4
Middle Atlantic Pennsylvania 1
East North Central Arkansas 131
East North Central Louisiana 169
East North Central Oklahoma 34
East North Central Texas 112
East North Central Alabama 169
East North Central Kentucky 115
East North Central Mississippi 159
East North Central Tennessee 138
East North Central Florida 128
East North Central Georgia 164
East North Central Maryland 12
East North Central North Carolina 104
East North Central South Carolina 144
East North Central Virginia 91
East North Central West Virginia 71
East North Central Delaware 2
East North Central Arizona 24
East North Central New Mexico 35
East North Central Colorado 2
East North Central Kansas 13
East North Central Missouri 41
East North Central Illinois 1
East North Central Indiana 3
East North Central Ohio 1
East North Central Pennsylvania 1
West North Central Arkansas 71
West North Central Louisiana 92
West North Central Oklahoma 22
West North Central Texas 68
West North Central Alabama 93
West North Central Kentucky 68
West North Central Mississippi 95
West North Central Tennessee 86
West North Central Florida 73
West North Central Georgia 94
West North Central Maryland 9
West North Central North Carolina 58
West North Central South Carolina 80
West North Central Virginia 37
West North Central West Virginia 29
West North Central Delaware 1
West North Central Arizona 19
West North Central New Mexico 18
West North Central Colorado 1
West North Central Kansas 7
West North Central Missouri 26
West North Central Illinois 2
West North Central Indiana 3
West North Central Ohio 0
West North Central Pennsylvania 1
South Atlantic Arkansas 355
South Atlantic Louisiana 665
South Atlantic Oklahoma 83
South Atlantic Texas 372
South Atlantic Alabama 764
South Atlantic Kentucky 438
South Atlantic Mississippi 688
South Atlantic Tennessee 614
South Atlantic Florida 646
South Atlantic Georgia 806
South Atlantic Maryland 63
South Atlantic North Carolina 679
South Atlantic South Carolina 777
South Atlantic Virginia 471
South Atlantic West Virginia 242
South Atlantic Delaware 15
South Atlantic Arizona 56
South Atlantic New Mexico 57
South Atlantic Colorado 11
South Atlantic Kansas 45
South Atlantic Missouri 126
South Atlantic Illinois 6
South Atlantic Indiana 12
South Atlantic Ohio 11
South Atlantic Pennsylvania 7
East South Central Arkansas 116
East South Central Louisiana 165
East South Central Oklahoma 17
East South Central Texas 93
East South Central Alabama 180
East South Central Kentucky 130
East South Central Mississippi 174
East South Central Tennessee 175
East South Central Florida 132
East South Central Georgia 179
East South Central Maryland 6
East South Central North Carolina 125
East South Central South Carolina 155
East South Central Virginia 87
East South Central West Virginia 38
East South Central Delaware 2
East South Central Arizona 6
East South Central New Mexico 7
East South Central Colorado 1
East South Central Kansas 2
East South Central Missouri 29
East South Central Illinois 1
East South Central Indiana 3
East South Central Ohio 1
East South Central Pennsylvania 0
West South Central Arkansas 300
West South Central Louisiana 411
West South Central Oklahoma 161
West South Central Texas 371
West South Central Alabama 412
West South Central Kentucky 184
West South Central Mississippi 391
West South Central Tennessee 279
West South Central Florida 298
West South Central Georgia 397
West South Central Maryland 20
West South Central North Carolina 190
West South Central South Carolina 310
West South Central Virginia 175
West South Central West Virginia 94
West South Central Delaware 1
West South Central Arizona 59
West South Central New Mexico 70
West South Central Colorado 2
West South Central Kansas 26
West South Central Missouri 81
West South Central Illinois 3
West South Central Indiana 4
West South Central Ohio 3
West South Central Pennsylvania 0
Mountain Arkansas 68
Mountain Louisiana 84
Mountain Oklahoma 26
Mountain Texas 51
Mountain Alabama 91
Mountain Kentucky 55
Mountain Mississippi 88
Mountain Tennessee 64
Mountain Florida 65
Mountain Georgia 91
Mountain Maryland 5
Mountain North Carolina 53
Mountain South Carolina 84
Mountain Virginia 47
Mountain West Virginia 36
Mountain Delaware 2
Mountain Arizona 10
Mountain New Mexico 11
Mountain Colorado 2
Mountain Kansas 7
Mountain Missouri 31
Mountain Illinois 1
Mountain Indiana 2
Mountain Ohio 0
Mountain Pennsylvania 0
Pacific Arkansas 109
Pacific Louisiana 159
Pacific Oklahoma 43
Pacific Texas 107
Pacific Alabama 156
Pacific Kentucky 91
Pacific Mississippi 149
Pacific Tennessee 106
Pacific Florida 113
Pacific Georgia 149
Pacific Maryland 9
Pacific North Carolina 81
Pacific South Carolina 133
Pacific Virginia 71
Pacific West Virginia 56
Pacific Delaware 4
Pacific Arizona 16
Pacific New Mexico 22
Pacific Colorado 2
Pacific Kansas 15
Pacific Missouri 50
Pacific Illinois 3
Pacific Indiana 3
Pacific Ohio 2
Pacific Pennsylvania 0
No Response Arkansas 119
No Response Louisiana 184
No Response Oklahoma 52
No Response Texas 125
No Response Alabama 186
No Response Kentucky 106
No Response Mississippi 165
No Response Tennessee 137
No Response Florida 150
No Response Georgia 193
No Response Maryland 12
No Response North Carolina 117
No Response South Carolina 166
No Response Virginia 96
No Response West Virginia 51
No Response Delaware 4
No Response Arizona 27
No Response New Mexico 40
No Response Colorado 3
No Response Kansas 19
No Response Missouri 36
No Response Illinois 1
No Response Indiana 3
No Response Ohio 0
No Response Pennsylvania 0
Raw
us-states.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment