Parallel Coordinates2

100%

Parallel Coordinates2

✓ Published0🌍 Public

Last edited Jun 7, 2018

Created on Jun 6, 2018

This parallel coordinates chart displays genomic alignment data between two fungal species, with each line representing a syntenic region connected across eight numeric and categorical axes. Axes can be clicked and dragged to reorder dimensions, and brushed to filter the data interactively. The SVG visualization uses D3 v3 scales to map genomic positions and identifiers, with steelblue polylines on a light gray backdrop. Reordering axes is enabled, allowing viewers to rearrange dimensions and explore correlations among genomic coordinates and gene identifiers across the two species.

AI-generated description

This is a version of Mike Bostock’s parallel coordinates example, modified to include reorderable axes.

This parallel coordinates visualization of cars from the ‘70s and ‘80s demonstrates one of D3 2.5.0’s new interactive features: the brush component. By clicking and dragging along any axis, you can specify a filter for that dimension. The brush component is also used in the updated scatterplot matrix example.

forked from <a href='http://bl.ocks.org/jasondavies/'>jasondavies</a>'s block: <a href='http://bl.ocks.org/jasondavies/1341281'>Parallel Coordinates</a>

forked from <a href='http://bl.ocks.org/caev03/'>caev03</a>'s block: <a href='http://bl.ocks.org/caev03/178e48b22e408b690f44b31c587e2067'>Parallel Coordinates</a>

forked from <a href='http://bl.ocks.org/caev03/'>caev03</a>'s block: <a href='http://bl.ocks.org/caev03/91319e6ef943b5f5f1ea87145b9c8088'>Parallel Coordinates2</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Parallel Coordinate Plot

A parallel coordinate plot displays 40 leaf specimens across 14 numeric traits, with each specimen drawn as a stroked path. Users can drag axis labels to reorder the dimensions, and the paths and axes animate smoothly during reordering. The visualization uses D3 v5 with SVG rendering, relying on `d3.scalePoint`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.drag` to handle interactivity. Data comes from a CSV file that includes leaf shape and texture measurements.

HHugo-Dominguez

75% match

Loading thumbnail…

Parallel Coordinates

This parallel coordinates plot uses gray background lines to show all countries and blue foreground lines for focus, with each axis representing a dimension from the total4.csv dataset (Happiness, Art/Educational, Environmental, and other membership categories). Users can drag axes to reorder dimensions via `d3.behavior.drag`, and brush along axes with `d3.svg.brush` to filter which lines remain visible. The code builds SVG paths with `d3.svg.line`, applies linear scales per dimension, and animates reordering using `transition`.

Cchungmin-yu

75% match

Loading thumbnail…

Parallel Coordinates

This parallel coordinates chart uses color-coded polylines to display country-level survey data across multiple dimensions, including happiness, art/education, environmental concern, and organizational memberships. Built with D3.js v3, the visualization renders SVG paths for both background context (gray) and foreground focus (steel blue) lines. The code implements interactive brushing via `d3.svg.brush()` to filter data, and uses `d3.behavior.drag()` to allow users to reorder axes by dragging. Axis labels are mapped through `d3.scale.ordinal()` and `d3.scale.linear()`, with data loaded from the `total4.csv` file.

KKanwalNayan

74% match

Loading thumbnail…

Parallel Coordinates

This parallel coordinates visualization displays multivariate data from a cars dataset recorded in CSV format, with each row represented as a path crossing multiple vertical axes. Users can drag axes to reorder dimensions and brush along them to filter highlighted foreground lines, while gray background lines provide context. Built with D3 v3, the example uses SVG rendering, ordinal and linear scales, `d3.svg.axis`, `d3.svg.line`, `d3.behavior.drag`, and `d3.svg.brush`. Axes reorder smoothly with transitions, and brushing toggles focus based on selected extents.

BBBischof

74% match

Loading thumbnail…

Fork of Fork of Parallel Coordinates

This example shows a parallel coordinates plot of leaf measurements from a CSV dataset, with each row representing a specimen and each vertical axis a feature such as eccentricity, aspect ratio, and solidity. Lines are colored by leaf class, with a legend distinguishing three classes in blue, yellow, and red. The visualization uses D3 v4 with SVG and animation, building scales via `d3.scalePoint` and `d3.scale.linear`, rendering paths with `d3.line`, and supporting interactive dragging of axes through `d3.behavior.drag`. Brushing is applied to the background paths for context, while foreground paths highlight selected data.

HHugo-Dominguez

74% match

Loading thumbnail…

Fork of HW02-Parallel Coordinates chart

A parallel coordinates chart of the Iris dataset maps four numeric measurements to vertical axes, with each flower sample drawn as a colored line by species. The chart is implemented using D3.js v7 and SVG, and the arrangement of axes corresponds to interactive HTML elements that can be reordered via the Sortable library, triggering a redraw of the visualization. Axis scales are created with `d3.scaleLinear` for numeric fields and `d3.scaleBand` for species, while `d3.line` generates the polygonal paths linking each dimension.

EErfan Moeini

74% match

Loading thumbnail…

Parallel Coordinates

This parallel coordinates chart visualizes the Iris dataset, with each vertical axis representing a flower measurement and colored lines tracking individual specimens across all four dimensions. Users can drag axes horizontally to reorder them, with connecting lines between adjacent axes updating in real time. The visualization uses D3.js v7 with React, employing `scaleLinear` for axis scaling and custom drag handlers. Data is loaded via `d3.csv`, and lines are rendered as SVG elements colored by species classification.

Aaaron.chu626@gmail.com

74% match

Loading thumbnail…

Fork of HW02-Parallel Coordinates chart

This interactive parallel coordinates chart displays the classic Iris dataset, with each row rendered as a polyline connecting five vertical axes for sepal length, sepal width, petal length, petal width, and species class. Users can drag the dimension labels in the Sortable-enabled list above the chart to dynamically reorder the axes, prompting the `render` function to rebuild the visualization. The plot uses D3 v7 scales and `d3.axisLeft` to position axes, while line colors are assigned per species via CSS classes. It also demonstrates a declarative D3 pattern with a reusable `parallelPlot` function, and the `dropdownMenu.js` module provides a reusable select-menu component.

DDing

73% match