Skip to content

Instantly share code, notes, and snippets.

@feyderm

feyderm/Readme.md

Last active January 21, 2017 05:25
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 feyderm/e6cab5931755897c2eb377ccbf9fdf18 to your computer and use it in GitHub Desktop.
Save feyderm/e6cab5931755897c2eb377ccbf9fdf18 to your computer and use it in GitHub Desktop.
Download ZIP
Interactive, drop-down selection choropleth
Raw
Readme.md

Data: Workforce and Economic Development (2010-2013) from Open Baltimore

Raw
dropdown_options.js
var dropdown_options = [
{ value: "empl13",
text: "Percent Population 16-64 Employed: 2008-2013" },
{ value: "unempl13",
text: "Percent Population 16-64 Unemployed and Looking for Work: 2008-2013" },
{ value: "nilf13",
text: "Percent Population 16-64 Not in Labor Force: 2008-2013" },
{ value: "unempr13",
text: "Unemployment Rate: 2008-2013" },
{ value: "lesshs13",
text: "Percent Population (25 years and over) With Less Than a High School Diploma or GED: 2008-2013" },
{ value: "hsdipl13",
text: "Percent Population (25 years and over) With High School Diploma: 2008-2013" },
{ value: "somecol13",
text: "Percent Population (25 years and over) with Some College or Bachelor's Degree or Higher: 2008-2013" },
{ value: "numbus10",
text: "Total Number of Businesses: 2010" },
{ value: "numbus11",
text: "Total Number of Businesses: 2011" },
{ value: "numbus12",
text: "Total Number of Businesses: 2012" },
{ value: "numbus13",
text: "Total Number of Businesses: 2013" },
{ value: "biz1_10",
text: "Percent of Businesses that are 1 year old or less: 2010" },
{ value: "biz1_11",
text: "Percent of Businesses that are 1 year old or less: 2011" },
{ value: "biz1_12",
text: "Percent of Businesses that are 1 year old or less: 2012" },
{ value: "biz1_13",
text: "Percent of Businesses that are 1 year old or less: 2013" },
{ value: "biz2_10",
text: "Percent of Businesses that are 2 years old or less: 2010" },
{ value: "biz2_11",
text: "Percent of Businesses that are 2 years old or less: 2011" },
{ value: "biz2_12",
text: "Percent of Businesses that are 2 years old or less: 2012" },
{ value: "biz2_13",
text: "Percent of Businesses that are 2 years old or less: 2013" },
{ value: "biz4_10",
text: "Percent of Businesses that are 4 years old or less: 2010" },
{ value: "biz4_11",
text: "Percent of Businesses that are 4 years old or less: 2011" },
{ value: "biz4_12",
text: "Percent of Businesses that are 4 years old or less: 2012" },
{ value: "biz4_13",
text: "Percent of Businesses that are 4 years old or less: 2013" },
{ value: "smlbus10",
text: "Number of Businesses with Under 50 Employees: 2010" },
{ value: "smlbus11",
text: "Number of Businesses with Under 50 Employees: 2011" },
{ value: "smlbus12",
text: "Number of Businesses with Under 50 Employees: 2012" },
{ value: "smlbus13",
text: "Number of Businesses with Under 50 Employees: 2013" },
{ value: "totemp10",
text: "Total Number of Employees: 2010" },
{ value: "totemp11",
text: "Total Number of Employees: 2011" },
{ value: "totemp12",
text: "Total Number of Employees: 2012" },
{ value: "totemp13",
text: "Total Number of Employees: 2013" },
{ value: "wrkout10",
text: "Percent of the Population that Work Outside of the City: 2010" },
{ value: "wrkout11",
text: "Percent of the Population that Work Outside of the City: 2011" },
{ value: "banks11",
text: "Number of Banks and Bank Branches per 1,000 Residents: 2011" },
{ value: "banks12",
text: "Number of Banks and Bank Branches per 1,000 Residents: 2012" },
{ value: "banks13",
text: "Number of Banks and Bank Branches per 1,000 Residents: 2013" },
{ value: "comprop10",
text: "Total Number of Commercial Properties: 2010" },
{ value: "comprop11",
text: "Total Number of Commercial Properties: 2011" },
{ value: "comprop12",
text: "Total Number of Commercial Properties: 2012" },
{ value: "comprop13",
text: "Total Number of Commercial Properties: 2013" },
{ value: "crehab10",
text: "Percent of Commercial Properties with Rehab Permits Above $5,000: 2010" },
{ value: "crehab11",
text: "Percent of Commercial Properties with Rehab Permits Above $5,000: 2011" },
{ value: "crehab12",
text: "Percent of Commercial Properties with Rehab Permits Above $5,000: 2012" },
{ value: "neibus10",
text: "Neighborhood Businesses per 1,000 residents (NAICS Sectors): 2010" },
{ value: "neibus11",
text: "Neighborhood Businesses per 1,000 residents (NAICS Sectors): 2011" },
{ value: "neibus12",
text: "Neighborhood Businesses per 1,000 residents (NAICS Sectors): 2012" },
{ value: "neibus13",
text: "Neighborhood Businesses per 1,000 residents (NAICS Sectors): 2013" },
{ value: "neiemp10",
text: "Total number of Employees by Selected Neighborhood Industry (NAICS Sectors): 2010" },
{ value: "neiemp11",
text: "Total number of Employees by Selected Neighborhood Industry (NAICS Sectors): 2011" },
{ value: "neiemp12",
text: "Total number of Employees by Selected Neighborhood Industry (NAICS Sectors): 2012" },
{ value: "neiemp13",
text: "Total number of Employees by Selected Neighborhood Industry (NAICS Sectors): 2013" },
{ value: "neiind10",
text: "Number of Businesses by Selected Neighborhood Industry (NAICS Sectors): 2010" },
{ value: "neiind11",
text: "Number of Businesses by Selected Neighborhood Industry (NAICS Sectors): 2011" },
{ value: "neiind12",
text: "Number of Businesses by Selected Neighborhood Industry (NAICS Sectors): 2012" },
{ value: "neiind13",
text: "Number of Businesses by Selected Neighborhood Industry (NAICS Sectors): 2013" }]
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
#tooltip {
font-family: sans-serif;
color: #454545;
}
#dropdown {
margin-bottom: 20px;
margin-right: 35px;
}
h3, h5 {
margin: 0;
}
</style>
<script src = "https://feyderm.github.io/d3/d3.js"></script>
<script src = "https://feyderm.github.io/js/viridis_colors.js"></script>
<script src = "dropdown_options.js"></script>
</head>
<body>
<!-- dropdown -->
<select id="dropdown"></select>
<!-- checkbox to include/exclude downtown (if min or max) -->
<label><input type="checkbox" id = "downtown" value = "include" checked>Include Downtown</label>
<!-- neighborhood and its value -->
<div id = "tooltip">
<h3><span id = "neighborhood">&nbsp;</span></h3>
<h5><span id = "datum">&nbsp;</span></h5>
</div>
<!-- map -->
<div id="block"></div>
<script>
// populate drop-down
d3.select("#dropdown")
.selectAll("option")
.data(dropdown_options)
.enter()
.append("option")
.attr("value", function(option) { return option.value; })
.text(function(option) { return option.text; });
// initial dataset on load
var selected_dataset = "empl13";
var w = 700,
h = 650;
var svg = d3.select("#block")
.append("svg")
.attr("height", h)
.attr("width", w);
var projection = d3.geo.mercator()
.center([-76.6180827, 39.323953])
.scale([140000])
.translate([270, 165]);
var path = d3.geo.path()
.projection(projection);
// first of two scales for linear fill; ref [1]
var fill_viridis = d3.scale.linear()
.domain(d3.range(0, 1, 1.0 / (viridis_colors.length - 1)))
.range(viridis_colors);
// second of two scales for linear fill
var norm_fill = d3.scale.linear()
.range([0,1]);
var geojson = "https://feyderm.github.io/data/Workforce and Economic Development (2010-2013) - Shape.geojson";
d3.json(geojson, function(json) {
plot = svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.attr("stroke", "#808080")
.attr("fill", "#b3b3b3")
.call(updateFill, selected_dataset)
.on("mouseover", function(d) { displayData(d); })
.on("mouseout", hideData);
});
// dropdown dataset selection
var dropDown = d3.select("#dropdown");
dropDown.on("change", function() {
// newly selected dataset includes downtown
d3.select("#downtown")
.property("checked", true);
checked = true;
selected_dataset = d3.event.target.value;
plot.call(updateFill, selected_dataset)
});
// checkbox to include/exclude downtown
var checkbox = d3.select("#downtown");
checkbox.on("change", function() {
checked = !checked;
if (checked == false) {
plot.call(updateFillxDt, selected_dataset);
}
else {
plot.call(updateFill, selected_dataset);
}
});
function displayData(d) {
d3.select("#neighborhood")
.text(d.properties.csa2010)
d3.select("#datum")
.text(parseFloat(d.properties[selected_dataset]).toFixed(2));
}
function hideData() {
d3.select("#neighborhood")
.text("\u00A0");
d3.select("#datum")
.text("\u00A0");
}
function updateFill(selection, selected_dataset) {
var d_extent = d3.extent(selection.data(), function(d) {
return parseFloat(d.properties[selected_dataset]);
});
rescaleFill(selection, d_extent);
}
function updateFillxDt(selection, selected_dataset) {
var d_wo_downtown = selection.data()
.filter(function(d) {
return d.properties.csa2010 != "Downtown/Seton Hill";
});
d_extent_wo_downtown = d3.extent(d_wo_downtown, function(d) {
return parseFloat(d.properties[selected_dataset]);
});
rescaleFill(selection, d_extent_wo_downtown)
}
function rescaleFill(selection, d_extent) {
norm_fill.domain(d_extent)
selection.transition()
.duration(700)
.attr("fill", function(d) {
var datum = parseFloat(d.properties[selected_dataset]);
return fill_viridis(norm_fill(datum));
});
}
// references
// [1] http://stackoverflow.com/questions/17671252/d3-create-a-continous-color-scale-with-many-strings-inputs-for-the-range-and-dy
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment