Outlier Editor

How to make custom maps — even if you don’t know how to code

—

by

Gemma Ritchie
in ,

When programs like Flourish or Datawrapper don’t have the map format you want, you can make a custom map even if you don’t know how to code. And it’s actually pretty easy.

What you need:

  • A file with your geodata
  • mapshaper.org
  • Flourish, if you need to merge data onto your map
  • Or, if you just need a map image without merging data onto it, you can use Figma, Adobe Illustrator, Adobe XD or Photoshop to add colour

First work out what kind of map you want to make. In my case, I needed a map of South Africa showing the local municipalities so I could mark which municipalities were run by a particular political party.

Getting the data

I used the UN’s OCHA data.Humdata.org and found the geodata set, Subnational Administrative Boundaries. According to its description, this geodata had ‘South Africa administrative levels 0 (country), 1 (province), 2 (district), and 3 (local municipality) boundaries.’ Under data and resources, I downloaded the zipped file ‘zaf_adm_sadb_ocha_20201109_SHP.zip’ from the SA page.

Here are a few things to think about when picking your geodata:

  • Not all map data is equal, so be sure to check when your map was last updated — especially in the run-up to elections.
  • Maps require several elements, in the form of files. So don’t be afraid when you have to import four or five files for the next step.
  • If you are unsure which zip file is correct, use the following steps to visualise the map quickly in mapshaper.org to make sure you have the right data.

Making the map

In our zip file, there is data for the country, provinces, district and local boundaries and a series of files that contains all of these boundaries.

So, let’s look for the file that has the information we need. In our case, the number 3 corresponded to data for local municipality boundaries so we chose the file with ‘adm3’ in the filename.

Once you’ve identified the files you need — these will end with .shp, .shx, .sbx, .sbn, .prj, .dbf, .cpg — drag them into Mapshaper and choose the option to ‘import all’.

You’ll know quickly if you are importing the wrong file or are missing one or two. You will either have no map in Mapshaper or, for example, if you just import the shape file, you will have the map’s geometry, but you won’t have any of the underlying data to help you merge the map with a dataset.

With the correct files imported, you’ll have your map. But it might be pretty big because of the level of detail, so you can simplify it in mapshaper.org to as small as 10% or less by using the simplify tool.

This is my experience working with the South African map. In other maps, the amount you can simplify before it becomes unrecognisable may vary quite a bit. If you simplify the map to zero, for example, you will have an abstract simplification of your map.

Now you can download your map as a .svg and begin working with it in design programs such as Figma or Adobe Illustrator.

But if you want to merge a lot of data onto the map, download it as a geo.JSON file and then head over to Flourish.

Using Flourish

In Flourish, look for the ‘Blank Map’ option. Once you have selected it, drag your downloaded .geoJson file onto Flourish’s ‘Data’ section.

You’ll find four tabs: ‘Regions’, ‘Regions Geometry’, ‘Points’ and ‘Lines’.

If you are making a choropleth map (where parts are in certain colours to visualise an idea), you only need to worry about the ‘Regions’ and ‘Regions Geometry’ tab when you upload your map. But if you want bubbles (or other shapes) to visualise, say, population density or the number of children in schools, then you will need to use the ‘Points’ tab.

Making a choropleth map

  • Add your geoJSON information to ‘Regions’ and ‘Regions Geometry’.
  • In ‘Regions Geometry’, select which parts of the map will be visualised (geometry) and matched to the data (IDs).
  • Next, drag your data in .csv or .xls into Flourish’s ‘Regions’ and select the option to ‘Merge’.

Flourish will automatically select the columns most likely to match. In this case, when my team and I made the dataset with the governing party in each municipality (over 200 rows of data), we not only had the name of the municipality but the municipal code, which is a combination of letters and numbers. Flourish also gives you the option to overwrite its suggestions and instead merge the data on two columns that you chose from each dataset.

In this same ‘Merge’ dialogue box, you will also get several other options to select from. These options ask whether you want to keep the unmatched data from the current dataset and merge it without a match from your incoming dataset.

I like to keep all the data as that will tell me pretty quickly if I made a mistake like merging the dataset with the wrong columns or if there is missing data or misspelt variables.

In our example, Flourish used the municipal code from the map data and from our own data to join the two datasets.

So now you have your map and your merged data. But in the preview, your map may look pretty small. This is because Flourish’s automatic setting is to frame the map in a world view. If you change the map to ‘Auto’, Flourish will reframe your map to fit the border around it.

Now you can adjust the colours of your regions and add a heading, subheading and footer in the ‘Preview’ part of Flourish.

We even added a drop shadow, which can be found as an option in the ‘Regions Layer’.

Making a map with bubbles

To do this, you will need to use the ‘Points’ tab instead.

When we used the ‘Regions’ tab, we needed columns with identical pointers that could be joined along the column named ‘Municipal code’. This time, we needed to make sure we had latitude and longitude coordinates in separate columns.

Like we did in the previous example, you will download your .csv but, this time, overwrite your data in the ‘Points’ tab.

When it comes to editing your bubbles map, you need to look at your ‘Points Layer’ in the ‘Preview’ section of Flourish.

Because I didn’t need to have different size variables, I just needed the same sized dot in different colours so I only edited the ‘Maximum Radius’ section of the ‘Points Layer’.

When you are finished making a map in Flourish, use the ‘Export & Publish’ button in the top right-hand corner to either download your map as a .svg, .jpg or .png or to make it into a shareable link.

Notebook