brushable_scatter_plot_matrices _1
This interactive scatter plot matrix explores the Iris flower dataset, showing the relationships between sepal length, sepal width, petal length, and petal width. Users can select any two dimensions for the x and y axes, with points colored by species (setosa, versicolor, virginica) using a color legend. The visualization uses d3.csv to load the data, d3.scaleLinear for axes, and d3.axisBottom and d3.axisLeft to render gridlines and tick marks. Circles are drawn as SVG elements with opacity set in CSS, and axis labels are rotated using SVG transforms.
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); }, )