Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Parallel Coordinates with Brushing

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

2a45fd881c954f8f8eacf7a1844689a4

Open

Parallel Coordinates with Brushing

5 stars36🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Mar 3, 2024
Forked from Circles with D3

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 description

A 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:

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.

Key Features and Implementation

  • Interactive Widgets: Real-time feedback with continuous hot reloading. Adjust properties like font size on the fly with interactive widgets, enhancing the coding experience.
  • Simplified Entry Point: Say goodbye to index.html. The entry point is now a main function exported from index.js, taking a container DIV and an options object with state and setState.
  • Dynamic Filtering: The 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.

Technical Details

  • Data Handling: The filtering logic uses data.filter to determine if a given row should be included in the filtered set based on the brushed intervals.
  • Scaling: 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.
  • Color Scheme: The color scale uses a hue shift to create more vibrant colors.
  • Line Generation: 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.

Exploration and Customization

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!