- Category: Random Programs
- Published: Tuesday, December 01 2020 03:24
- Hits: 459
Creating a Choropleth Map in D3.js
I have been asked by my wife to take data about the California Beauty license count and turn it into a choropleth map. This is a map that uses regional colors to indicate different values. In my case the map will show how many licenses were issued in the state of California Board of Barbering and Cosmetology (BBC) broken down by county. Here is an example of a choropleth map from scribblelive.com
It is a trivial task in a modern Business Intelligence application like Tableau or Power BI, but those cost money that I didn't want to spend on this. I love my wife more than life itself, but this project isn't going to be reimbursed by anyone. So I dug around and have determined that D3.js is the best tool for the job. The thing that got me really hung up was my poor web programming skills. I started this in late August and have only just completed it to the point where it is generally usable.
The project has these basic steps:
1. Save data as JSON file
2. Get county boundaries in JSON file.
3. Convert county boundaries into a GeoJSON file.
4. If necessary, reduce the size of the GeoJSON file using a service like https://mapshaper.org/.
In the program/web page:
1. Load the BBC data into memory
2. Render a map of California with the county boundaries
3. Color each county according to the number of a type of license or the total number of licenses
There are some things that still aren't done. There is a great deal of skew in the data, on average about 4.5 for every license type. A skew greater than +1 or less than -1 is considered large. The reason for this is that 4 or 5 counties hold most of the licenses in every category. I used code to keep a list of counties to not include in the range for the colors, they end up getting the high color, and leaving the rest to lay where they are.
Lets look at the code. First the web page. A note that my choice for the webpage is not necessarily the best D3 way to do it. Other people have a lot less specified HTML tags. I kept this because I wanted to sharpen my meager HTML skills. Anyway here is some boiler plate stuff and the script calls:
Like it on Facebook, +1 on Google, Tweet it or share this article on other bookmarking websites.