Viewing a saved revision (read-only)
d2ea5992a52c4830b8169bcb44f263b6
BARS scatter_plot_matrix
This visualization combines a scatter plot matrix with histograms along the diagonal to explore the classic Iris dataset. Using D3.js v5 with SVG rendering, it displays pairwise relationships between four flower measurements, colored by species. When users select data points, the histograms dynamically update to show the distribution of selected measurements. The code uses D3's `scalePoint`, `scaleLinear`, and `histogram` APIs to arrange the plots and compute bin counts, with the Iris dataset loaded from a local CSV file.
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); }, )