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 redStates = "WV,NC,SC,IN,KY,TN,AL,GA,MS,LA,AR,MO,TX,OK,KS,NE,SD,ND,WY,MT,ID,UT,AZ,AK";
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 point.map property is set to indicate the map feature the point binds to.

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

  • MapCodes
    ''us.il''
  • State/Province codes
    ''us.stateCode:il''
  • Fips (if applicable)
    ''us.fips:US08''

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 = dataTable.map(function(data) {
  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 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"
}