Tooltip test
This interactive scatter plot displays the Iris flower dataset, allowing users to compare sepal and petal measurements across three species. Two dropdown menus dynamically change the x- and y-axis variables, updating the axes and data points accordingly. Hovering over a point reveals a tooltip with the species and the selected measurement values, while the plot uses d3.scaleLinear, d3.scaleOrdinal, and d3.axisBottom/axisLeft for rendering. The visualization is built with D3 v5, rendered as SVG, and styled with CSS.
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); }, )