Social Media Usage Histogram

Social Media Survey Demographics Histogram

This visualization displays histograms of demographic survey data, showing the frequency distribution of respondents by gender, race, age, and LGBT status. Users can switch between these categorical variables using a dropdown menu, with each bar’s tooltip revealing the exact response count. The chart uses D3 v7’s `scaleBand`, `scaleLinear`, and `flatGroup` for binning and axes, with data loaded from a CSV via `csvParse`. The code combines demographic fields from the survey and filters out incomplete or underage responses before rendering.

81% match

Color: Social Media MQP

This visualization displays survey responses about social media usage as a diverging stacked bar chart, with each bar representing a platform and colored segments showing the distribution of agreement or frequency ratings. The code uses D3 v7’s `scaleBand` for categorical bars, `scaleLinear` for the diverging axis, and the `schemePuOr` color scheme. Data is loaded from a CSV file via `csvParse`, aggregated with `d3.rollup`, and rendered through custom functions for bars, axes, and legend. A dual-mode filter can restrict the view to two selected media platforms.

KK Munz

80% match

Social Media Survey Duration Histogram

This histogram displays the distribution of survey completion durations in seconds from a social media MQP dataset. Bins along the x-axis represent time intervals, while the y-axis shows the frequency of responses falling into each bin, with tooltips revealing the exact range and count per bar. The chart uses the D3.js library, specifically `d3.histogram()`, `d3.scaleLinear()`, and `d3.axisBottom()`/`d3.axisLeft()`, along with custom tooltip styling. Data is fetched as CSV from GitHub, filtered to exclude non-consenting and underage participants, and then aggregated into the histogram.

77% match

Social Media Bubble Chart

This visualization displays survey data as a bubble chart, comparing twelve social media platforms across four user-perception scales: community, discovery, agency, and self-expression. Each platform appears as a labeled circle, with radius size reflecting the average response score (from 1 to 5) for the selected scale, and color encoding the platform identity. A dropdown menu switches between the four scales. The chart uses D3 v7.js for rendering and interactive elements, including tooltips that display the average score and its qualitative label, with data fetched from a CSV file and processed through filtering and aggregation functions.

76% match

Fork of Menu: Social Media MQP

This visualization displays survey responses across social media platforms as a diverging stacked bar chart, with each bar segmented by six Likert-scale agreement or frequency categories. The bars are sorted by the proportion of positive responses, and a legend identifies the color-coded scale items. Built with D3 v7, the example uses `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and the `schemePuOr` color scheme. Data is loaded from a CSV file via `csvParse`, aggregated with `d3.rollup`, and rendered with SVG rect elements. A dual-mode filter restricts the comparison to two selected platforms.

DDonald Bagwell

Social Media Bubble Chart Psuedo-Viz

This pseudo-viz compares five social media platforms across four scales—community, discovery, self-expression, and agency—using a bubble chart built with D3 v7. A dropdown menu lets viewers switch between the four metrics, which changes each circle’s radius based on the selected data value (e.g., `d.c` for community). Circles are positioned horizontally by platform using `data.indexOf(d) * 150 + 100`, filled with `schemeCategory10` colors, and labeled with platform names. The data comes from survey responses in the author’s senior project repository.

Making a bar chart

A horizontal bar chart ranks social media platforms by user count, using Font Awesome icons instead of text labels for each bar's category. The visualization loads data from a CSV file and renders SVG rectangles with D3 v5's `scaleLinear`, `scaleBand`, `csv`, `axisLeft`, and `max`. The bars are filled with a red color, while the y-axis displays the platform names. The chart includes margins and uses a linear scale for the quantitative user values, with the x-axis hidden in the final output.

BbeauMarko

Axes & Labels: Social Media MQP

This visualization presents survey responses about social media usage as a diverging stacked bar chart, with each bar representing a different platform and segments colored by six-point agreement or frequency scales. The chart sorts platforms by net positive sentiment and includes labeled axes, a title, and a legend. Built with d3.v7, it uses `scaleLinear` and `scaleBand` for positioning, `axisLeft` and `axisBottom` for axes, and `schemeRdBu`-derived colors to encode responses. Data is fetched from a remote CSV and aggregated using `d3.rollup` and `d3.group`.

KK Munz