davegotz · January 19, 2022 21:41
diff --git a/index.html b/index.html
 <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>
diff --git a/scatterplot_data.csv b/scatterplot_data.csv
	<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