In this article, we are going to make a map with a software called Mapbox. This won't involve any coding at all, but I think it is a cool tool to use if you want to add a professional-looking map to your website or app. Mapbox's software is used by apps of many popular companies that all of us utilize every day. Snap Inc. The Weather Company Shopify Facebook AllTrails Ancestry Peloton And many more... For the map that we make today, we will be using the data visualization component that is provided to us in Mapbox Studio (aka Mapbox's map editor). The data we will be working with is the temperature change for US counties from 1895 to 2019. This is already pre-loaded into Mapbox studio which is really handy. Without further ado, let's get into it! Setup The setup for this is pretty simple. All you need is an internet connection and a . Once you have those 2 things you are ready to go! Mapbox account The Process Now that you are signed in you'll want to go to the Styles page. This is where all of your different designed maps be housed. If you just set up your account you won't have anything in here. would Next, we are going to click the "New style" button on this page. This will take you to a screen where you can choose a map template you'll want to use. For this scenario I'm going to choose the Basic map template, I think any template will work here (other than the blank template of course). After you have chosen your template, click the "Customize" button at the bottom of the modal. This will direct you to your new Mapbox map! : your map will be centered in Paris. Make sure to navigate to the United State before moving on to the rest of the steps. Pro tip This next paragraph is completely optional, in my opinion, but to make the map feel a little less cluttered we will delete some of the components that are added on by default. Click on the component in the menu on the left-hand side. Then click the trash can icon at the top of the menu. Below is the list of components that I deleted. Buildings Place labels Points of interest Road network Transit Walking, cycling, etc. Adding the data For this exercise, we are going to create a with data from , which analyzes warming temperatures in the United States. Our choropleth map will visualize the change in average annual temperature from 1895 to 2019. choropleth map The Washington Post's "2ºC: Beyond the Limit" series about rising temperatures In the Components panel, click the plus icon and then select "Data visualization" from the menu that pops up. You'll then be shown a dark map of the United States. Click on where it says "None selected" under Source. Then click "Add source by ID". Paste into the search bar and click "Find". mapbox.brt3djy1 Yay! We have pulled in the data. It was that easy. Now we have to decide how we want our data to look on our map. Click "Select data visualization type". Then click the choropleth option, and lastly, the "Select Choropleth" button. There you have it. The component will be added to your map and you'll see the United States illuminate with color. Finishing touches The rest is just messing around with the styles and colors. You'll notice initially that your map will have 3 colors populated. The field has values above and below 0. To make the visualization reflect divergence from 0 with color, the second stop should be 0 instead of the default value of 1.774. So let us change the middle value (2) in the Color section to 0. tempchg Also, it would be nice to make this look a little bit more like a heat map. We can do that by going down to the bottom section of the Components panel under the Colors section. Click on "Choropleth" with the 3 colors to the left. This will expand and display a dropdown. In that dropdown, select the "Temperate" option (the "Adverse" color palette is a good choice too). Finally, our colors are switched around so we need to click the "Reverse palette" button next to the dropdown. Conclusion There you have it! A super slick looking map that shows temperature change data of the United States. How easy was that? I encourage you to play around a little more in the Mapbox studio and see what other cool manipulations you can make. : adding more colors to show more details of the data, change the stroke to show or hide the polygon outlines, toggle labels on or off, and even change the opacity of your map. Some easy ones are You can preview your map by copying the share link in the top right corner, as well as publish it so you can include it in your dev project. Lastly, if you're curious about diving deeper into this, Mapbox has lots of great lessons and tutorials to help guide you through all of the available functionality. I think a logical next step after this would be to to a Mapbox map. Maybe you could look at one of my then including that data into your very own custom map! add your own data previous articles about scraping websites for data That's all for now. I hope you enjoyed this article. Happy coding!

Polygon

Facebook

Super

Transit

Tutorial For Supabase And Next.js Fans On How To Build A Slack Clone

The Coder's Gambit: Create a Chess Game with React and Chessboardjsx 

Nominated for 2022 - HackerNoon Contributor of the Year - Amazon

Too Long; Didn't Read

Make resilience your competitive advantage

Create A Data Visualization Map Using Mapbox

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Quick Primer on Data Scraping

The Noonification: How Often Do NFTs Pass The Howey Test? (1/13/2023)

03/09/2018: Biggest Stories in the Cryptosphere

The Noonification: Immigrant Teens Are Working Dangerous Night Shifts in Factories (11/21/2022)

The Noonification: How to Implement a Merkle Tree in Solidity (11/12/2023)

A Quick Primer on Data Scraping

The Noonification: How Often Do NFTs Pass The Howey Test? (1/13/2023)

03/09/2018: Biggest Stories in the Cryptosphere

The Noonification: Immigrant Teens Are Working Dangerous Night Shifts in Factories (11/21/2022)

The Noonification: How to Implement a Merkle Tree in Solidity (11/12/2023)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps