Case Study US County Choropleth

Date
May 2022
Client
Kenneth B., statistical researcher

An interactive, movable and zoomable map of all United States counties, each of which can be selected and assigned into color-coded groups that list the population of each county as well as of the total region. The app was built for a client doing statistical research.

More Live Code

Tech Stack

  • D3.js icon D3.js
  • Vue.js icon Vue.js
  • JavaScript icon JavaScript
  • CSS icon CSS
  • HTML icon HTML
The map of US counties and its basic interactivity - panning, zooming, and county selection - was built using the D3 JavaScript library. The user interface surrounding the map - such as the sidebar displaying the statistics or the save and load modals - were made with the help of Vue.js.
Interactive map of US counties - with none selected yet.
Zoom

Interactive Map

The main page of the app features an interactive map of all US counties, which the user can pan around and zoom in and out of.

Interactive map of US counties - with several selected in varrying colors - as well as a sidebar displaying population data about the color-coded counties.
Zoom

Color-Coded Selections

When the 'Selecting' checkbox at the top is on, the user can click on counties to select them. Each selected county is placed inside a group with counties that were marked with the same color. These groupings appear on the sidebar, to the right of the map, and feature populations for each county, as well as the total population for the group. Each group can also be assigned a custom name. To create a new group or return to a previously applied color, the user can choose from the color picker options at the top of the sidebar.

Modal for generating a code that the user can save in order to load the current map selections on a different session.
Zoom

Saving Maps

The option in the top-right corner of the navbar opens a modal, which can be used to save the current map. As the app isn't running a database, the save function works by generating a shortcode, which represents all current selections. The user can then save this code on their computer - in a text file, for example.

Modal for loading a previous map section using a save code.
Zoom

Loading Maps

Another option in the top-right corner of the navbar open the load modal, where a user can input a previously-saved shortcode to re-generate an older map.