Home Services Resources About Careers Contact

RESOURCES / Articles

Datorama Custom Visuals:
Custom Map Visuals

By Prafulla Mohapatra revised on August 31, 2022 at 8:04 PM EDT

A recent client of ours needed Datorama Custom Visuals mapping of Canada at a Forward Sortation Area (FSA) level. An FSA is a way to designate a geographical unit based on the first three characters in a postal code. The users needed to filter for a given zone and see the FSAs associated with it in a specific color, according to the value of the metric selected. But, Datorama’s built-in map visual for Canada only goes to the province level, which wasn’t sufficient. How did we meet this challenge? Let’s take a look. 

The only way forward was to build a custom map visual that goes up to the FSA level. We used High Charts because there weren’t any existing projects with data at an FSA level. As a result, we had to start from scratch. We began by getting the Geo JSON file. Geo JSON is a format for encoding a variety of geographic data structures. In this case, the file contained coordinates for each of the FSAs needed. But there was a problem, the file was too large: 250MB.

Roadblock: All this data cannot be fed to the Datorama Custom Widget because the data would failed to load. We also couldn’t bring in the data through an endpoint because each time the page is opened, 250MB worth of data would have to be downloaded before Datorama can start displaying the visual, again.
Workaround: We decided to only take the FSAs required by the client, which made the file considerably smaller, and then, we pasted the JSON data into the custom widget directly. Unfortunately, this resulted in another issue.

Roadblock: The default state, where no zone was filtered, was supposed to show the map of Canada, but now only a scattered map of discrete areas would display. This is because most of the FSAs required to build the map of Canada were not present.

Datorama Custom Visual


Workaround: To remedy this, we built another Datorama Custom Visual map at a province level, and added a condition to the custom widget. If a user filters for more than one zone or if the user doesn’t filter for any zone, the data would be shown at a province level with the whole Canada map. If the user filtered for only one Zone, then the data would be shown at an FSA level.

The Final Datorama Custom Visual Output

The Datorama Custom Visual map at a province level when no Zone is selected:

Datorama Custom Visual

The map at an FSA level when a Zone is selected:

Datorama Custom Visual

The map changes according to the metric selected by the user. This is because the filter values are now accessible in the custom widget. The actual value of the metric is shown when the user hovers over the area in question.

The color gradient can be changed according to the requirements of the client. In this case, the client wanted Red to indicate high values and Yellow to indicate low values. Therefore, we set the “maxcolor” as Red and the “mincolor” as Yellow. We also changed the way the values were displayed, added currency symbols, and even formatted numbers.

With these workarounds in place, and some outside-the-box thinking, we were able to create the Datorama Custom Visuals map required.

About Decision Foundry

Decision Foundry is a top-tier Salesforce integration partner supporting Datorama, CDP, Tableau, Tableau CRM, and Marketing Cloud, proper. Our global team includes some of the industry’s leading practitioners in data analytics and visual communication. As Salesforce consultants, we help make sense of your data by connecting scattered data points while blending and visualizing performance marketing data. We organize marketing data across our clients’ entire tech stack — from delivery to IO management to billing and reconciliation to automated insights and sales lift.

Contact us today to see what we can do for your Marketing Cloud Intelligence investment.

CATEGORIES

Datorama