a2-visualizing-amounts-p5

100%

a2-visualizing-amounts-p5

✓ Published0🌍 Public

Last edited Feb 6, 2024

Created on Feb 6, 2024

This visualization presents a grouped bar chart comparing the number of survey participants with self-reported mental health disorders—depression, anxiety, and insomnia—across four primary streaming services: Spotify, Apple Music, YouTube Music, and Pandora. Built with the p5.js library, the sketch loads CSV data from a Gist URL, aggregates counts for participants with a severity score of five or higher, and renders horizontal bars. The chart includes a legend and labeled axes, highlighting the observation that YouTube Music outranks Apple Music despite the latter's larger user base.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

A3 - Visualizing Distributions using P5

A bar chart visualizes the maximum hours of music listened to per day across ages 10 to 65, using data from a CSV file. The p5.js library handles canvas rendering, while the `loadTable` API preloads and parses the remote data. Bars are drawn with `rect` calls, with axis ticks and labels positioned manually. The chart aggregates hourly values by age, filtering out hours exceeding 24, and displays purple bars against a white background with gridlines.

AAndrew Blakeslee Moore

72% match

Loading thumbnail…

A2 - Visualizing Amounts using P5js

This example presents four P5.js visualizations of amounts: a bar chart, a dot plot, a heatmap, and a bar chart with a logarithmic scale. It uses the P5.js library for drawing and rendering. Each chart is embedded via VizHub links on a plain HTML page. The code demonstrates different approaches for encoding quantitative values, including rectangular bars, circles, color intensity in a grid, and a log-transformed axis for data with wide ranges.

DDuc Pham

67% match

Loading thumbnail…

Monthly Users of Streaming Platforms

This visualization shows the monthly user counts for five streaming platforms across five months, using a stacked horizontal bar chart where each bar segment is colored by platform. The chart uses D3 v7 with an SVG rendering approach, applying `d3.stack()` to create the stacked data, `d3.scaleBand()` for the categorical month axis, and `d3.scaleOrdinal()` with a category10 color scheme for platform colors. Data is loaded from a CSV file via `d3.csv()`, with axes and labels drawn using `d3.axisBottom` and `d3.axisLeft`.

Vvineelaramulapalli32

66% match

Loading thumbnail…

Histogramme des pépites

This grouped bar chart compares emotional responses to YouTube channels, distinguishing between "pépites" (gems) and non-gems. Each channel is on the x-axis, with bars representing different reaction categories like "Réflexion" and "Amusement" for four raters. The data is loaded from a CSV file using `d3.csv`. The visualization is built with D3 v4, using `d3.scaleBand` for the grouped positioning and `d3.scaleOrdinal` for bar colors.

AAtomy9

66% match

Loading thumbnail…

Histogramme des pépites

This visualization displays a grouped bar chart comparing viewer ratings across multiple YouTube channels, with each channel represented by a cluster of bars for different hosts. The chart shows both positive and negative values, with bars extending above and below the baseline to reflect each host’s score. The code uses D3 v4 with SVG rendering, employing `d3.scaleBand` for the categorical x-axes and `d3.scaleLinear` for the y-axis. Data is loaded from a CSV file via `d3.csv`, and the ordinal color scale maps each host to a distinct color.

FFlazyy

66% match

Loading thumbnail…

music2

This interactive bar chart explores a dataset of music tracks, showing the average popularity of songs grouped by a selected attribute. Users can switch the grouping variable via dropdown menus, and a scrollable overview bar allows panning through many categories. Built with D3.js and Vue, the visualization uses `scaleBand` and `scaleLinear` for positioning and `axisBottom`/`axisLeft` for axes, with drag handling to update the visible range. Data is loaded from a CSV file.

Aa15923647

66% match

Loading thumbnail…

Histogramme des pépites

This grouped bar chart compares viewer ratings across multiple YouTube channels, with each channel’s score broken down by four individuals. The visualization highlights differences in opinion for each show, including negative values for disliked content. The chart is built with D3 v4, using `d3.scaleBand` for the categorical axes and `d3.scaleLinear` for the value axis. Data is loaded from a CSV file, and each bar’s height corresponds to the rating, with colors assigned via `d3.scaleOrdinal`. SVG rendering and D3’s axis components handle the visual layout.

FFlazyy

65% match

Loading thumbnail…

DataViz Project - Second Visualization

This interactive bar chart compares unemployment rates and mental illness prevalence across the five most affected countries for a selected year. Users can switch between 1995, 2000, 2005, 2010, and 2015 via a React dropdown menu. The visualization uses React hooks, d3.scaleBand and d3.scaleLinear for axes, and d3.csv to load the mental health dataset from a GitHub gist. Hovering over the color legend highlights corresponding bars and fades others, with tooltips showing exact values.

FFelipe Mejías

65% match