Fork of Flowers dropdownmenu TEST
This interactive D3.js scatter plot lets users explore the Iris flower dataset through a dropdown menu that selects the x-axis numeric column (sepal or petal length), while the y-axis always shows sepal width. The visualization uses D3's `scaleLinear`, `axisBottom`, and `axisLeft` functions to render axes with grid lines, and a custom `dropdownMenu` function handles the user selection. Data is loaded from a local CSV file and point colors correspond to the three Iris species, with a legend displayed to the right.
AI-generated description// // imported function axisLeft for namings // // maximum population number should map to maximum width of our svg // // mac is to compute maximum value where it takes 2 values = data and // // d 1 row of data, and returns population number max // // min and maximum value in our data for the width, first entry should be 0
// const xAxisTickFormat = (number) => // format('.3s')(number).replace('G', 'B'); // // // creating a function to customize big numbers wit G
// g.append('g').call(yAxis).selectAll('.domain').remove(); // // '' selector for string // // select elements we want to remove(to remove ticks/lines)
// // The text-anchor attribute is used to align
// // (start-, middle- or end-alignment) a string of pre-formatted text
// // or auto-wrapped text where the wrapping area
// // is determined from the inline-size property relative to a given point.
csv('http://vis.lab.djosix.com:2024/data/iris.csv').then( (data) => { data.forEach((d) => { d.sepalLength = +parseFloat(d['sepal length']); d.sepalWidth = +parseFloat(d['sepal width']); d.petalLength = +parseFloat(d['petal length']); d.petalWidth = +parseFloat(d['petal width']); }); render(data); }, )