Skip to main content
100%

brushable_scatter_plot_matrices _2

✓ Published0🌍 Public
Wweird_danger
Last edited Oct 2, 2024
Created on Oct 1, 2024

This interactive scatter plot matrix displays the Iris dataset, showing pairwise relationships between sepal and petal measurements across three flower species. Users can brush any of the twelve small multiples to highlight corresponding data points across all other plots, with non-selected points fading to gray. Built with D3 v5, the visualization uses SVG rendering with `d3.brush` for the interactive selection, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` to color-code species as red, blue, and green. The data is loaded as CSV and parsed into numeric fields before rendering.

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