Fork of Parallel Coordinates with Brushing EV Data (Ayush)

100%

Fork of Parallel Coordinates with Brushing EV Data (Ayush)

✓ Published1🌍 Public

Last edited Mar 21, 2024

Created on Mar 21, 2024

Forked from Parallel Coordinates with Brushing

This example visualizes electric vehicle specifications across multiple quantitative axes, including Efficiency, Price, Range, Top Speed, and Acceleration. Users can brush along any axis to filter the displayed data, highlighting car models that fall within selected ranges while dimming others. The visualization uses D3.js with `scalePoint` and `scaleLinear` to map each dimension, and `transition` with eased opacity to animate filtered lines in and out. Categorical data, such as car brand, determines the color of each path via `scaleOrdinal` and `schemeCategory10`. The dataset appears to be from a custom EV data package, and the chart updates responsively using the `observeResize` helper.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Parallel Coordinates with Brushing

This interactive parallel coordinates visualization enables exploration of multidimensional datasets through linked brushing and filtering. Built with D3.js, it renders lines for each data point across categorical and quantitative axes, using `scalePoint` and `scaleLinear` Y-scales respectively. Users can brush along any axis to filter data across all dimensions simultaneously, with the brushed intervals managed as state. The visualization responds to container resizing and uses a custom color scale with a hue shift for enhanced category distinction. It supports both categorical and quantitative columns, making it adaptable for various datasets.

Vvigneshs1006@gmail.com

80% match

Loading thumbnail…

Fork of Ayush - Assignment 7

This scatter plot displays the correlation between driving range and price for electric vehicles, sourced from a Kaggle EV_Data dataset. Each point represents a vehicle model, with color encoding car brands from Germany. The chart is built with React and D3, using `d3.scaleLinear` for both axes and rendering as an SVG. Hovering reveals details like brand, exact range, and price. An interactive legend lists the ten car brands in order of occurrence.

Sshindeayush76@gmail.com

79% match

Loading thumbnail…

Parallel Coordinates

This parallel coordinates visualization displays automotive data from the 1970s and 1980s, with each car represented as a line across seven dimensions such as fuel economy, horsepower, and weight. Users can drag axes to reorder dimensions and brush along an axis to filter which cars remain visible. Built with D3 v3, it uses `d3.svg.brush` for interactive filtering, `d3.svg.axis` for scales, and `d3.behavior.drag` to reposition axes. The SVG renders both background and foreground paths, with foreground lines dynamically hidden based on brush extents.

深深度碎片

79% match

Loading thumbnail…

Untitled

This interactive parallel coordinates chart visualizes a dataset of cars and their specifications, such as fuel economy, horsepower, and weight. Each car is represented by a line connecting its attribute values across multiple vertical axes. Users can drag axes to reorder them and use brush controls on each axis to filter which vehicles remain highlighted, with the background context paths hidden while dragging. The visualization is built with D3.js v3, using SVG for rendering, `d3.svg.axis` for axes, and `d3.behavior.drag` and `d3.svg.brush` for interaction.

QqOp3

79% match

Loading thumbnail…

Untitled

This visualization displays a parallel coordinates plot of automobile data from the cars.csv file, with each line representing a car and each vertical axis a numeric attribute such as economy, horsepower, or weight. The axes can be dragged to reorder dimensions, and brushing on an axis filters the foreground lines to highlight cars matching the selected range. The implementation uses D3 v3 with d3.svg.line for paths, d3.svg.axis for scales, and d3.svg.brush for interactive filtering, rendered as animated SVG.

WWei-Che Chang

79% match

Loading thumbnail…

Parallel Coordinates

This parallel coordinates visualization displays automotive data from the 1970s and 1980s, with each car represented as a polyline crossing seven axes for metrics like economy, cylinders, power, and weight. Using D3 v3, the SVG-based chart renders gray background lines for all cars and steelblue foreground lines that filter interactively. A d3.svg.brush component on each axis allows users to drag and select ranges along a dimension, dynamically hiding lines that fall outside the brushed extent. The code loads car data from a CSV file and applies linear scales with d3.scale.linear for normalization.

Mmbostock

78% match

Loading thumbnail…

Parallel Coordinates

This interactive parallel coordinates visualization displays automotive data for cars from the 1970s and 1980s. Users can click and drag along any axis to brush and filter the dataset, or drag axis labels to reorder dimensions. Built with D3 v3, the SVG rendering uses `d3.svg.axis`, `d3.svg.line`, `d3.behavior.drag`, and `d3.svg.brush` to support filtering and dynamic reordering. The cars.csv dataset includes attributes like economy, cylinders, horsepower, and weight.

Mmbostock

78% match

Loading thumbnail…

Untitled

This interactive parallel coordinates plot uses the D3.js v3 library to visualize a dataset of car characteristics, including fuel economy, engine displacement, power, weight, and acceleration. The SVG rendering shows each car as a polyline crossing multiple vertical axes, with steelblue foreground lines for focus and grey lines for background context. Users can drag the axis labels to reorder the dimensions and use the built-in brush component on each axis to filter the displayed cars dynamically, updating the foreground paths in real time.

Eeugene-gilmore

78% match