+ Start a Discussion
SharathKumar ReddySharathKumar Reddy 

How to display Geo Map Variation Chart using lightning component, I need to display contact data based on state, for example: I have list of US states and i need to display count based on state and how many contacts are related to each state?

User-added image
Alain CabonAlain Cabon
With D3.js, you can find many samples with this US map (with or without zoom and the tooltips). With a quick inspect, you can retrieve the free Geo json data of the map itself.

https://bl.ocks.org/michellechandra

http://bl.ocks.org/michellechandra/90d59f022ad7e9fd0e5d

The main benefit of D3.js is the clear explanation of its use in the documentation here with a first example:

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/js_third_party_library

http://bl.ocks.org/NPashaP/a74faf20b492ad377312
Alain CabonAlain Cabon
The problem of long texts is for the smallest states.

For Alaska or Texas, a tooltip could be permanent.

http://bl.ocks.org/NPashaP/a74faf20b492ad377312

User-added image

But Rhode Island and Massachusetts are tiny states.

User-added image


User-added image


There are some changes to do for Salesforce with the given codes but that works exactly like the samples.

I have used D3 version 5. It is difficult to write the complete initial code but the adaptations for Salesforce are not very difficult.

It is FREE and very powerful (with zoom, tooltips, and so on; completely dynamic, very impressive).