Skip to main content
100%

Flowers menu TEST

✓ Published2🌍 Public
Wweird_danger
Last edited Sep 9, 2024
Created on Sep 8, 2024

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); }, )

MIT Licensed

Similar vizzes