Skip to main content

Map Data Binding

Using maps to visualize data.

Map Data Visualization

There are a number of ways visualize data using map charts. Some examples include:

Series and types

Standard marker, line, and bubble series can be added to maps. The build-in maps support GPS based lat/long coordinates and these can be specified in point x,y properties.

Mark a list of provinces

A list of provinces can be mapped to data points as part of a series highlighting the specific states with crimson color.

var points = redStates.split(",").map(function(val) {
  return { map: "US." + val };

JSC.chart("chartDiv", {
  type: "map",
  mapping_base_layers: "US",
  series: [
      defaultPoint_color: "crimson",
      points: points

Binding Data to Maps

The above methods can be used to generate points from arrays. For mapping, points are created the same way as for any chart type except, a property is set to indicate the map feature the point binds to.

Internal JSCharting maps can be referenced in properties by mapCodes or by map feature properties.

  • MapCodes
  • State/Province codes
  • Fips (if applicable)

Custom map files data binding

Consider being tasked to create a map of weather info for specific cities in the U.S. The available resources are a geoJSON point layer of cities, and a dataTable with city names and weather info for cities in your 50 mile radius. The goal is to plot weather icons on these cities over a U.S. Map of your 50 mile radius.

First we load the geoJSON city points map layer as a reference layer

  mapping: {
    referenceLayers: "mapData/usCapitals.js"

Next, points are generated for each city in the weather data.

var dataTable = [["Augusta", "cloud"], ["Montpelier", "cloud_dark"] /*,...*/];
points = {
  return {
    map: "UsCapitals." + data[0],
    marker_type: "url(images/" + data[1] + ".png)",
    label_text: "<b>%name</b> <br/>" + weatherDesc[data[1]]

Now the weather data is plotted but without a background map. A U.S. Map series can be added to the chart. But this is not a data driven mapping layer, and we don't want to see the entire U.S. Map. it's is just a background for context, therefore, we can skip making a new series, and styling it, this can be done by simply setting.

  mapping_base_layers: "us"