score:1

Accepted answer

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:

 var data={
     "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);

Related Query

More Query from same tag