'Interactive US state map using JavaScript showing the revenue

Is there any javascript object that I can use to display a US map where the colour of each state will depend upon the amount of revenue generated from that state? It is just like a chart that I need to add but the color of each state will be different and also if they hover it will show the amount from that state or let it be already there on the state outline map.

javascripthtmlcharts


Solution 1:[1]

You can simply use an SVG, a markup language that consist of path description, that renders into a scalable image in the browser.

There are tons of available US svg files online, you'll just have to pick what suits you best (for example this one). Looking at the code of the map I provided you'll see all the state paths, each with their own id, for instance :

  <path
     inkscape:connector-curvature="0"
     id="ND"
     data-name="North Dakota"
     data-id="ND"
     d="m 556.50879,73.847349 -29.31306,0.582379 -20.48032,-0.09706 -17.56842,-0.388253 -20.57738,-0.776505 -1.0677,-0.09706 -0.0971,3.882525 -1.26182,23.683405 -1.55301,30.47782 -0.19413,3.88252 3.78546,0.19413 42.80484,1.16476 39.50469,-0.29119 16.40367,-0.48532 3.30014,-0.19412 -0.38825,-1.45595 -0.48531,-4.4649 -2.23246,-5.24141 -0.58238,-8.73568 -1.94126,-9.90044 -4.07665,-24.848163 -1.94126,-6.891482 -2.03833,0 z"
     style="stroke-width:0.97063118000000004;fill:#f9f9f9" />

There its up to you to come with your own rendering logic, either dynamically adding a fill attribute to each path with the color you'd like, or styling each one using css (by targeting the id of the path)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BJRINT

Related Questions