Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Mmuzzheng
Last edited Mar 4, 2021
Created on Mar 4, 2021

This parallel coordinates chart visualizes the cost-of-living index across 74 cities, comparing six dimensions such as consumer price, rent, groceries, and local purchasing power. Grey background paths show all cities, while blue foreground paths highlight those selected via interactive brush filters on each axis. Built with d3.svg, d3.scale.ordinal, and d3.svg.brush, the visualization uses SVG rendering. User interaction toggles the display of foreground lines based on brush extents, providing dynamic focus on subsets of the data.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example uses a parallel coordinates chart to compare countries across multiple dimensions—population, surface area, and agricultural land percentage—over several decades. Grey background lines provide context, while steel blue foreground lines highlight the highlighted data points. Brushing on any axis filters the displayed lines, showing only those that meet the selected criteria. The visualization is built with D3 v3, using `d3.scale.ordinal` and `d3.scale.linear` for axes, `d3.svg.line` for paths, and `d3.svg.brush` for interactive filtering. Data is loaded from a CSV file.

Mmuzzheng
84% match
Loading thumbnail…

Cost of Living - Parallel Coordinates

A parallel coordinates plot displays the cost-of-living index for 90 cities across six dimensions—consumer price, rent, consumer price plus rent, groceries, restaurant price, and local purchasing power. Each city appears as a polyline connecting its values on vertical axes, with grey background lines for all cities and blue foreground lines for those selected via brushing. The visualization uses D3 v3, reading a CSV file, scaling each dimension with d3.scale.linear, and enabling interactive brush filters that hide non-matching lines.

Mmbostock
81% match
Loading thumbnail…

Untitled

This interactive scatterplot matrix visualizes an environmental dataset, with each cell showing the relationship between two variables such as age, income, and education. Users can brush across any axis to filter the data points, which hides or highlights circles across all cells simultaneously using a brush interaction implemented with `d3.brush`. The visualization is rendered as SVG using D3 v4 within a React framework, with axes scaled via `d3.scaleLinear` and colored by categorical country data. A legend identifies the three color-coded countries: China, Brazil, and USA.

Mmuzzheng
76% match
Loading thumbnail…

Untitled

A multi-line chart displays daily temperature readings for New York, San Francisco, and Austin, with each city’s time series drawn as a smooth, colored path. The visualization uses d3.tsv to load the data, d3.scaleTime and d3.scaleLinear for positioning, and d3.line with curveBasis for the paths. Interactive labels trigger hover and click handlers that highlight or toggle the visibility of each city’s line using d3 selection styling. A d3.zoom behavior is applied to the SVG, though its zoom event handler remains empty.

Ddonaldminer
74% match
Loading thumbnail…

Untitled

This interactive choropleth map displays a wide range of socioeconomic indicators for city neighborhoods, selectable via a dropdown menu. Built with React and D3.js, it renders neighborhood polygons as SVG paths, with colors encoding the chosen variable. A tooltip reveals the neighborhood name and its exact value on hover. A checkbox toggles the inclusion of the downtown area. The map data is visualized from a linked dataset, allowing for dynamic exploration of employment, education, and business statistics.

KKelsey Xu
73% match
Loading thumbnail…

parallel coordinates

This parallel coordinates chart displays six dimensions of college data—including parental income, kid earnings, and mobility rate—across six tiers of institutions, with each tier color-coded via `d3.svg.line` strokes. The visualization uses `d3.scale.ordinal` for axis placement and `d3.scale.linear` for each dimension, rendering gray background paths for all records and colored foreground paths for focus. Users can brush along any axis using `d3.svg.brush`, which filters the foreground lines to highlight subsets. Data comes from the embedded `mrc_table.csv` file.

GGoomble
73% 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
73% match
Loading thumbnail…

Untitled

This interactive choropleth map displays neighborhood-level economic and demographic data for a city, with a dropdown menu to select among over 40 metrics such as employment rates, business counts, and commercial property statistics. A checkbox toggles whether downtown neighborhoods are included in the visualization. Hovering over a neighborhood updates a tooltip showing the area’s name and its value for the selected metric. The map is rendered using D3.js with SVG paths from a GeoJSON file, and the dropdown dynamically updates the choropleth’s color scale using the viridis color palette.

KKelsey Xu
73% match