Skip to content

Instantly share code, notes, and snippets.

@davegotz
Created January 19, 2022 21:41
Show Gist options
  • Save davegotz/1ddaedaadd5122fdce7bb4306708664e to your computer and use it in GitHub Desktop.
Save davegotz/1ddaedaadd5122fdce7bb4306708664e to your computer and use it in GitHub Desktop.
Scatterplot with Selection Brush
<html>
<head>
<title>Example of D3 Scatterplot with Selection Brush</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
/* Style information for axis labels */
.axis-label {
font-family: sans-serif;
font-size: 12px;
}
/* Style information for axis lines and tick marks */
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.dot {
stroke: black;
}
.dot.selected {
stroke: red;
}
</style>
</head>
<body>
<svg width="480" height="480"></svg>
<script>
// Define some values we'll use in many functions, including scales and
// a reference to the parent SVG element.
// First the x axis scale for life expectancy.
let margin = 40;
let x = d3.scaleLinear()
.domain([65,90])
.range([margin,480-margin]);
// Now the y axis scale for poverty rate.
let y = d3.scaleLinear()
.domain([5,30])
.range([480-margin,margin]);
// Next the svg element.
let svg = d3.select("svg");
// Now load the data and draw!
d3.csv("scatterplot_data.csv", d=>{ return {
"state": d.state,
"life_expectancy": +d.life_expectancy,
"poverty_rate": +d.poverty_rate
}})
.then(data => {
// New draw the X axis and label.
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0,"+(480-margin)+")")
.call(d3.axisBottom(x))
svg.append("text")
.attr("class", "axis-label")
.attr("x", x((90+65)/2))
.attr("y", 480-3)
.style("text-anchor", "middle")
.text("Life Expectancy");
// Now the Y axis and label.
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate("+margin+",0)")
.call(d3.axisLeft(y));
svg.append("text")
.attr("transform", "rotate(90)")
.attr("class", "axis-label")
.attr("x", y((30+5)/2))
.attr("y", -3)
.style("text-anchor", "middle")
.text("Poverty Rate");
// Now we can append the data points.
svg.selectAll(".dot").data(data).join("circle")
.attr("class", "dot")
.attr("cx", d=>x(d.life_expectancy))
.attr("cy", d=>y(d.poverty_rate))
.attr("r", 3)
.style("fill", "lightblue");
// As a final step, let's add a brush to allow selection.
const brush = d3.brush().on("start brush end", brushed);
svg.append("g")
.call(brush)
});
function brushed(brush_event) {
if (brush_event.selection === null) {
svg.selectAll(".dot")
.classed("selected", false)
}
else {
let [[x0, y0], [x1, y1]] = brush_event.selection;
svg.selectAll(".dot")
.classed("selected", d => x0 <= x(d.life_expectancy) && x(d.life_expectancy) <= x1 && y0 <= y(d.poverty_rate) && y(d.poverty_rate) <= y1 ? true : false);
}
}
</script>
</body>
</html>
state life_expectancy poverty_rate
Alabama 75.4 22
Alaska 78.3 21
Arizona 79.6 23
Arkansas 76 22
California 80.8 24
Colorado 80 16
Connecticut 80.8 14
Delaware 78.4 17
District of Columbia 76.5 25
Florida 79.4 20
Georgia 77.2 23
Hawaii 81.3 24
Idaho 79.5 19
Illinois 79 19
Indiana 77.6 20
Iowa 79.7 14
Kansas 78.7 17
Kentucky 76 22
Louisiana 75.7 27
Maine 79.2 16
Maryland 78.8 16
Massachusetts 80.5 15
Michigan 78.2 20
Minnesota 81.1 13
Mississippi 75 25
Missouri 77.5 19
Montana 78.5 19
Nebraska 79.8 14
Nevada 78.1 21
New Hampshire 80.3 10
New Jersey 80.3 17
New Mexico 78.4 27
New York 80.5 22
North Carolina 77.8 21
North Dakota 79.5 14
Ohio 77.8 20
Oklahoma 75.9 19
Oregon 79.5 19
Pennsylvania 78.5 17
Rhode Island 79.9 18
South Carolina 77 24
South Dakota 79.5 17
Tennessee 76.3 21
Texas 78.5 23
Utah 80.2 16
Vermont 80.5 14
Virginia 79 16
Washington 79.9 16
West Virginia 75.4 21
Wisconsin 80 15
Wyoming 78.3 14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment