Experiment 6 – adding visualizations as a point of interest

For our final experiment, we will layer visualizations on top of visualizations! Starting from where we left off at http://localhost:8080/chapter-4/example-6.html, we will add a fictitious column to the data to indicate a metric of tequila consumption (the final version can be seen at http://localhost:8080/chapter-4/example-7.html):

name,lat,lon,tequila 
Cancun,21.1606,-86.8475,85,15 
Mexico City,19.4333,-99.1333,51,49 
Monterrey,25.6667,-100.3000,30,70 
Hermosillo,29.0989,-110.9542,20,80 

With just two more lines of code, we can have the city points portray meaning. In this experiment, we will scale the radius of the city circles in relation to the amount of tequila consumed:

var radius = d3.scaleLinear().domain([0,100]).range([5,30]);  

Here, we will introduce a new scale that linearly distributes the input values...