davegotz/index.html

## 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>

## scatterplot_data.csv

          
            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
	<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