O'Reilly logo

Expert Data Visualization by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Render the legend

We call the draw legend as soon as the data is loaded:

d3.json("./data/world-110m-inet.json", function(loadedTopo) {     ...     drawLegend(countries); }); 

To draw the legend, we use techniques we've seen in the previous chapters:

function drawLegend(countries) {     // filter out the countries, for which we don't have data     var infos = svg.selectAll(".country-info")         .data(countries.filter(function(d) {return d.properties.value && +d.properties.value > 0}));      // create new ones     var newInfos = infos.enter().append("g")         .on("click", function(d) {             d3.select(".country-text").text("Country: " + d.properties.name);             d3.select(".country-value").text("Internet Users: " + (+d.properties.value).toFixed(2) + "%");             moveTo(d.id)  }) ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required