bradfordcp/data.csv

## data.csv

          
            col1
            x
            y

            
              a
              -3
              -3

            
              a
              -2
              -2

            
              a
              -1
              -1

            
              b
              0
              0

            
              c
              1
              1

            
              c
              2
              2

            
              c
              3
              3

## index.html
<!DOCTYPE html>
<html>

<head>
    <title>Plotly CSV filter sample</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <meta charset="UTF-8" />
</head>

<body>
    <select id="dropdown-filter">
        <option value="" selected>CHOOSE ONE</option>
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </select>

    <div id="plot"></div>

    <script>
        d3.csv("data.csv").then(rows => {
            d3.select("#dropdown-filter")
                .on("change", e => { plot() });

            function plot() {
                const filter = d3.select("#dropdown-filter").node().value;

                let xs = [];
                let ys = [];

                console.log(rows, filter);

                rows.filter(row => row.col1 === filter)
                    .forEach(row => {
                        xs.push(row.x);
                        ys.push(row.y);
                    });

                var trace1 = {
                    x: xs,
                    y: ys,
                    mode: 'markers',
                    type: 'scatter'
                };

                let layout = {
                    title: "Sample",
                    xaxis: { range: [-5, 5] },
                    yaxis: { range: [-5, 5] }
                };

                var data = [trace1];

                Plotly.newPlot('plot', data, layout);
            }

            plot();
        });
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Plotly CSV filter sample</title>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
	<meta charset="UTF-8" />
	</head>

	<body>
	<select id="dropdown-filter">
	<option value="" selected>CHOOSE ONE</option>
	<option value="a">A</option>
	<option value="b">B</option>
	<option value="c">C</option>
	</select>

	<div id="plot"></div>

	<script>
	d3.csv("data.csv").then(rows => {
	d3.select("#dropdown-filter")
	.on("change", e => { plot() });

	function plot() {
	const filter = d3.select("#dropdown-filter").node().value;

	let xs = [];
	let ys = [];

	console.log(rows, filter);

	rows.filter(row => row.col1 === filter)
	.forEach(row => {
	xs.push(row.x);
	ys.push(row.y);
	});

	var trace1 = {
	x: xs,
	y: ys,
	mode: 'markers',
	type: 'scatter'
	};

	let layout = {
	title: "Sample",
	xaxis: { range: [-5, 5] },
	yaxis: { range: [-5, 5] }
	};

	var data = [trace1];

	Plotly.newPlot('plot', data, layout);
	}

	plot();
	});
	</script>
	</body>

	</html>