Skip to content

Instantly share code, notes, and snippets.

@jamemcc

jamemcc/NM_county 1.json

Last active June 15, 2016 02:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jamemcc/35b75e26abb1bab941687a6a4eaf714c to your computer and use it in GitHub Desktop.
Save jamemcc/35b75e26abb1bab941687a6a4eaf714c to your computer and use it in GitHub Desktop.
Download ZIP
Visualization of New Mexico's Population in 3 parts coded in D3
Raw
readme.md

##Summary This Map of New Mexico present information about the relative population across the state, it's evolution since 1900 and other facts related to population. It should be interesting to those who know about New Mexico or are generally interested in population trends.

It presents the counties of New Mexico as a Chloropleth using a Quartize scale which encodes populations of the counties as colors: white means the county did not yet exist and the data is actually missing. dark red represents population's above 500K which is really only Bernallillo where the major city in NM called Albuquerque is. Yellow to Red represents populations in between those

##Design: The initial design was intended to show a chloropleth which would explain how New mexico could be such a less populated State except for Albuquerque/county of Bernallilo which is a faily large city. It was intended to show the change in population from 1990 to 2010 which is available on the us goverment census website. It was envisioned that the chloropleth transiton of population over time whould make for a good visual. The initial prototype/map without filling is provided as the HTML file called NMPopMapOnly.html. see below.

The visualization ended up at 3 stages implementing the visualization experience theory referred to in Udacity Data Visualization class as the Martini Glass. The Martini Glass experience as applied to this visualization is:

Martini Base: User s allowed to explore the population of each county in New Mexico as of the most recent Census in 2010.
Martini Stem: User is shown the transtion visualization of how population changed from 1900 to 2010.
Martini Drink: The user is presented all the information and can consume it as they see fit.

##Feedback from reviewers:

  1. coworker Daniel: From before it was uploaded to GIST
    • very good treatment of new mexico data. There is lots of data that could be presented in this framework. My change was to add more types of data to the Table which is to the right of the map in stage 3.
    • Couldn't see what year was being transitioned to as the Stage 2 - population transition ran. My change was to add the years button on top which visually highlight the progress by turning red but also serve as navigation to that year when in standalone mode.
  2. Peer review Andrew: From before it was uploaded to GIST
    • Transtion of the states is from black tot he next color - doesn't make as much sense. Explanation: on firefox the transtion of an SVG.path fill seems to start from Black. As a workaround I set the default background of the SVG to orange so transition from orange is not so distracting.
    • Year's buttons blink black as they are reset - each decade of the transition - very distracting. I changed the underlying color of the divs that make up the years button the same color (NM Yellow) that the transtion is going to, Black flash disappeared.
  3. Professional review by friend Benny who is a professional photographer
    • Can't read some County Names as the white font color matches some of the fill color. My change was to change color form white to grey
    • Orange color scheme good for color blind people, no change
    • well in the helptext should be we will - changed
    • Hover over for states that didnt' exist (white space in early decades) should explain the white space. I added tool tip of "not yet seceded"
    • Grey of modal is not covering whole screen, distressing experience nad makes clicking off it fail - Changed Modal width to 100%
    • Need to cite a source for the data - I added citation at the bottom of the screen
    • Should be able to select table rows or counties in the 3rd/final martini. I added selection to rows as well. 4.Udacity Feedback after first submission:
    • Needs to be more Explanatory. I changed to add the explanation button experience.
    • Fix lack of Style tag issue
    1. Matt review:
    • Would like to be able to see the State Grphic while reading explanations. Change was to move explanation pane to the right of the State graphic.
    • Fix words had seceeded which need space between.

##Resources

  1. http://d3-legend.susielu.com/#color-quant for the javascript library and help to create legend
  2. Mike Bostock and http://bl.ocks.org/d3noob/a22c42db65eb00d4e369 for toolips
  3. U.S. Census Bureau for the data
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.10.0/d3-legend.js"></script>
<style>
h2 {
text-align: center;
color: black;
font-size: 120%;
}
div.play_buttons {
position: fixed;
top: 70px;
left: 20px;
}
div.play_buttons div {
display:inline;
background-color: rgb(241,191,0); /*NM Yellow*/
padding: 7px;
margin: 7px;
}
div.years_buttons {
position: fixed;
top: 65px;
left: 80px;
}
div.years_buttons div {
display:inline;
background-color: rgb(241,191,0); /*NM Yellow*/
padding: 4px;
margin: 4px;
border-radius: 4px;
font-size: 80%;
}
button#clearBtn {
position: fixed;
top: 50px;
left: 850px;
display:inline;
background-color: rgb(241,191,0); /*NM Yellow*/
padding: 7px;
margin: 7px;
}
button#filterBtn {
position: fixed;
top: 50px;
left: 750px;
display:inline;
background-color: rgb(241,191,0); /*NM Yellow*/
padding: 7px;
margin: 7px;
}
.q0-9{fill:rgb(255,255,229)}
.q1-9{fill:rgb(255,247,188)}
.q2-9{fill:rgb(254,227,145)}
.q3-9{fill:rgb(254,196,79)}
.q4-9{fill:rgb(254,153,41)}
.q5-9{fill:rgb(236,112,20)}
.q6-9{fill:rgb(204,76,2)}
.q7-9{fill:rgb(153,52,4)}
.q8-9{fill:rgb(102,37,6)}
.legendQuant {
font-size: 66%;
}
div.tooltip {
position: fixed;
text-align: center;
width: 120px;
padding: 3px;
font: 14px sans-serif;
background: rgb(170,21,27); /*NM Red*/
border: 0px;
border-radius: 8px;
pointer-events: none;
box-shadow:rgba(0, 0, 0, 0.3) 0 4px 10px; /* tootip floats */
}
/* next items control the tooltip that appears periodically) */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
#myBtn {
position: fixed;
top: 110px;
left: 10px;
font-size: 80%
}
#myBtn2 {
position: fixed;
top: 140px;
left: 10px;
font-size: 80%
}
#myBtn3 {
position: fixed;
top: 170px;
left: 10px;
font-size: 80%
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 140px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(241,191,0); /*NM Yellow*/
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Header */
.modal-header {
padding: 2px 16px;
background-color: rgb(170,21,27); /*NM Red*/
color: white;
}
/* Modal Body */
.modal-body {
padding: 2px 16px;
background-color: rgb(241,191,0); /*NM Yellow*/
}
/* Modal Footer */
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
/* Modal Content */
.modal-content {
position: fixed;
top: 120px;
left: 600px;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 25%;
/*
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
*/
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}
}
@keyframes animatetop {
from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}
}
table {
position: fixed;
top: 100px;
left: 400px;
border-collapse: collapse;
padding: 0;
margin: 0 0 2px 0;
font-size: 66%;
}
table th {
text-align: left;
border-bottom: 2px solid rgb(254,153,41);
vertical-align: bottom;
padding: 0 2px 2px 2px;
text-align: right;
}
table td {
border-bottom: 1px solid rgb(254,196,79);
border-right: 1px solid rgb(254,196,79);
vertical-align: top;
padding: 2px;
text-align: right;
}
table th:nth-child(1),
table td:nth-child(1) {
text-align: left;
padding-left: 0;
font-weight: bold;
}
</style>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
Replace me first
</div>
<div class="modal-body",role="document"> Replace me <OL><LI> FIRST</LI><LI>sECOND</LI></OL>
</div>
</div>
</div>
<script type="text/javascript">
function draw(geo_data) { //Main function
"use strict";
//setup tool tip text for the 3 phases of "martini" style visualization
var martiniBase = ["New Mexico's Population in 2010",
"Start with the County Populations as of the 2010 Census. If you hover over the counties you'll see the actual population. Spend a while to get used to the various counties and the relative population of each. When you are ready use the white buttons: 1. the top one repeats this introduction. 2. The middle one tells explains more about what you saw. 3. the bottom button is for when you are ready for more."] ;
var martiniBaseSummary = ["New Mexico's Population in 2010 - In review",
"New Mexico has 33 counties as of the 2010 Census. 32% of the population of the whole state, or almost a 3rd, live in Bernallilo County in the center of the state. Bernallilo is the 3rd smallest county after Los Alamos and Valencia but contains the City of Albuquerque and the university of New Mexico. The next most populous city is Las Cruces in Dona Ana County in Southern NM home to New Mexico State University. It is telling that Higher Education seems to drive the larest populations in this State. Note the the Northwest and South East Corners are also realively higher populations. These are both Oil producing area's and owe their population to the Oil and Gas Industry. "] ;
var martiniStem = ["New Mexico's Population from 1900 to 2010",
"Now we will transition back to 1900 and the decade by decade progression to 2010. Click the play button when ready. You can also click on any year to transition to it. When you are done looking at the progression, click the middle button for an explanation."];
var martiniStemSummary = ["New Mexico's Population changes from 1900 to 2010 - In review",
"In 1900 the counties shown on the map were part of the Territory of New Mexico which included Arizona. In 1900 there were only 20 counties in New Mexico. Note the counties which did not exist in white. New Mexico did not become a U.S. state until 1912 by which time all but 7 had seceeded to become independent entities. The final 2 counties to seceed were Los Alamos in 1949 after it's historic role in building the Atom Bombs which ended World War 2 and Cibola County as recently as 1981 which seceeded from Valencia County. In terms of the population change trends, most telling is #1 that Bernallilo and Albuquerque have been the largest since 1900 and has grown the fastest. It must help in such a large but relativley unpopulated State to be in the center. Another telling lack of change is San Miguel county which has scarecely grown since 1900 when it was the second most populous county in the state. We'll look for some statistics on that in the next section. Next to San Miguel is Harding County which has consistenly shrunk and is a 5th of the size since 1900. San Miguel and Harding have no significantly large cities and largely arid grassland for natural resources. When ready: click the'Show me more' button to continue."] ;
var martiniDrink = ["New Mexico's Population in more detail",
"You made it!! Now you can see it all including this new table of county facts as of 2010. Click on individual counties to highlight as many as you want. Click the 'filter' button to show only those counties for easy comparison. Click the 'clear' button to start selecting over again."];
var martiniDrinkSummary = ["New Mexico's Population Statistics",
"So what stands out from all these statistics? If you select the largest counties and filter you'll see that they are growing the fastest. Look at Delta%. If you select the more populated counties in the NorthWest and Southeast you'll see that their major industry is Natural resources. The summary in general is that New Mexico is growing only by educating it's citizens and by Oil and Gas. the generally accepted tenent is that New Mexico needs to diversif into other areas. On exception is Los Alamos County add that an you can see what the possible and promising 3rd Industry is for New Mexico. "];
//setup a function to lookup fill values as a workaround for quantize which doesn't play well
function colorBaseOn(value) {
if (value < 1) {return "rgb(255,255,255)"}
else {if (value < 1000) {return "rgb(255,247,188)"}
else {if (value < 2000) {return "rgb(254,227,145)"}
else {if (value < 5000) {return "rgb(254,196,79)"}
else {if (value < 20000) {return "rgb(254,153,41)"}
else {if (value < 50000) {return "rgb(236,112,20)"}
else {if (value < 100000) {return "rgb(204,76,2)"}
else {if (value < 400000) {return "rgb(153,52,4)"}
else {return "rgb(102,37,6)"}}}}}}}}}
// setup sizes for the svg element
var margin = 20,
width = 620 - margin,
height = 700 - margin;
// Put the title on the screen
d3.select("body")
.append("h2")
.text("Population of the Counties of New Mexico, United States")
;
var commaFormat = d3.format("0,000"); // to format the population and other #s
var firstTip = true; // sets up so we can show the first tip only once
// setup the modal to contain martini tips
d3.select("body") //Modal button #1 - getting started and review
.append("button")
.attr("id","myBtn")
.text("Start Here");
d3.select("body") //Modal button #2 - explanations
.append("button")
.attr("id","myBtn2")
.text("What did I miss?");
d3.select("body") //Modal button #3 - next
.append("button")
.attr("id","myBtn3")
.text("Show me more");
var modal = document.getElementById('myModal');// Name the modal
var btn = document.getElementById("myBtn");// Name the button that opens the modal
btn.onclick = function() { // When the user clicks the button, open the modal
turnOnModal(1);
}
var btn2 = document.getElementById("myBtn2");// Name the button that opens the modal
btn2.onclick = function() { // When the user clicks the button, open the modal
turnOnModal(2);
}
var btn3 = document.getElementById("myBtn3");// Name the button that opens the modal
btn3.onclick = function() { // When the user clicks the button, open the modal
turnOnModal(3);
}
window.onclick = function(event) { // When the user clicks anywhere outside of the modal, close it
if (event.target == modal) { // if in Modal mode get out
modal.style.display = "none";
}
}
function turnOnModal(buttonPressed) { //setup common function to turn on the modal with variable text
if (buttonPressed === 1 && martiniStep === 3) {
d3.select(".modal-header").text(martiniDrink[0]);
d3.select(".modal-body").text(martiniDrink[1]);
}
if (buttonPressed === 2 && martiniStep === 3) {
d3.select(".modal-header").text(martiniDrinkSummary[0]);
d3.select(".modal-body").text(martiniDrinkSummary[1]);
}
if (buttonPressed === 1 && martiniStep === 2) {
d3.select(".modal-header").text(martiniStem[0]);
d3.select(".modal-body").text(martiniStem[1]);
}
if (buttonPressed === 2 && martiniStep === 2) {
d3.select(".modal-header").text(martiniStemSummary[0]);
d3.select(".modal-body").text(martiniStemSummary[1]);
}
if (buttonPressed === 3 && martiniStep === 2) {
d3.select(".modal-header").text(martiniDrink[0]);
d3.select(".modal-body").text(martiniDrink[1]);
fillCounties("2010");//put the year and county display to 2010 to match the statisitcs table
// display the statistics table
var peopleTable = tabulate(NMcenthist, ["id","Delta%",
"Area","PopDensity","Unemployed","Job Openings","AvergeWage","TopIndustry" ,"Industry%"]);
d3.select("btn3").attr("hidden",true);
martiniStep = 3
}
if (buttonPressed === 0) { //when screen first loads
martiniStep = 1
buttonPressed = 1
d3.select("#myBtn").text("Tell me again");
}
if (buttonPressed === 1 && martiniStep === 1) {
d3.select(".modal-header").text(martiniBase[0]);
d3.select(".modal-body").text(martiniBase[1]);
}
if (buttonPressed === 2 && martiniStep === 1) {
d3.select(".modal-header").text(martiniBaseSummary[0]);
d3.select(".modal-body").text(martiniBaseSummary[1]);
}
if (buttonPressed === 3 && martiniStep === 1) {
d3.select(".modal-header").text(martiniStem[0]);
d3.select(".modal-body").text(martiniStem[1]);
d3.select("div.play_buttons").attr("hidden",null);
d3.select("div.years_buttons").attr("hidden",null);
fillCounties("1900");//put the year and county display to 1900
buttonLooksPushed("1900")
martiniStep = 2
}
modal.style.display = "block";
}
//Turn on modal for the first time as page loads
var martiniStep=0;
turnOnModal(0);
// Put the SVG on the screen
var svg = d3.select("body")
.append("svg")
// .attr("fill","rgb(254,153,41)") //workaround for fill transition starting at black
.attr("width", width + margin)
.attr("height", height + margin)
.append('g')
.attr('class', 'map')
;
//setup var called years to drive buttons and looping
var years = [];
for(var i = 1900; i < 2011; i += 10) {
years.push(i);
};
// Define the div for the tooltip to appear for counties
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
/*
Use D3 to load the GeoJSON file */
var projection = d3.geo.albersUsa()
.scale(5000)
.translate([1000, -40]);
var path = d3.geo.path().projection(projection);
/* Draw the county outline */
var map = svg.selectAll('path')
.data(geo_data.features)
.enter()
.append('path')
.attr('d', path)
.style('stroke', 'black')
.style('stroke-width', 0.5)
.attr("id", function(d){
var countyLoc = d.properties.name.search("County");
return d.properties.name.slice(0,countyLoc-1);
})
;
/* Add the County names */
var map1 = svg.selectAll("text")
.data(geo_data.features)
.enter()
.append("svg:text")
.text(function(d){
var countyLoc = d.properties.name.search("County");
return d.properties.name.slice(0,countyLoc-1);
})
.attr("fill","rgb(255,255,255)") /* needs to contrast with Quantize scale */
.attr("x", function(d){
return path.centroid(d)[0];
})
.attr("y", function(d){
return path.centroid(d)[1];
})
.attr("text-anchor","middle")
.attr('font-size','8pt')
.attr('fill', "grey") //make county more readable
.attr('width', '30px')
.attr('word-wrap', 'break-word');
;
/* Fill the County relative to population */
//setup javascript map function to lookup values in the incoming csv
var popById = d3.map();
// setup scale to color the counties based on population
var domain = [0,1000,2000,5000,20000,50000,75000,400000, 1000000];
var quantize = d3.scale.threshold()
.domain(domain)
// .domain([0, 665000])
.range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
//create a legend from http://d3-legend.susielu.com/#color-quant
var svg = d3.select("svg");
svg.append("g")
.attr("class", "legendQuant")
.attr("transform", "translate(200,570)");
var legend = d3.legend.color()
.title("Population")
.labels(["not yet in existence"])
.shapeWidth(25)
.shapeHeight(8)
.labelFormat(d3.format(",d"))
.useClass(true)
.scale(quantize);
svg.select(".legendQuant")
.call(legend);
//read csv file of data and cleanup (make numerics numeric)
var NMcenthist = [];
queue()
.defer(d3.csv,"NMcenhist_totals.csv", function(data) //defer waits for file to load
{for (var i = 0; i < years.length; i++) {
data[years[i]] = +data[years[i]];} //takes string and makes it numeric
NMcenthist.push(data);
})
//once file is read proceed to the next (ready) function
.await(ready);
//continue from queue.defer
function ready(error, us) {
if (error) throw error;
console.log(NMcenthist);
//all loaded - set initial year and give a first tooltip to the user
fillCounties("2010");
};
// called to change fill for a different year
function fillCounties(year) {
console.log("changing counties pop to year: " + year)
// Setup lookup from the CSV file
NMcenthist.forEach(function(d) {
popById.set(d.id, +d[year]);
});
//color map based on lookup value
var counties = svg.selectAll("path")
.style("fill-opacity", 0)
.transition().duration(1500) //-----------Timing for smooth color transition
.style("fill", function(d) {
return colorBaseOn(popById.get(d.properties.name)); })
.attr("d", path)
.style("fill-opacity", 1);
//added tootip based on http://bl.ocks.org/d3noob/a22c42db65eb00d4e369
function setupCountyHover(d,t) {
div.transition()
.duration(200)
.style("opacity", .9);
if (popById.get(d.properties.name) < 1) {
div .html(d.properties.name + " had not yet seceded" )
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
} else {
div .html("Population of " + d.properties.name
+" was " + commaFormat(popById.get(d.properties.name)))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
}
}
svg.selectAll("path")
.on("mouseover", function (d){setupCountyHover(d,this)}) //---------Tooltip for county outline
.on("mouseout", function(d) { //turn off tooltip
div.transition()
.duration(500)
.style("opacity", 0);
})
.on("click",function(d) { //-------- On click to highlight rows
var firstWord = d.properties.name.substr(0, d.properties.name.indexOf(" "));
d3.select("tr#" + firstWord) // highlight selected county in the table
.style("background-color","rgb(64,224,208)")
.attr("class","tr-selected");
d3.select("tr#" + firstWord) // highlight selected county in the svg
.style("background-color","rgb(64,224,208)")
.attr("class","tr-selected");
;
});
svg.selectAll("text")
.on("mouseover", function (d){setupCountyHover(d,this)}) //---------Tooltip for county name
.on("mouseout", function(d) { //turn off tooltip
div.transition()
.duration(500)
.style("opacity", 0);
})
.on("click",function(d) { //-------- On click to highlight rows
var firstWord = d.properties.name.substr(0, d.properties.name.indexOf(" "));
d3.select("tr#" + firstWord) // highlight selected county in the table
.style("background-color","rgb(64,224,208)") //NM Turquoise
.attr("class","tr-selected");
;
});
}
//add play button to show each year in turn
var play = d3.select("body")
.append("div")
.attr("class", "play_buttons")
.attr("hidden",true) // hidden until Martini Stage 2
.append("div")
.text("Play")
.attr("id","playpausebtn")
.attr("state","paused")
.attr("playyear",1900)
//add citation at bottom
var cite = d3.select("body")
.append("div")
.attr("class", "citation")
.text("Data Source: U.S. Census Bureau; generated by Jamey McCabe; using American FactFinder; <http://factfinder2.census.gov>; (15 February 2016).")
.style('font-size',"10px")
.attr('fill', "grey")
// The table generation function
function tabulate(data, columns) {
var table = d3.select("body").append("table")
.attr("style", "margin-left: 250px"),
thead = table.append("thead"),
tbody = table.append("tbody");
// append the header row
thead.append("tr")
.selectAll("th")
.data(columns)
.enter()
.append("th")
.text(function(column) { return column; });
// create a row for each object in the data
var rows = tbody.selectAll("tr")
.data(data)
.enter()
.append("tr")
.attr("class","tr-unselected")
.attr("id",function(d) {
var firstWords = [];
// find first word from http://stackoverflow.com/users/603003/comfreek
var firstWord = d.id.substr(0, d.id.indexOf(" "));
return firstWord; //set the ID of row to the first word in county name/data id
})
.on("click",function(d) { //-------- On click to highlight rows
d3.select(this) // highlight selected county in the table
.style("background-color","rgb(64,224,208)") //NM Turquoise
.attr("class","tr-selected");
});
// create a cell in each row for each column
var cells = rows.selectAll("td")
.data(function(row) {
return columns.map(function(column) {
return {column: column, value: row[column]};
});
})
.enter()
.append("td")
.html(function(d) { return d.value; })
;
// setup the filter and clear buttons
d3.select("body")
.append("button")
.attr("id","filterBtn")
.text("filter");
var fBtn = document.getElementById("filterBtn");// Name the filter button
fBtn.onclick = function() { // When the user clicks "Filter" show only the selected tr
d3.select("tr#Median").attr("class","tr-selected");
d3.selectAll(".tr-unselected").attr("hidden",true);
}
d3.select("body")
.append("button")
.attr("id","clearBtn")
.text("clear");
var cBtn = document.getElementById("clearBtn");// Name the clear button
cBtn.onclick = function() { // When the user clicks "Clear"
d3.selectAll(".tr-unselected").attr("hidden",null) //unhide the unslected rows
d3.selectAll(".tr-selected").attr("class","tr-unselected"); //unselect the selected rows
d3.selectAll("tr").style("background-color",null); //change background color off
}
return table;
}
;
// Set play / pause button functionality, Credit: https://www.developphp.com/video/JavaScript/Audio-Play-Pause-Mute-Buttons-Tutorial
//setup variables to control looping display
var playbtn;
var playState = "paused";
// Add Event Handling - provides interupts to start and stop looping
document.getElementById("playpausebtn").addEventListener("click",playPause);
// Function to loop and stop looping
function playPause(){
console.log("play button clicked - state =" + playState)
var playYear = 1900;
var playMs = 2000; //milliseconds pause between years when playing
function nextYear() {buttonLooksPushed(playYear);fillCounties(playYear);playYear+=10;};
d3 //use transition.transition to chain the years
.transition().duration(playMs).each(nextYear)
.transition().duration(playMs).each(nextYear)
.transition().duration(playMs).each(nextYear)
.transition().duration(playMs).each(nextYear)
.transition().duration(playMs).each(nextYear)
.transition().duration(playMs).each(nextYear)
.transition().duration(playMs).each(nextYear)
.transition().duration(playMs).each(nextYear)
.transition().duration(playMs).each(nextYear)
.transition().duration(playMs).each(nextYear)
.transition().duration(playMs).each(nextYear)
.transition().duration(playMs).each(nextYear)
;
}
//add buttons for each year to allow individual selection of a year
var buttons = d3.select("body")
.append("div")
.attr("class", "years_buttons")
.attr("hidden",true) // hidden until Martini Stage 3
.selectAll("div")
.data(years)
.enter()
.append("div")
.attr("class","yrButton")
.attr("id",function(d) {return "b"+d;}) //set id to format "b" + year
.text(function(d) {return d;})
.attr("hidden",true) // hidden until Martini Stage 3
.style("background", "rgb(241,191,0)") /*NM Yellow*/
;
var button2010 = d3.select("#b2010")
.attr("hidden",null) // show 2010 for Stage 1
//setup function to make button looked pushed
function buttonLooksPushed(year) {
d3.select(".years_buttons")
.selectAll("div")
.transition()
.duration(10)
.style("background", "rgb(241,191,0)") /*NM Yellow*/
.style("box-shadow", "");
d3.select("#b" + year)
.transition()
.duration(10)
.style("background", "rgb(170,21,27)") //NM Red
.style("box-shadow", "inset 5px 5px 5px #888888") //button looks pushed in
.style("color", "white");
}
buttons.on("click", function(d) {
buttonLooksPushed(d);
fillCounties(d);
});
};
</script>
</head>
<body>
<script type="text/javascript">
/* Use D3 to load the GeoJSON file */
d3.json("NM_county 1.json", draw);
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
NM_county 1.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
NMcenhist_totals.csv
id area 1900 1910 1920 1930 1940 1950 1960 1970 1980 1990 2000 2010 Delta2000 Delta% Area AreaWater AreaLand PopDensity Unemployed Job Openings AvergeWage TopIndustry Industry% Construction Education and health services Financial activities Information Leisure and hospitality Manufacturing Natural resources and mining Other services Professional and business services Public administration Trade, transportation, and utilities Unclassified TotalQCEWEmployees Beer, wine, and liquor stores Breweries Education and health services Employment placement agencies Hospitals Private households Telecommunications Wireless telecommunications carriers
Bernalillo County, NM 28630 23606 29855 45430 69391 145673 262199 315774 419700 480577 556678 662564 105886 19.02% 1169 3 1166 477 17498 23620 $45,538 Education and health services 27% 17650 83537 15023 7155 40389 12331 283 8715 52513 19244 57163 0 314003 57 20 2848 15 23 868 86 114
Catron County, NM -1 -1 -1 3282 4881 3533 2773 2198 2720 2563 3543 3725 182 5.14% 6929 1 6928 1 106 33 $28,711 Public administration 32% 21 120 0 0 38 19 21 0 5 155 112 491 11 1
Chaves County, NM 4773 16850 12075 19549 23980 40605 57649 43335 51103 57849 61382 65645 4263 6.95% 6075 4 6071 10 1681 2309 $40,187 Education and health services 27% 913 5614 787 248 2919 929 1810 514 1292 984 4796 20806 6 340 2 1 80 7 9
Cibola County, NM -1 -1 -1 -1 -1 -1 -1 -1 -1 23794 25595 27213 1618 6.32% 4542 3 4539 6 645 532 $44,814 Education and health services 22% 95 1509 126 29 1223 72 496 71 561 1296 1328 6806 9 77 1 1 4 1
Colfax County, NM 10150 16460 21550 19157 18718 16761 13806 12170 13667 12925 14189 13750 (439) -3.09% 3768 11 3757 4 337 349 $30,912 Education and health services 26% 209 1298 189 31 1198 116 107 513 144 384 859 5048 58 1 2 12 2
Curry County, NM -1 11443 11236 15809 18159 23351 32691 39517 42019 42207 45044 48376 3332 7.40% 1408 2 1406 32 1017 1289 $39,178 Education and health services 27% 839 4636 634 150 1894 670 1635 490 1356 1044 3516 16864 173 2 2 28 5 6
De Baca County, NM -1 -1 3196 2893 3725 3464 2991 2547 2454 2252 2240 2022 (218) -9.73% 2334 9 2325 1 38 16 N/A Trade, transportation, and utilities 45% 28 57 0 0 19 0 0 0 0 65 138 307 3 13 0
Doña Ana County, NM 10187 12893 16548 27455 30411 39557 59948 69773 96340 135510 174682 209233 34551 19.78% 3815 7 3807 46 6647 4439 $39,680 Education and health services 29% 3449 19280 2534 888 7753 2488 3534 1317 7384 5583 11365 65575 15 0 833 2 9 296 22 21
Eddy County, NM 3229 12400 9116 15842 24311 40640 50783 41119 47855 48605 51658 53829 2171 4.20% 4198 16 4182 12 1553 2124 $37,835 Natural resources and mining 28% 2104 4748 1004 239 2447 883 7675 681 2000 1097 4852 27730 190 1 5 76 10 18
Grant County, NM 12883 14813 21939 19050 20050 21649 18700 22030 26204 27676 31002 29514 (1,488) -4.80% 3968 2 3966 8 810 580 $34,918 Education and health services 44% 381 3336 274 77 963 0 0 205 389 557 1364 0 7546 3 126 2 3 48 4 3
Guadalupe County, NM 5429 10927 8015 7027 8646 6772 5610 4969 4496 4156 4680 4687 7 0.15% 3032 1 3030 2 107 140 N/A Leisure and hospitality 32% 38 339 22 0 381 0 0 16 4 119 287 1206 27 1 1
Harding County, NM -1 -1 -1 4421 4374 3013 1874 1348 1090 987 810 695 (115) -14.20% 2126 1 2125 0 23 5 N/A Natural resources and mining 38% 0 0 0 3 0 18 0 0 8 18 47 3
Hidalgo County, NM -1 -1 4338 5023 4821 5095 4961 4734 6049 5958 5932 4894 (1,038) -17.50% 3446 0 3446 2 127 59 N/A Public administration 28% 14 372 0 14 184 0 136 0 59 401 273 1453 3 21 3
Lea County, NM -1 -1 3545 6144 21154 30717 53429 49554 55993 55765 55511 64727 9216 16.60% 4394 1 4393 13 2200 1606 $47,549 Natural resources and mining 28% 3280 4829 1157 299 2881 976 9337 843 2334 843 6540 33319 6 158 2 3 28 10 21
Lincoln County, NM 4953 7822 7823 7198 8557 7409 7744 7560 10997 12219 19411 20497 1086 5.59% 4831 0 4831 4 497 336 $31,698 Leisure and hospitality 29% 333 1114 304 78 1883 58 79 196 431 467 1468 6411 6 85 1 1 24 4 3
Los Alamos County, NM -1 -1 -1 -1 -1 10476 13037 15198 17599 18115 18343 17950 (393) -2.14% 109 0 109 168 337 1182 $85,400 Professional and business services 74% 173 950 405 50 576 55 282 10492 486 663 14132 75 1 44 1
Luna County, NM -1 3913 12270 6247 6457 8753 9839 11706 15585 18110 25016 25095 79 0.32% 2965 0 2965 8 1868 396 $30,667 Education and health services 24% 234 1765 169 0 926 879 863 0 231 884 1487 0 7438 6 81 1 1 12 2
McKinley County, NM -1 12963 13731 20643 23641 27451 37209 43208 56449 60686 74798 71492 (3,306) -4.42% 5455 6 5449 14 2092 1439 $53,616 Education and health services 39% 570 7815 613 186 3021 524 41 441 606 2039 4198 2 20056 15 189 1 3 12 10 15
Mora County, NM 10304 12611 13915 10322 10981 8720 6028 4673 4205 4264 5180 4881 (299) -5.77% 1933 2 1931 3 207 22 N/A Education and health services 32% 0 134 16 0 36 0 48 22 0 41 122 419 23 4 1
Otero County, NM 4791 7069 7902 9779 10522 14909 36976 41097 44665 51928 62298 63797 1499 2.41% 6627 1 6627 9 1352 1296 $43,603 Education and health services 26% 1206 4197 519 239 1871 177 190 414 1996 2278 2926 16013 3 183 1 1 36 10 6
Quay County, NM -1 14912 10444 10828 12111 13971 12279 10903 10577 10823 10155 9041 (1,114) -10.97% 2882 7 2875 4 213 214 $39,666 Education and health services 29% 166 737 103 11 482 31 40 84 87 231 608 2580 49 1 1 4 2 3
Rio Arriba County, NM 13777 16624 19552 21381 25352 24997 24193 25170 29282 34365 41190 40246 (944) -2.29% 5896 38 5858 7 1244 871 $41,813 Education and health services 31% 317 2902 187 58 1340 117 115 168 378 2453 1399 9434 6 2 157 1 1 12 3 6
Roosevelt County, NM -1 12064 6548 11109 14549 16409 16198 16479 15695 16702 18018 19846 1828 10.15% 2455 6 2449 7 405 328 $27,736 Education and health services 24% 211 1284 147 66 601 454 871 88 174 226 1190 5312 6 2 56 1 12 2
Sandoval County, NM -1 8579 8863 11144 13898 12438 14201 17492 34799 63319 89908 131561 41653 46.33% 3714 5 3709 24 4289 2835 $50,265 Education and health services 25% 3894 12576 1400 381 5432 1320 6966 1245 2468 3391 10724 49797 9 377 1 9 48 17 30
San Juan County, NM 4828 8504 8333 14701 17115 18292 53306 52517 81433 91605 113801 130044 16243 14.27% 5538 24 5514 21 795 424 $43,021 Education and health services 54% 224 4287 273 44 887 102 47 117 165 450 1352 7948 3 2 133 1 4 24 3
San Miguel County, NM 22053 22930 22867 23636 27910 26512 23468 21951 22751 25743 30126 29393 (733) -2.43% 4736 19 4717 6 3823 2073 $38,093 Education and health services 21% 1714 5998 851 676 5240 3447 111 568 3825 2408 4032 28870 9 2 328 2 2 68 11 15
Santa Fe County, NM 14658 14770 15030 19567 30826 38153 44970 53756 75360 98928 129292 144170 14878 11.51% 1911 2 1909 68 3751 4114 $48,000 Education and health services 23% 2738 13867 2505 912 10852 839 274 2508 4612 9861 11040 60008 39 4 810 11 8 708 17 18
Sierra County, NM 3158 3536 4619 5184 6962 7186 6409 7189 8454 9912 13270 11988 (1,282) -9.66% 4236 56 4180 3 361 158 $53,961 Education and health services 28% 200 860 83 19 441 77 407 79 80 319 514 3079 49 1 1
Socorro County, NM 12195 14761 14061 9611 11422 9670 10168 9763 12566 14764 18078 17866 (212) -1.17% 6649 2 6646 3 474 483 $44,594 Education and health services 35% 74 1471 85 15 650 115 262 48 364 437 725 4246 72 1 1 16 4
Taos County, NM 10889 12008 12773 14394 18528 17146 15934 17516 19456 23118 29979 32937 2958 9.87% 2205 1 2203 14 1217 788 $32,832 Leisure and hospitality 27% 572 2687 436 136 2776 141 239 226 470 856 1683 10222 9 2 174 1 1 60 5 3
Torrance County, NM -1 10119 9731 9269 11026 8012 6497 5290 7491 10285 16911 16383 (528) -3.12% 3346 1 3345 5 466 133 $30,343 Education and health services 33% 135 1032 45 20 265 135 148 38 277 218 819 3132 6 46 3
Union County, NM 4528 11404 16680 11036 9095 7372 6068 4925 4725 4124 4174 4549 375 8.98% 3831 1 3830 1 74 134 N/A Education and health services 27% 0 310 76 39 175 0 117 43 33 109 229 1131 3 17 1 1
Valencia County, NM 13895 13320 13795 16186 20245 22481 39085 40539 61115 45235 66152 76569 10417 15.75% 1068 1 1068 62 1994 656 $44,764 Education and health services 32% 810 4205 455 104 1416 530 167 239 637 925 3518 13006 15 178 1 24 5 3
Median 2.41% 3768 2 3757 7 795 532 $40,187 Education and health services 28% 234 1765 273 62 1198 117 158 196 389 557 1364 0 7546 6 2 85 1 1 26 4 9
0.3217612456
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment