Choropleth maps should have legends that reflect their linear binned data, not categorical legends. This gist explains how to make them in datawrapper.
Datawrapper accepts some custom HTML but does not allow divs. Luckily we can use slightly hacky HTML using <span>
instead of <div>
with inline CSS to make a linear legend. If you're not using Datawrapper please use good semantic HTML and non-inline CSS with classes instead!
The code in datawrapper-linear-legend.html essentially has a row of rectangles with background colors, then a separate row below it with appropriately-spaced labels. It also includes a row for a separate N/A label for use where applicable.
To customize this code, replace the hex codes with your colors. Adjust the number of breaks by adding or removing spans in the rectangle and label rows. Adjust the width
values in the inline CSS to be 1/number of breaks. In this example, that's 1/6, 16.66667%.
This example has a max width set on the entire legend, which can be adjusted or removed for a full-width legend as desired.
First, pre-compute your map breaks to make sure your map uses exactly the breaks you want. Code in get-uninsured-rate.R creates a color_group column to use here. Datawrapper's map breaks tool currently is imprecise, so it can be very tough to set breaks correctly. I find it much easier to precompute the data. You'll need to include a linear field in your data upload but then can switch to using your categorical pre-computed breaks in the "Refine" tab.
Then make sure to hide the default key, since you'll be entering one manually.
Next, you'll enter your legend manually in the Annotate tab in the Description field. If you have a subtitle you can enter that first, then <br>
, then add your legend.