Skip to main content
100%

Fork of Flowers menu dropdownmenu TEST

✓ Published1🌍 Public
Wweird_danger
Last edited Oct 2, 2024
Created on Sep 10, 2024
Forked from Flowers menu TEST

This interactive scatter plot displays the Iris flower dataset, mapping sepal length and width for each sample. A dropdown menu, built with a custom `dropdownMenu` function, lets users select different data columns. The visualization uses d3.v5's `scaleLinear`, `axisLeft`, and `axisBottom` to render the axes and circles, with data loaded from a CSV file. Color-coded legends for the three Iris species appear alongside the plot.

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