Flowers menu TEST
This visualization presents a scatter plot of the Iris flower dataset, mapping sepal length against sepal width on linear scales. Each flower species appears as a colored circle, with red, blue, and green markers distinguishing Iris-setosa, Iris-versicolor, and Iris-virginica. The chart includes a dropdown menu offering "Sepal" and "Petal" options. Built with D3 v5, the code uses `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` to load and render the data as SVG elements.
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); }, )