D3 Examples - IN PROGRESS: Census API county mapper

IN PROGRESS: Census API county data mapper

The goal of this app is to make calls to the Census API, return county-level demographic data, and display that on a D3.js choropleth map. The data would be limited to categories that could be displayed in percentages (data returned/total population) through a dropdown menu. If I can get this up and running, I would also like to allow users to search by county with autocomplete text and to toggle between a choropleth map and a porportional bubble map.

Project to-dos

~~Make AJAX calls to get total population data by county and initial demographic data~~

~~Draw D3 county map~~

~~Color map based on demographic data~~

~~Set up dropdown and pass value variable to AJAX call to pull corresponding demographic data~~

~~Add in more demographic variables~~

~~Tie county data points to tooltip on hover and align tooltip to left or right depending on X position~~

~~Draw circles~~

~~Create toggle for proportional bubble map instead of choropleth coloring~~

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title>Census county API</title>
​
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="wrapper">
    <div class="header-container">
      <h2>County data mapper</h2>
      <p>This app uses the <a href="https://api.census.gov/">Census API</a> to display county-level choropleth and porportional bubble maps.</p>
      <select class="demo-dropdown">
        <option selected disabled>Pick a demographic</option>
      </select>
      <form class="search-container">
        <p>Search for a county</p>
        <input type="text" class="county-search" name="county-search">
      </form>
      <div class="toggle-container">
        <p>Show bubbles</p>
        <label class="switch noBubble">
          <input disabled type="checkbox">
          <span class="slider round"></span>
        </label>
      </div>
    </div>
​
    <div class="map-container">
    </div>
    <div class="gradient-bar"></div>
    <div class="gradient-separations-container">
      <div class="separations"></div>
      <div class="separations"></div>
      <div class="separations"></div>
      <div class="separations"></div>
    </div>
  </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="https://d3js.org/d3-queue.v1.min.js"></script>
    <script type="text/javascript" src="https://d3js.org/topojson.v1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>
​
    

IN PROGRESS: Census API county mapper

IN PROGRESS: Census API county data mapper

Tools used

Technical requirements

Project to-dos