Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Mmuzzheng
Last edited Mar 16, 2021
Created on Mar 16, 2021
Forked from HTML Starter

This interactive parallel coordinates chart visualizes sociodemographic factors and discrimination impacts on Perceived Stress Scale (PSS) scores, with lines colored by event type. Users can drag axes to reorder dimensions. The visualization uses d3.v3 with SVG rendering and animation, featuring ordinal color scales, linear scales for each dimension, and d3.behavior.drag for axis interaction. Data is loaded from a CSV file containing categorical variables like sex, race, income, and education.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays perceived stress scores (pss) across different racial/ethnic groups, with each bar representing an individual response. It uses D3 v5 with SVG rendering, applying `d3.scaleLinear` for the x-axis and `d3.scaleBand` for categorical y-axis grouping. The chart customizes axes by removing tick lines and domains, and formats x-axis labels with `d3.format`. Data comes from a CSV file containing survey responses with race categories and stress scores.

Mmuzzheng
80% match
Loading thumbnail…

Untitled

This interactive scatterplot compares a selected social indicator against age-standardized depression rates across countries, with each circle representing a year's data for a chosen region. Users can switch the x-axis between Freedom, Corruption, Generosity, and Health, and filter by geographic region via dropdown menus. Built with React and D3 v6, the visualization uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render SVG circles, with a color-coded legend distinguishing years. Data comes from the `data.csv` file, and the title suggests a thematic focus on societal factors versus depression.

NNikithakatta30
76% 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
75% match
Loading thumbnail…

Content Classification

This stacked bar chart visualizes how stress perception decomposes across seven content classification categories, with each bar segmented by severity levels from a CSV dataset. A dropdown menu switches between experimental sessions, while a checkbox toggles sorting by total magnitude versus classification order. The visualization uses D3 v6 scales (d3.scaleBand, d3.scaleLinear, d3.scaleOrdinal), d3.stack for layering, and d3.legendColor to display a severity legend, with animated transitions on axes and rectangles.

Yyuxinzhou0312
74% match
Loading thumbnail…

Untitled

This interactive scatterplot explores the relationship between a selectable metric (Freedom, Corruption, Generosity, or Health) and depression rates across all ages, filtered by world region. Colored dots represent different years, with tooltips revealing exact values. The visualization uses D3 v6 to load CSV data via `d3.csvParse`, render SVG elements, and update scales, axes, and circles dynamically through dropdown selectors.

NNikithakatta30
74% match
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
74% match
Loading thumbnail…

Untitled

This is a scatterplot matrix visualizing relationships among six traits from an environmental dataset, with each cell showing a plot for a pair of traits. The data points are colored by eventname using a categorical color scale, and users can click cells to filter points via a brush interaction. The visualization is built with D3 v4, using scales like `d3.scaleLinear` and `d3.scaleOrdinal`, a brush API for filtering, and SVG rendering within a React framework. The data is loaded from a CSV file, and a legend labels the three event categories.

Mmuzzheng
73% match
Loading thumbnail…

Untitled

This interactive scatter plot visualizes the relationship between "Menus" (a perceived social metric) and depression levels across different regions and years, using data loaded via `d3.csv`. The visualization compares various quantitative attributes—Freedom, Corruption, Generosity, and Health—against the "Allages" depression score, with data points colored by year. Users select a specific region and X-axis attribute through dropdown menus, which triggers an `update` function to filter the dataset, rescale the linear axes via `d3.scaleLinear`, and redraw the circles. The code uses D3 v6 APIs for SVG rendering, axis generation (`d3.axisBottom`, `d3.axisLeft`), and categorical color assignment (`d3.scaleOrdinal`).

NNikithakatta30
73% match