Viewing a saved revision (read-only)
9b66938c4fd0440baaf1cb61d277882f
Parallel Coordinates with Brushing
This parallel coordinates plot visualizes the Iris dataset, enabling multidimensional filtering through brushing on each axis. The visualization uses D3 scales, line generators, and brushY interactions, with transitions that fade lines in and out as filters change. Color encoding distinguishes species via scaleOrdinal with a hue shift applied to the default scheme. The chart is responsive, adapting to container resizing through observeResize, and uses mix-blend-mode for overlapping line rendering.
AI-generated descriptionA parallel coordinates plot with brushing, multidimensional filtering, and responsiveness. Shows the Iris Dataset.
Also a test case for exporting code out of VizHub and into a Vite project! See also vite-export-template
Inspired by:
- https://observablehq.com/@d3/parallel-coordinates
- https://observablehq.com/@d3/brushable-parallel-coordinates
Exploring Parallel Coordinates: A Versatile Visualization Technique
Parallel coordinates is a versatile visualization technique that can be applied to almost any multi-dimensional tabular data. It allows for multi-dimensional filtering, where you can specify a min and max value for multiple dimensions or attributes of the data.
This example represents a lot of my thinking and iteration
on parallel coordinates over the past couple of years. It
uses vanilla JavaScript and unidirectional data flow,
pulling in things from D3 and the Iris dataset, which
represents an iris flower with attributes like
sepal length, sepal width, petal length,
petal width, and species.
The main function takes a container, a DOM element, and
state and setState as arguments. It sets up a top-level
SVG and invokes parallel coordinates with various
parameters, including brushed intervals from the state.
Brushed intervals represent the state of all the brushes
combined. The updateBrushedInterval function updates the
state with the min and max values for the brushed area. The
state of the application is critical for understanding how
this visualization works.
The parallel coordinates implementation supports animated
transitions, where lines fade in and out as they get added
to or removed from the filtered set. The filtering logic
uses data.filter to determine if a given row should be
included in the filtered set based on the brushed intervals.
Memoization is used to optimize the filtering of data, ensuring that the calculation is only recomputed when necessary. The brush interactions are set up using D3's brush functionality, with event listeners for brush start, brush move, and brush end.
The X and Y scales are defined based on the columns and their types, with linear scales for quantitative columns and point scales for categorical columns. The color scale uses a hue shift to create more vibrant colors.
The line generator generates the path string for each multi-line path, mapping over the columns for each row and generating an array of X and Y coordinates. This allows for the creation of parallel coordinates with brushing, multi-dimensional filtering, and responsiveness.
For those interested in exploring further, I challenge you to fork this visualization and input your own data. You might be surprised at how versatile this technique is and how well it fits with most datasets. Good luck!