Basic bubble map in d3.js

This post describes how to build a very basic bubble map with d3.js. It uses the previous background map of France, and add a few circles at specific coordinates on top of it. See more bubblemap examples here.

Bubble map section


  • First of all, you need to know how to plot a basic background map.

  • Then we just add circles for each data points as we would do for a scatter plot or a bubble plot.

  • The only trick is that the projection function needs to be applied to the circle X and Y coordinates
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js and the geo projection plugin -->
<script src=""></script>
<script src=""></script>

<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="440" height="300"></svg>


// The svg
var svg ="svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// Map and projection
var projection = d3.geoMercator()
    .center([2, 47])                // GPS of location to zoom on
    .scale(1020)                       // This is like the zoom
    .translate([ width/2, height/2 ])

// Create data for circles:
var markers = [
  {long: 9.083, lat: 42.149}, // corsica
  {long: 7.26, lat: 43.71}, // nice
  {long: 2.349, lat: 48.864}, // Paris
  {long: -1.397, lat: 43.664}, // Hossegor
  {long: 3.075, lat: 50.640}, // Lille
  {long: -3.83, lat: 58}, // Morlaix

// Load external data and boot
d3.json("", function(data){

    // Filter data
    data.features = data.features.filter( function(d){return"France"} )

    // Draw the map
          .attr("fill", "#b8b8b8")
          .attr("d", d3.geoPath()
        .style("stroke", "black")
        .style("opacity", .3)

    // Add circles:
        .attr("cx", function(d){ return projection([d.long,])[0] })
        .attr("cy", function(d){ return projection([d.long,])[1] })
        .attr("r", 14)
        .style("fill", "69b3a2")
        .attr("stroke", "#69b3a2")
        .attr("stroke-width", 3)
        .attr("fill-opacity", .4)


Related blocks →