State choropleth map

Choropleth maps are thematic maps in which areas are shaded based on the prevalence of a particular variable. They are a great way of showing how a measurement varies across a geographic area.

Below is an example of choropleth map showing how many people play college football by state. The darker the state, the higher the percentage of people play college football. This makes it easy to pick out certain states where college football is particularly popular and unpopular.

View Mode Analysis

Click Powered by Mode to duplicate this example and make your own state choropleth map. Learn more about using HTML to customize your reports.

Create a state choropleth map

Add the stylesheet links and script tags to the top of the HTML:

<link rel="stylesheet" href="https://mode.github.io/alamode/alamode.min.css">
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.4/queue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js"></script>
<script src="https://mode.github.io/alamode/alamode.min.js"></script>

Add the customizable snippet at the bottom of the HTML:

<script>

alamode.stateChoropleth(
  {
	query_name: "Query 1",
	width: 800,
	state_column: "name",
	state_code_type: "name",
	// Options for state_code_type:
	//    name
	//    letter_code
	//    fips_code
	value_column: "players_per_person",
	title: "College football players per person",
	color_gradient: ["#2166ac","#4393c3","#92c5de","#d1e5f0","#fddbc7","#f4a582","#d6604d","#b2182b"]
  }
)

</script>

You can customize the map by editing the parameters in the snippet:

• html_element: If not provided, the map will be added as the last element in the report. To place it elsewhere, select an element in your report with this parameter.
• width: The width of the map. Defaults to 950. The map will always stay the same ratio.
• height: The height of the HTML element containing the map. The map itself will resize according to the width value provided.
• query_name: The name of the query that returns the map's dataset. If you update the name of the query, you’ll need to update it here as well.
• state_column: The dataset column that returns the identifier for each state.
• state_code_type: The type of identifier returned in the state_column. There are three options: name (the full name of the state, such as Alabama and North Carolina), letter code (the two-letter postal code, such as AL and NC), and fips_code (the FIPS code such as 1 and 37).
• value_column: The dataset column that returns the value that determine how each county is shaded.
• title: The map's title.
• color_gradient: A list of colors to show in the map. Colors should be listed from low to high.