Map Data Binding

Chart Tutorials  

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.

🔗Data Binding Tools

JSC.pointsFromArray

A pointsFromArray utility function is built into JSCharting that simplifies mapping arrays to objects.

var arrayOfPoints = JSC.parsePoints({
  mapTo: "name,y",
  data: [["Jan", 196], ["Feb", 178], ["Mar", 169]]
});

The above example creates an array of objects where each object has a name property mapped to values like 'Jan' and a y property mapped to the numeric values.

The benefit of this method is that array elements can be mapped to deep property paths in objects such as:

var arrayOfPoints = JSC.parsePoints({
  mapTo: "name,attributes.sales",
  data: [["Jan", 196], ["Feb", 178], ["Mar", 169]]
});

The above generates objects such as:

{
  name: "Jan",
  attributes: {
    sales: 196
  }
}

🔗Array.prototype.map & jQuery.map

The native array prototype or jQuery map functions are also useful when converting arrays or objects into different object structures.

The key benefit in this case is that values can be modified when mapping them to objects.

var redStates =
  "WV,NC,SC,IN,KY,TN,HA,AL,GA,MS,LA,AR,MO,TX,OK,KS,NE,SD,ND,WY,MT,ID,UT,AZ,AK";
var points = JSC.map(redStates.split(","), function(val) {
  return { map: "US." + val };
});
Notice the use of a string which is then split into an array above. This approach can reduce the size of the data in HTML pages.It is worth noting that writing a for loop to generate objects is generally more efficient. The native array map function is also not supported by some older browsers such as IE8.

🔗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: {
    referenceLayer: "mapData/usCapitals.js";
  }
}

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

var dataTable = [["Augusta", "cloud"], ["Montpelier", "cloud_dark"] /*,...*/];
points = JSC.map(dataTable, function(data) {
  return {
    map: "UsCapitals." + data[0],
    markerType: "url(images/" + data[1] + ".png)",
    labelText: "<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: {
    baseLayer: "us";
  }
}