Learn D3.js

Creating a bubble chart

You can represent a third dimension in a two-dimensional scatter chart using the area of each circle. This turns it into a bubble chart, and will require a new scale. Since it's an area-based scale, a square-root scale is best. The following scale will allow circles with diameters from 2 to 30 pixels wide:

const scaleR = d3.scaleSqrt().range([1,15]);

This bubble chart will use circles of different areas to show population. After loading the data, configure the domain:

scaleR.domain(d3.extent(dataset, d => d.population));

Replace the r attribute of the dots with a scaled population, as shown in the following code snippet:

d3.selectAll(".dot")  .attr("r", d => scaleR(d.population));

You also need to remove the lines that ...