DataMade: Developer Position Coding Challenge by Grant Russell

[grantongrant]

Branched from main

Overview

This PR completes the DataMade React Map code challenge. It implements a map of Chicago community areas shaded by the number of new restaurant permits issued in a given year, with interactive popups, a year filter, and summary stats.

Changes / Additions

• Supplements each community area obj with number of permits in given year in map/serializers.py.
  • area_id added as a field to CommunityAreaSerializer. The frontend uses area_id rather than name to key and look up community area data.
• Fetches and displays permit data with with percentage shading in map/static/js/RestaurantPermitMap.js.
  • useEffect sets the current year's data and builds an area data map for O(1) lookup.
  • Completes getColor() to set community area shading (the darker the color, the more permits per area)
  • Completes setAreaInteraction().
    • shades each community area according to what percentage of permits were issued there in the selected year.
    • on hover, displays a popup with the community area's raw permit count for the year.
• Adds test for map-data endpoint in tests/test_views.py.

• Includes a test

Demo

Notes

See changed files for any notes / comments.

Testing Instructions

• Clone the repo and check out to feature/grant/permit-map-challenge
• Rebuild the containers (refer to README.md for instructions)
• Visit http://localhost:8000/ and confirm:
  • Chicago community areas are displayed as shaded polygons on the map
  • Areas with more permits appear darker
  • Hovering or clicking a community area shows a popup with details
  • The year filter (2016–2026) updates the map and summary stats
  • Total permits and max permits for any one area are displayed
• Run docker compose -f docker-compose.yml -f tests/docker-compose.yml run --rm app
  • Expected: all tests pass

[grantongrant]

I veered slightly from the instructions, but I took inspiration from the TODO example object in get_num_permits. I would prefer to include the area_id for use on the frontend. I checked the raw data, and while it appears clean, it's just better practice to match on an id if one is present.

[grantongrant]

I veered slightly from the instructions here as well. I added a state variable to map the area data on the same fetch response as setting the current year data. I'm storing the fetched data in two shapes for convenience, as they serve two different purposes.

currentYearData is the array, used for computing totalNumPermits and maxNumPermits with .reduce()

areaDataMap is the same data keyed by area_id, used for fast lookups in setAreaInteraction where we need to find a specific area by its ID.