Basic bubble plot in d3.js




Building a legend is a crucial step when you build a bubble chart or a bubble map. This example works with d3.js v4 and v6


Bubbleplot section

Steps:

  • This legend can be inserted next to any bubble chart or bubble map.

  • It's nothing complicated, but allows to easily set up the threshold you want to show on the legend.
| 
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>


<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>


<script>

// append the svg object to the body of the page
var height = 460
var width = 460
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width)
    .attr("height", height)

// The scale you use for bubble size
var size = d3.scaleSqrt()
  .domain([1, 100])  // What's in the data, let's say it is percentage
  .range([1, 100])  // Size in pixel

// Add legend: circles
var valuesToShow = [10, 50, 100]
var xCircle = 230
var xLabel = 380
var yCircle = 330
svg
  .selectAll("legend")
  .data(valuesToShow)
  .enter()
  .append("circle")
    .attr("cx", xCircle)
    .attr("cy", function(d){ return yCircle - size(d) } )
    .attr("r", function(d){ return size(d) })
    .style("fill", "none")
    .attr("stroke", "black")

// Add legend: segments
svg
  .selectAll("legend")
  .data(valuesToShow)
  .enter()
  .append("line")
    .attr('x1', function(d){ return xCircle + size(d) } )
    .attr('x2', xLabel)
    .attr('y1', function(d){ return yCircle - size(d) } )
    .attr('y2', function(d){ return yCircle - size(d) } )
    .attr('stroke', 'black')
    .style('stroke-dasharray', ('2,2'))

// Add legend: labels
svg
  .selectAll("legend")
  .data(valuesToShow)
  .enter()
  .append("text")
    .attr('x', xLabel)
    .attr('y', function(d){ return yCircle - size(d) } )
    .text( function(d){ return d } )
    .style("font-size", 10)
    .attr('alignment-baseline', 'middle')
</script>
<script>

// append the svg object to the body of the page
const height = 460
const width = 460
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width)
    .attr("height", height)

// The scale you use for bubble size
const size = d3.scaleSqrt()
  .domain([1, 100])  // What's in the data, let's say it is percentage
  .range([1, 100])  // Size in pixel

// Add legend: circles
const valuesToShow = [10, 50, 100]
const xCircle = 230
const xLabel = 380
const yCircle = 330
svg
  .selectAll("legend")
  .data(valuesToShow)
  .join("circle")
    .attr("cx", xCircle)
    .attr("cy", d => yCircle - size(d))
    .attr("r", d => size(d))
    .style("fill", "none")
    .attr("stroke", "black")

// Add legend: segments
svg
  .selectAll("legend")
  .data(valuesToShow)
  .join("line")
    .attr('x1', d => xCircle + size(d))
    .attr('x2', xLabel)
    .attr('y1', d => yCircle - size(d))
    .attr('y2', d => yCircle - size(d))
    .attr('stroke', 'black')
    .style('stroke-dasharray', ('2,2'))

// Add legend: labels
svg
  .selectAll("legend")
  .data(valuesToShow)
  .join("text")
    .attr('x', xLabel)
    .attr('y', d => yCircle - size(d))
    .text( d => d)
    .style("font-size", 10)
    .attr('alignment-baseline', 'middle')

</script>

Related blocks →