D3 Map - Feeding Data To Tootip

I am trying to adapt to my needs this very neat example based on this dataset. Instead of randomly generated data: var low=Math.round(100*Math.random()), mi

Solution 1:

In order to use uStates.js seamlessly, your own data should be separated from the path coordinates (in short: do not edit uStates.js).

The format for your data should be:

vardata={
     "OH": {pop:"11.59", area:"116,096", color:"#FFF"},
     "NY": { ... },
     ...
    };

The color field is mandatory for uStates to work. You can make it fit your other values automatically, and you can also convert your data to this format if you have it in another way (but this is not the scope of this answer, don't hesitate to ask for more about this).

Then, you only need to edit the tooltipHTML function to take the pop and area fields of your data (d):

    function tooltipHtml(n, d) {
       return "<h4>"+n+"</h4><table>"+
       "<tr><td>Low Low Low</td><td>"+d.pop+"</td></tr>"+
       "<tr><td>Average Average</td><td>"+d.area+"</td></tr>"+
       "</table>";
    }

Finally, call uStates with

  uStates.draw("#statesvg", data, tooltipHtml);