A heat map of the United States, also called a choropleth: each state is colored by its population in the 2000 census, from a light shade for the fewest people to a dark one for the most.
Coloring each area by its value shows where the highs and lows cluster, here the most populous states on the coasts and in Texas. Color is hard to read exactly, so the legend and tooltips carry the numbers. Raw totals make big states stand out for their size alone, so for most data, map rates such as per person.
Built with amCharts 5, a JavaScript library. The JavaScript includes your theme and renderer (canvas or SVG); the JSON also follows the changes you make with the controls.
npm install @amcharts/amcharts5 and @amcharts/amcharts5-geodata. See Getting started.
The same chart as a JSON config. Chart Maker reads and writes this format, the library's JSON parser turns it into a chart, and the <am5-chart> element puts it on a page with no code."type" is the class to create and "settings" what you would pass to its new() in code; "properties" fill in its parts, lists such as series and axes or templates such as columns.template; "refs" holds objects used in more than one place ("#series-0" stands for the one named series-0); a string starting with "@" takes a value from another object, such as "@series.get('fill')".
A complete page. Save it as an .html file and open it in a browser.
Paste this into an AI coding assistant to build the chart from scratch. More in amCharts & AI.
// Create root
var root = am5.Root.new("chartdiv");
// Set themes
root.setThemes([
am5themes_Animated.new(root),
am5themes_Responsive.new(root)
]);
// Colors from the theme, so the map follows the theme
var colors = am5.ColorSet.new(root, {});
// Create chart
var chart = root.container.children.push(am5map.MapChart.new(root, {
minZoomLevel: 0.5, // the map can zoom out to half its fitted size
// go to the home view once the map is fitted
autoHome: true,
// the Albers USA projection can't rotate: dragging moves the map
panX: "translateX", // drag the map to move it sideways...
panY: "translateY", // ...and up and down
projection: am5map.geoAlbersUsa(), // Alaska and Hawaii shown below the lower 48 states
// the heat legend, added to the chart below, sits to the right of the map
layout: root.horizontalLayout
}));
// Create polygon series
var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
geoJSON: am5geodata_usaLow, // the US states, in low detail
valueField: "value",
// works out the lowest and highest population, for the heat rule and the legend
calculateAggregates: true
}));
polygonSeries.mapPolygons.template.setAll({
tooltipText: "{name}: {value.formatNumber('#,###')}", // the population with thousands separators
interactive: true, // the states react to the mouse
stroke: root.interfaceColors.get("background"), // 1px borders in the background color
strokeWidth: 1
});
polygonSeries.mapPolygons.template.states.create("hover", {
fill: colors.getIndex(9) // a state under the mouse takes the theme's 10th color
});
polygonSeries.set("heatRules", [{
target: polygonSeries.mapPolygons.template,
dataField: "value", // by each state's value, the population
min: am5.Color.lighten(colors.getIndex(0), 0.6), // the smallest in a light tint of the theme's first color...
max: am5.Color.brighten(colors.getIndex(0), -0.5), // ...the largest in a dark shade of it
key: "fill" // the setting the rule changes
}]);
// point at a state to see where its population sits on the legend
polygonSeries.mapPolygons.template.events.on("pointerover", function(ev) {
heatLegend.showValue(ev.target.dataItem.get("value"));
});
// Population of each state in the 2000 census
polygonSeries.data.setAll([
{ id: "US-AL", value: 4447100 },
{ id: "US-AK", value: 626932 },
{ id: "US-AZ", value: 5130632 },
{ id: "US-AR", value: 2673400 },
{ id: "US-CA", value: 33871648 },
{ id: "US-CO", value: 4301261 },
{ id: "US-CT", value: 3405565 },
{ id: "US-DE", value: 783600 },
{ id: "US-FL", value: 15982378 },
{ id: "US-GA", value: 8186453 },
{ id: "US-HI", value: 1211537 },
{ id: "US-ID", value: 1293953 },
{ id: "US-IL", value: 12419293 },
{ id: "US-IN", value: 6080485 },
{ id: "US-IA", value: 2926324 },
{ id: "US-KS", value: 2688418 },
{ id: "US-KY", value: 4041769 },
{ id: "US-LA", value: 4468976 },
{ id: "US-ME", value: 1274923 },
{ id: "US-MD", value: 5296486 },
{ id: "US-MA", value: 6349097 },
{ id: "US-MI", value: 9938444 },
{ id: "US-MN", value: 4919479 },
{ id: "US-MS", value: 2844658 },
{ id: "US-MO", value: 5595211 },
{ id: "US-MT", value: 902195 },
{ id: "US-NE", value: 1711263 },
{ id: "US-NV", value: 1998257 },
{ id: "US-NH", value: 1235786 },
{ id: "US-NJ", value: 8414350 },
{ id: "US-NM", value: 1819046 },
{ id: "US-NY", value: 18976457 },
{ id: "US-NC", value: 8049313 },
{ id: "US-ND", value: 642200 },
{ id: "US-OH", value: 11353140 },
{ id: "US-OK", value: 3450654 },
{ id: "US-OR", value: 3421399 },
{ id: "US-PA", value: 12281054 },
{ id: "US-RI", value: 1048319 },
{ id: "US-SC", value: 4012012 },
{ id: "US-SD", value: 754844 },
{ id: "US-TN", value: 5689283 },
{ id: "US-TX", value: 20851820 },
{ id: "US-UT", value: 2233169 },
{ id: "US-VT", value: 608827 },
{ id: "US-VA", value: 7078515 },
{ id: "US-WA", value: 5894121 },
{ id: "US-WV", value: 1808344 },
{ id: "US-WI", value: 5363675 },
{ id: "US-WY", value: 493782 }
]);
// the color scale, to the right of the map (the chart's horizontal layout)
var heatLegend = chart.children.push(am5.HeatLegend.new(root, {
orientation: "vertical", // a bar that runs up and down
startColor: am5.Color.lighten(colors.getIndex(0), 0.6), // the same colors as the heat rule
endColor: am5.Color.brighten(colors.getIndex(0), -0.5),
startText: "Lowest", // words at the ends instead of numbers
endText: "Highest",
stepCount: 5 // 5 blocks of color instead of a smooth gradient
}));
// Add zoom control
// https://www.amcharts.com/docs/v5/charts/map-chart/map-pan-zoom/#Zoom_control
var zoomControl = chart.set("zoomControl", am5map.ZoomControl.new(root, {
x: 0, // at the bottom left, clear of the heat legend on the right
centerX: 0,
paddingLeft: 10 // a small gap from the edge
}));
zoomControl.homeButton.set("visible", true); // a button that goes back to the home view
// smaller labels on the heat legend
heatLegend.startLabel.setAll({
fontSize: 12
});
heatLegend.endLabel.setAll({
fontSize: 12
});
// the legend runs from the lowest value to the highest
polygonSeries.events.on("datavalidated", function () {
heatLegend.set("startValue", polygonSeries.getPrivate("valueLow"));
heatLegend.set("endValue", polygonSeries.getPrivate("valueHigh"));
});{
"type": "MapChart",
"settings": {
"minZoomLevel": 0.5,
"autoHome": true,
"panX": "translateX",
"panY": "translateY",
"layout": {
"type": "HorizontalLayout"
},
"zoomControl": {
"type": "ZoomControl",
"settings": {
"x": 0,
"centerX": 0,
"paddingLeft": 10
},
"properties": {
"homeButton": {
"settings": {
"visible": true
}
}
}
},
"projectionName": "geoAlbersUsa"
},
"properties": {
"series": [
"#series-0"
]
},
"children": [
{
"type": "HeatLegend",
"settings": {
"orientation": "vertical",
"startColor": {
"type": "Color",
"value": "#c2e2f1"
},
"endColor": {
"type": "Color",
"value": "#00496e"
},
"startText": "Lowest",
"endText": "Highest",
"stepCount": 5,
"startValue": 493782,
"endValue": 33871648
},
"properties": {
"startLabel": {
"settings": {
"fontSize": 12
}
},
"endLabel": {
"settings": {
"fontSize": 12
}
}
},
"index": 2
}
],
"refs": [
{
"data-0": [
{
"id": "US-AL",
"value": 4447100,
"__parse": true
},
{
"id": "US-AK",
"value": 626932,
"__parse": true
},
{
"id": "US-AZ",
"value": 5130632,
"__parse": true
},
{
"id": "US-AR",
"value": 2673400,
"__parse": true
},
{
"id": "US-CA",
"value": 33871648,
"__parse": true
},
{
"id": "US-CO",
"value": 4301261,
"__parse": true
},
{
"id": "US-CT",
"value": 3405565,
"__parse": true
},
{
"id": "US-DE",
"value": 783600,
"__parse": true
},
{
"id": "US-FL",
"value": 15982378,
"__parse": true
},
{
"id": "US-GA",
"value": 8186453,
"__parse": true
},
{
"id": "US-HI",
"value": 1211537,
"__parse": true
},
{
"id": "US-ID",
"value": 1293953,
"__parse": true
},
{
"id": "US-IL",
"value": 12419293,
"__parse": true
},
{
"id": "US-IN",
"value": 6080485,
"__parse": true
},
{
"id": "US-IA",
"value": 2926324,
"__parse": true
},
{
"id": "US-KS",
"value": 2688418,
"__parse": true
},
{
"id": "US-KY",
"value": 4041769,
"__parse": true
},
{
"id": "US-LA",
"value": 4468976,
"__parse": true
},
{
"id": "US-ME",
"value": 1274923,
"__parse": true
},
{
"id": "US-MD",
"value": 5296486,
"__parse": true
},
{
"id": "US-MA",
"value": 6349097,
"__parse": true
},
{
"id": "US-MI",
"value": 9938444,
"__parse": true
},
{
"id": "US-MN",
"value": 4919479,
"__parse": true
},
{
"id": "US-MS",
"value": 2844658,
"__parse": true
},
{
"id": "US-MO",
"value": 5595211,
"__parse": true
},
{
"id": "US-MT",
"value": 902195,
"__parse": true
},
{
"id": "US-NE",
"value": 1711263,
"__parse": true
},
{
"id": "US-NV",
"value": 1998257,
"__parse": true
},
{
"id": "US-NH",
"value": 1235786,
"__parse": true
},
{
"id": "US-NJ",
"value": 8414350,
"__parse": true
},
{
"id": "US-NM",
"value": 1819046,
"__parse": true
},
{
"id": "US-NY",
"value": 18976457,
"__parse": true
},
{
"id": "US-NC",
"value": 8049313,
"__parse": true
},
{
"id": "US-ND",
"value": 642200,
"__parse": true
},
{
"id": "US-OH",
"value": 11353140,
"__parse": true
},
{
"id": "US-OK",
"value": 3450654,
"__parse": true
},
{
"id": "US-OR",
"value": 3421399,
"__parse": true
},
{
"id": "US-PA",
"value": 12281054,
"__parse": true
},
{
"id": "US-RI",
"value": 1048319,
"__parse": true
},
{
"id": "US-SC",
"value": 4012012,
"__parse": true
},
{
"id": "US-SD",
"value": 754844,
"__parse": true
},
{
"id": "US-TN",
"value": 5689283,
"__parse": true
},
{
"id": "US-TX",
"value": 20851820,
"__parse": true
},
{
"id": "US-UT",
"value": 2233169,
"__parse": true
},
{
"id": "US-VT",
"value": 608827,
"__parse": true
},
{
"id": "US-VA",
"value": 7078515,
"__parse": true
},
{
"id": "US-WA",
"value": 5894121,
"__parse": true
},
{
"id": "US-WV",
"value": 1808344,
"__parse": true
},
{
"id": "US-WI",
"value": 5363675,
"__parse": true
},
{
"id": "US-WY",
"value": 493782,
"__parse": true
}
]
},
{
"template-0": {
"type": "Template",
"settings": {
"tooltipText": "{name}: {value.formatNumber('#,###')}",
"interactive": true,
"stroke": "@root.interfaceColors.get('background')",
"strokeWidth": 1
},
"states": [
{
"key": "hover",
"settings": {
"fill": {
"type": "Color",
"value": "#dc6967"
}
}
}
]
}
},
{
"series-0": {
"type": "MapPolygonSeries",
"settings": {
"geoJSON": "am5geodata_usaLow",
"valueField": "value",
"calculateAggregates": true,
"heatRules": [
{
"target": "#template-0",
"dataField": "value",
"min": {
"type": "Color",
"value": "#c2e2f1"
},
"max": {
"type": "Color",
"value": "#00496e"
},
"key": "fill",
"__parse": true
}
]
},
"properties": {
"data": "#data-0",
"mapPolygons": {
"properties": {
"template": "#template-0"
}
}
}
}
}
]
}
