Bubble map | the D3 Graph Gallery

From a geoJson file

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

Most basic

The most basic bubble map you can do in d3.js. Keeping only the core code.

Input data format: geoJson + javascript object

Add tooltip

Pretty useful to add a tooltip to add more information concerning the marker.

Circle features

How to map circle size and color to data?

Legend

How to build a nice legend to illustrate bubble size.

Group selection

Add a button to select displayed group, with smooth transition.

Template

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.

Basic bubblemap with leaflet

A very basic example showing how to add circles with d3 on top of the leaflet.js background.

Selection of blocks

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

Mike's tutorial on bubble map

A complete tutorial on bubble map by Mike Bostock, d3.js creator.

Leaflet documentation

Link to the leaflet website: awesome doc for awesome maps.