Skip to content
cartokit cartokit cartokit Docs

Step 3: Styling the choropleth

cartokit’s Properties Panel provides flexible controls for fine-tuning the display of your data.

With our choropleth layer in place, let’s style it to match the D3 map. This will be a five-step process.

  1. Remove the default Stroke. 2. Increase the Fill Opacity to 100%. 3. Adjust the Color Scheme to a sequential white-to-blue palette. 4. Increase the number of Steps to 9. 5. Use a Manual classification method to match the D3 map’s breaks exactly.

Here’s what that’ll look like.

With these changes, we’re 95% of the way there. As a final step, let’s overlay state boundaries on top of our choropleth layer. Re-open the Add Layer Modal by clicking the button in the Layers panel and enter the following url into the Endpoint field:

https://storage.googleapis.com/cartokit-datasets/us-states.json

This layer is a redistribution of the US Census Bureau’s 2023 Cartographic Boundary Files. Give the layer a display name, such as “States”, in the Display Name field, and click the Add button to add the layer to the map. Finally, click on a state to open the Properties Panel of the States layer, remove the layer’s Fill and set its Stroke to white.

With that, we’ve arrived at a perfect replication of the original D3 map. Better yet, cartokit has been updating our program on every change, ensuring the code and the UI stay in sync. Let’s get that code out of cartokit and running in our own development environment.