How to create a

United States map.

Learn how to create a crisp, zoomable US state map in minutes with Datawrapper.

What You'll Learn


Formatting the data

How does the data need to be formatted to be correctly recognized by Datawrapper?


Creating the map

How to create the map with Datawrapper?


Making it your own

How to customize the map with additional data, highlighting and your own tooltips.

Formatting the data

Creating a map works similar to creating a regular chart inside Datawrapper. First, click here to create your chart. Your dataset has to include a column with the 2-Letter-ISO-Code of the states in order for the map to render. This is a valid example dataset:

[["ISO","Name","Value"],["AL","Alabama","59"],["AK","Alaska","93"],["AS","American Samoa","93"],["AZ","Arizona","37"],["AR","Arkansas","40"],["CA","California","92"],["CO","Colorado","85"],["CT","Connecticut","71"],["DE","Delaware","53"],["DC","District Of Columbia","81"],["FM","Federated States Of Micronesia","66"],["FL","Florida","6"],["GA","Georgia","82"],["GU","Guam","54"],["HI","Hawaii","51"],["ID","Idaho","93"],["IL","Illinois","67"],["IN","Indiana","89"],["IA","Iowa","16"],["KS","Kansas","63"],["KY","Kentucky","90"],["LA","Louisiana","81"],["ME","Maine","23"],["MH","Marshall Islands","5"],["MD","Maryland","41"],["MA","Massachusetts","38"],["MI","Michigan","82"],["MN","Minnesota","38"],["MS","Mississippi","95"],["MO","Missouri","23"],["MT","Montana","47"],["NE","Nebraska","96"],["NV","Nevada","71"],["NH","New Hampshire","39"],["NJ","New Jersey","86"],["NM","New Mexico","7"],["NY","New York","12"],["NC","North Carolina","90"],["ND","North Dakota","24"],["MP","Northern Mariana Islands","6"],["OH","Ohio","60"],["OK","Oklahoma","48"],["OR","Oregon","35"],["PW","Palau","61"],["PA","Pennsylvania","55"],["PR","Puerto Rico","65"],["RI","Rhode Island","31"],["SC","South Carolina","93"],["SD","South Dakota","48"],["TN","Tennessee","85"],["TX","Texas","67"],["UT","Utah","87"],["VT","Vermont","75"],["VI","Virgin Islands","29"],["VA","Virginia","83"],["WA","Washington","15"],["WV","West Virginia","75"],["WI","Wisconsin","9"],["WY","Wyoming","5"]]

You can copy & paste that dataset into Datawrapper to get started. 

Creating the map

In step 3 (Visualize), select Choropleth Map as the chart type.

In the Refine tab, select "USA > States" as the Basemap.

Also, make sure Region Key is set to the column in your dataset that contains the ISO-Code.

In addition, you can customize the color palette to your desired styling, if you want to. 

A glimpse at the map

Once the settings are correct, refresh the page to check out your newly created map:

Making it your own

You can customize the map further, for example by enabling your own, custom tooltips. Datawrapper can automatically show rich-text-tooltips when your viewers hover over your map.

Click on
Customize Tooltips in the Refine tab to get started.

Datawrapper will show you an edit field where you can configure the tooltip. This allows you to enter your own text and combine it with the data of the individual cells for the specific region. For example, you could create a tooltip like this:

Now, you will see this tooltip when hovering over your map:


Bonus: How to publish

Embedding charts into your website is super easy. If you use Datawrapper for free, you can download the chart as a ZIP file and host it on your own website yourself.

When you upgraded your account, you see a range of publishing options for your chart:

You can download the chart as a static image, but the best way to use a Datawrapper chart is by embedding it directly into your website. To do so, click on Export for embedding. Datawrapper automatically generates an iFrame-embed code that you can copy & paste directly into your CMS.

Copy the embed code into your website and you're done!

Other Interesting Tutorials

How to create a Stacked Column Chart

Learn how to create a stacked column chart in minutes with Datawrapper.

View Guide

All-new line charts

Datawrapper has completely revamped line charts: More responsive, cleaner and with annotations.

View Guide