Color Coded Hot Map

[dilanurbayraktar]

Color Coded Hot Map

Summary 💻

Welcome back from break! Hope you had an amazing Thanksgiving with delicious food 🦃🥧

We have one final task for you this semester: color coding the hot map.

If you go to main/page.tsx, you will see that we already have the hot map implemented that displays the monthly/yearly data in pop-up boxes. However, it's missing some color.

When we showed Rachel your amazing hot maps, she really liked how you could tell the differences in distributions per city from the colors. So for this ticket, we want you guys to implement the boundaries API (src/app/api/cities/boundaries/route.ts), which will return the boundary points of a city. With this, we can not only show the centroid but also separate different cities from each other on the hot map.

Step 1: Implement the Boundaries API

Your first task is to complete the boundaries API route so that it returns the boundary points for each city.
This will allow the hot map to display actual city borders, not just single points.

Once done, connect this data in main/page.tsx so each city is rendered with its full boundary shape.

Step 2: Apply Color Coding

Once the borders are set, think about how you can reflect the change in distributions using a color scale.

Valentina and Ashton did a great job at this for their Creative Hot Map ticket, so feel free to check their implementation out:

• Live demo: https://beantown-baby-diaper-bank.vercel.app/sprint3
• Code: https://github.com/JumboCode/beantown-baby-diaper-bank/blob/main/src/components/sprint3/AshValentinaMap.tsx

Your goal:

• Use shades of blue that go with Rachel’s brand guidelines
• Represent distribution intensity using color
• Lighter shades represent lower distribution
• Darker shades represent higher distribution

You can reference the Figma for exact HEX codes:
https://www.figma.com/design/akdggMRcBm96yq439ALN2D/Beantown-Baby-Diaper-Bank--%7C-JumboCode-%7C-25---26?node-id=6308-393&t=1O1aHLTeLDENVbgi-0

This is the style we’re going for:

Additional Notes

• As the user switches between monthly and yearly modes and moves the timeline slider, the color scale should update to reflect the distribution of that selected month/year.
• Make sure the pop-up boxes still work with the boundary polygons. You should not have to change anyting for the pop-up boxes as they use the centroid data.

Deliverables 🚀

• Schedule at least two meetings as a pair
• Create a new branch using the "create a branch" button
• Implement the boundaries API (src/app/api/cities/boundaries/route.ts)
• Update the hot map in main/page.tsx to display city boundaries instead of just centroids
• Apply a brand-consistent blue color scale based on distribution data
• Open a PR and request review from @coopergolemme

Wireframe 🎨

Tips for success 📈

Where to get help!

Reach out to @dilanurbayraktar and @coopergolemme .