Bubble map

This section is dedicated to map with markers displayed on top of it. These markers can be circles with size proportional to a numerical value: that makes a bubble map. Before exploring this section, learn how to build the map background with javascript.

From a geoJson file

Input data for maps is geoJson format. D3.js works very well to display this kind of information using path.


A clean template based on my #surf project. I harvested tweet containing the #surf hashtag for ~ 1 year and geocoded people home location. Here is where the surfers live! You can read more about this project here.

See code

Using the Leaflet.js open source library

Leaflet is an open-source JavaScript library for mobile-friendly interactive maps. Awesome for background maps. See the range of background tiles you can use here and here.

Selection of blocks

A few blocks with more complicated codes to showcase the possibility of the d3-sankey plugin

Related chart types

Hexbin map
Bubble map