This post follows the previous
basic bubble map with d3.js. It
adds a button that allows to filter groups. Visit the
bubblemap and the
bubblechart sections for more
examples. This example works with d3.js v4 and
v6
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js and the geo projection plugin -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<!-- Button -->
<div>
<input type="checkbox" class="checkbox" value="A" checked><label>group A</label>
<input type="checkbox" class="checkbox" value="B" checked><label>group B</label>
<input type="checkbox" class="checkbox" value="C" checked><label>group C</label>
</div>
<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="440" height="300"></svg>
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- Button -->
<div>
<input type="checkbox" class="checkbox" value="A" checked><label>group A</label>
<input type="checkbox" class="checkbox" value="B" checked><label>group B</label>
<input type="checkbox" class="checkbox" value="C" checked><label>group C</label>
</div>
<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="440" height="300"></svg>
<script>
// The svg
var svg = d3.select("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, group: "A", size: 34}, // corsica
{long: 7.26, lat: 43.71, group: "A", size: 14}, // nice
{long: 2.349, lat: 48.864, group: "B", size: 87}, // Paris
{long: -1.397, lat: 43.664, group: "B", size: 41}, // Hossegor
{long: 3.075, lat: 50.640, group: "C", size: 78}, // Lille
{long: -3.83, lat: 48, group: "C", size: 12} // Morlaix
];
// Load external data and boot
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson", function(data){
// Filter data
data.features = data.features.filter( function(d){return d.properties.name=="France"} )
// Create a color scale
var color = d3.scaleOrdinal()
.domain(["A", "B", "C" ])
.range([ "#402D54", "#D18975", "#8FD175"])
// Add a scale for bubble size
var size = d3.scaleLinear()
.domain([1,100]) // What's in the data
.range([ 4, 50]) // Size in pixel
// Draw the map
svg.append("g")
.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("fill", "#b8b8b8")
.attr("d", d3.geoPath()
.projection(projection)
)
.style("stroke", "black")
.style("opacity", .3)
// Add circles:
svg
.selectAll("myCircles")
.data(markers)
.enter()
.append("circle")
.attr("class" , function(d){ return d.group })
.attr("cx", function(d){ return projection([d.long, d.lat])[0] })
.attr("cy", function(d){ return projection([d.long, d.lat])[1] })
.attr("r", function(d){ return size(d.size) })
.style("fill", function(d){ return color(d.group) })
.attr("stroke", function(d){ return color(d.group) })
.attr("stroke-width", 3)
.attr("fill-opacity", .4)
// This function is gonna change the opacity and size of selected and unselected circles
function update(){
// For each check box:
d3.selectAll(".checkbox").each(function(d){
cb = d3.select(this);
grp = cb.property("value")
// If the box is check, I show the group
if(cb.property("checked")){
svg.selectAll("."+grp).transition().duration(1000).style("opacity", 1).attr("r", function(d){ return size(d.size) })
// Otherwise I hide it
}else{
svg.selectAll("."+grp).transition().duration(1000).style("opacity", 0).attr("r", 0)
}
})
}
// When a button change, I run the update function
d3.selectAll(".checkbox").on("change",update);
// And I initialize it at the beginning
update()
})
</script> <script>
// The svg
const svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Map and projection
const 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:
const markers = [
{long: 9.083, lat: 42.149, group: "A", size: 34}, // corsica
{long: 7.26, lat: 43.71, group: "A", size: 14}, // nice
{long: 2.349, lat: 48.864, group: "B", size: 87}, // Paris
{long: -1.397, lat: 43.664, group: "B", size: 41}, // Hossegor
{long: 3.075, lat: 50.640, group: "C", size: 78}, // Lille
{long: -3.83, lat: 48, group: "C", size: 12} // Morlaix
];
// Load external data and boot
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson").then( function(data){
// Filter data
data.features = data.features.filter( d => d.properties.name=="France")
// Create a color scale
const color = d3.scaleOrdinal()
.domain(["A", "B", "C" ])
.range([ "#402D54", "#D18975", "#8FD175"])
// Add a scale for bubble size
const size = d3.scaleLinear()
.domain([1,100]) // What's in the data
.range([ 4, 50]) // Size in pixel
// Draw the map
svg.append("g")
.selectAll("path")
.data(data.features)
.join("path")
.attr("fill", "#b8b8b8")
.attr("d", d3.geoPath()
.projection(projection)
)
.style("stroke", "black")
.style("opacity", .3)
// Add circles:
svg
.selectAll("myCircles")
.data(markers)
.join("circle")
.attr("class" , d => d.group )
.attr("cx", d => projection([d.long, d.lat])[0])
.attr("cy", d => projection([d.long, d.lat])[1])
.attr("r", d => size(d.size))
.style("fill", d => color(d.group))
.attr("stroke", d => color(d.group))
.attr("stroke-width", 3)
.attr("fill-opacity", .4)
// This function is gonna change the opacity and size of selected and unselected circles
function update(){
// For each check box:
d3.selectAll(".checkbox").each(function(d){
cb = d3.select(this);
grp = cb.property("value")
// If the box is check, I show the group
if(cb.property("checked")){
svg.selectAll("."+grp).transition().duration(1000).style("opacity", 1).attr("r", function(d){ return size(d.size) })
// Otherwise I hide it
}else{
svg.selectAll("."+grp).transition().duration(1000).style("opacity", 0).attr("r", 0)
}
})
}
// When a button change, I run the update function
d3.selectAll(".checkbox").on("change",update);
// And I initialize it at the beginning
update()
})
</script>