Interactive, drop-down selection choropleth

Readme.md

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

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" }]

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>

thumbnail.png