I have been working on rendering a map using d3 within an HTML page that is running on a django web framework. One of the examples I came across from d3's sample archives can be found at this link: http://bl.ocks.org/NPashaP/a74faf20b492ad377312
Upon examination, I noticed that the states' low, high, average, and colors are randomly generated through a function (which has since been commented out):
// var sampleData ={}; /* Sample random data. */
// ["HI", "AK", "FL", "SC", "GA"...
Replacing the predefined sampleData with my own custom data led to only certain sections of the map being filled in with the specified hex colors. Take a look at the snapshot here: https://i.sstatic.net/h0bsQ.jpg
Moreover, the browser console highlighted an error that did not occur with the original sampleData:
uStates.js:72 Uncaught TypeError: Cannot read property 'color' of undefined
at SVGPathElement.<anonymous> (uStates.js:72)
...
In addition, the tooltip feature associated with the original sampleData was not functioning as expected when using my customized data. Here's the snippet of JavaScript code relevant to the tooltip functionality:
function tooltipHtml(n, d){
return "<h4>"+n+"</h4><table>"+
"<tr><td>number:</td><td>"+(d.low)+"</td></tr>";
}
If anyone could shed some light on:
- The specific error encountered in the console
- Why only select states are displaying the provided hex colors
- The reason behind the non-functioning tooltip for the custom
sampleData