paralell coordinates

100%

paralell coordinates

✓ Published0🌍 Public

Last edited Apr 5, 2025

Created on Apr 5, 2025

This parallel coordinates plot visualizes mental health metrics, including Anxiety, Depression, and Sleeplessness, with lines colored by gender (steelblue for males, hotpink for females). The code uses D3 v7’s `d3.csv` to load student data, `d3.scaleLinear` and `d3.scalePoint` to map dimensions, and `d3.line` to generate paths. Axes are added via `d3.axisLeft`, and hovering highlights individual lines by increasing opacity and stroke width.

AI-generated description

MIT Licensed

Similar vizzes

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

77% 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

77% match

Loading thumbnail…

Fork of Assignment 5 - Prototype 2

This interactive scatter plot visualizes the relationship between sleep duration and stress level, with individual data points colored by gender. The visualization, built with React and D3 v7, loads data from a Kaggle CSV file and renders an SVG chart. It includes axes with labels, a legend, and per-gender dashed trend lines computed via least-squares regression. Tooltips display detailed information about each person’s ID, gender, sleep duration, stress level, and sleep disorder. The chart employs D3’s `scaleLinear`, `scaleOrdinal`, and `axisBottom`/`axisLeft` functions for scaling and axes, with `schemeTableau10` providing the color palette.

Ccsabavath@wpi.edu

77% 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

75% match

Loading thumbnail…

sleep-vs-stress-gender-tooltips

A scatter plot displays sleep duration against stress level from a Kaggle sleep health dataset, with points colored by gender and a legend. D3.js v7 renders the SVG, applying linear scales, axes, gridlines, and per-gender dashed regression lines computed via least squares. Hovering a point triggers a custom tooltip showing person ID, gender, sleep, stress, and sleep disorder. React manages the component lifecycle, initializing the chart after asynchronously loading and parsing the CSV.

Ccsabavath@wpi.edu

74% match

Loading thumbnail…

First Project Prototype – Sleep & Stress Bar Chart

This scatter plot visualizes the relationship between sleep duration and stress level, with points colored by gender and dashed trend lines showing the per-group linear regression. It uses D3 v7 functions like `d3.scaleLinear`, `d3.axisBottom`, and `d3.scaleOrdinal` on an SVG canvas, loading survey data from a Kaggle CSV. A legend and hover tooltips reveal additional details, while the chart highlights how higher stress correlates with reduced sleep, particularly for females.

Ccsabavath@wpi.edu

74% match

Loading thumbnail…

based on gender , sleeplessness- avg anixety

This grouped bar chart visualizes average anxiety levels across five ordered sleeplessness categories, split by gender (F and M). The chart uses D3.js v7 with SVG rendering and animation, drawing bars that grow from zero via a duration-800 transition. It loads CSV data, applies `d3.rollups` for grouping and `d3.mean` aggregation, and scales colors with a `d3.scaleOrdinal` scheme. Interactive tooltips on `mouseover` and `mouseout` events display exact values, while axis labels and a legend clarify the comparison.

Ddeekshakondam@gmail.com

74% match

Loading thumbnail…

Fork of Fork of HTML Starter

This scatter plot visualizes the relationship between sleep duration and stress level from a Kaggle dataset on sleep health and lifestyle, with points colored by gender and a legend for reference. Built with React and D3 v7, the chart uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `schemeTableau10` for categorical coloring, and `d3.axisBottom`/`axisLeft` for ticks. Hovering over a point reveals a tooltip with details on person ID, gender, sleep, stress, and sleep disorder, rendered as SVG circles via a `for..of` loop.

YYuXIA_2025

74% match