You have officially built a hexbin map, and that was indeed the key focus of this chapter. However, in this last section, let’s leisurely consider how we might make this more engaging and informative for ourselves and our users. We won’t go into as much detail as in the previous sections, but will go through general steps about how to improve the app.
Here’s a list of what we can do:
- Show the markets in a list on hover.
- Let the user change the hexagon size.
- Let the user change the exponent for the color scale interpolator.
- Show which markets sell specific products, e.g. cheese, wine, seafood, etc.
- Encode a second variable as hexagon size.
The first is standard. The second and third point would be very helpful for exploration of the data. The fourth point is indeed possible, as the data also covers variables specifying what products each market sells. The last point would be good for our own practice with the d3.hexbin() module.
We won’t go into detail of each of these points, but do take a look at the finished app at https://larsvers.github.io/learning-d3-mapping-11-8. The code is commented and available as example 11_08.html in the Chapter 11 folder at https://github.com/larsvers/Learning-D3.js-4-Mapping.