K

K Munz

@19kmunz·17 public vizzes

Loading thumbnail…

Final Project: SocialSight V2

SocialSight V2 visualizes survey data comparing twelve social media platforms across Likert-scale questions about community, self-expression, discovery, and agency. The dashboard offers four interactive views: a parallel coordinates summary, a single-platform bar chart, a diverging Likert scale for all platforms, and a dual-platform comparison. Code uses D3 v7 APIs including `d3.rollup`, `scaleBand`, `scaleLinear`, and `axisBottom`. Interactions include filtering by platform, selecting questions via Tom Select dropdowns, and hovering to highlight radar chart paths. Data originates from a CSV loaded via `fetch` and parsed with `d3.csvParse`.

Loading thumbnail…

Menu: Social Media MQP

This visualization displays survey responses about social media platforms as horizontal diverging stacked bar charts. Each bar represents a platform, with segments showing percentages of responses from "Strongly Disagree" to "Strongly Agree" or "Never" to "Very Frequently," depending on the question. The chart uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.schemePuOr for the color scale. Data is loaded from a CSV file via `csvParse`, processed with `d3.rollup` and `d3.group`, and rendered using D3.js v7. A dropdown menu allows switching between survey questions.

Loading thumbnail…

Bar Chart - Social Media MQP

This example shows responses to a Likert-scale survey question as a bar chart, with counts for each agreement option (e.g., “Strongly Disagree” to “Strongly Agree”) for a selected social media platform. A dropdown menu lets the viewer switch between questions, and the chart updates its scale and bar heights accordingly. The visualization uses D3 v7 modules including `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to render the bars and axes from CSV data fetched via `csvParse`, with a fixed color scheme imported from `schemePuOr`.

Loading thumbnail…

Dual Choice: Social Media MQP Project Momentum

This dual-mode diverging bar chart compares survey responses across social media platforms, allowing viewers to switch between questions and swap platforms in and out of the comparison. Built with D3 v7, it uses `scaleLinear` and `scaleBand` for positioning, `axisLeft` and `axisBottom` for axes, and a `schemePuOr` color palette. Data is loaded from a CSV via `csvParse`, with interactive dropdowns implemented through HTML `select` elements that trigger state changes and re-rendering.

Loading thumbnail…

Parallel Coordinates Plot - Social Media MQP

This interactive radar chart visualizes survey data from a social media MQP study, plotting six platforms across four human-scale attributes: Community, Self-expression, Discovery, and Agency. Each colored polygonal line represents a media platform (e.g., Twitch, TikTok), with axes scaled from 0 to 6. The visualization uses D3 v7’s `scalePoint`, `scaleLinear`, and `line` generators to construct the radar shapes, while custom hover and click handlers in `radarHover.js` and `radarLegend.js` enable highlighting and toggling of individual platforms. Data is loaded from a remote CSV and aggregated via `d3.group` and `d3.mean` to compute attribute scores.

Loading thumbnail…

New Technique: Radar Chart Interaction

This example shows a radar chart that visualizes survey responses across four attributes—Community, Self-expression, Discovery, and Agency—for twelve social media platforms. The data is fetched from a remote CSV file and processed using `d3.csvParse` and `d3.group` to compute mean scores per platform. The visualization supports interactive highlighting: hovering over a radar shape or a legend item emphasizes that platform while dimming others, using CSS classes and D3 event handlers. Clicking legend items toggles platforms on and off. The chart is built with `d3.scaleLinear` for axes, custom axis and label generation, and a manually constructed legend from a color mapping object.

Loading thumbnail…

Project Momentum: Radar Chart Data, Legend, Scales

A radar chart visualizes social media platforms across four dimensions—Community, Self-expression, Discovery, and Agency—using real survey data fetched from a GitHub gist. Each platform’s values are plotted as a closed path, with color-coded legend items distinguishing platforms like Twitch and Instagram. The chart uses D3 v7’s `scaleLinear`, `line`, `axisLeft`, and `axisBottom` to render axes and scales, while `d3.csvParse` processes the raw CSV data. The visualization is rendered as a square SVG, with axes labeled and positioned around a central point.

Loading thumbnail…

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.

Loading thumbnail…

PseudoViz: Radar Chart

This pseudo-visualization displays four radar shapes in a square SVG, each representing a media item with values for attributes C, S, D, and A on a scale of 0 to 6. The chart uses `d3.line` to construct closed paths, with `scaleLinear` mapping attribute values to horizontal and vertical coordinates, and `scaleOrdinal` with `schemeDark2` assigning distinct stroke colors. The data is hardcoded in `radarData`, with no scales or legend yet.

Loading thumbnail…

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`.

Loading thumbnail…

First Visual: Social Media MQP

A diverging horizontal stacked bar chart visualizes Likert-scale survey responses to question C3 about social media, with each bar representing a media type and color-coded segments from strongly disagree (red) to strongly agree (blue). The chart fetches CSV data, parses it with `d3.csvParse`, groups responses by question using `d3.group`, and computes percentage counts per scale point. Bars are sorted by agreement score and rendered using `d3.scaleLinear` for the x-axis and `selection.join` for SVG rectangles, with a fixed six-color palette.

Loading thumbnail…

19kmunz Mouse Follower

A mouse follower shows a spinning star that tracks the cursor across an SVG canvas, changing opacity based on horizontal position. The star rotates via the Web Animations API, while d3.js appends white circles at intervals to create a disappearing trail. The star’s SVG path is imported from a separate JavaScript file, and styling is handled through CSS.

Loading thumbnail…

PseudoViz: Diverging Likert

This visualization displays a diverging Likert scale for survey responses across twelve social media platforms. Each horizontal bar is centered at zero, with segments extending leftward (disagreement, in reds) and rightward (agreement, in blues), sized proportionally to the percentage of total responses. Bars are sorted by overall positive sentiment. The implementation uses d3 v7’s `select`, `scaleLinear`, and `join` to render SVG rects. The data is a hardcoded array of twelve six-integer counts. Colors are manually prescribed using hex values, while the d3-scale-chromatic library is loaded but not used.

Loading thumbnail…

Social Media MQP Data Exploration

This example explores survey response data from a social media study, showing how answers are grouped by platform and question tag. The visualization displays the raw parsed data as a JSON string, revealing the frequency counts of each scaled response (like “Strongly Agree” or “Very Frequently”) per question. It uses d3.csvParse and d3.group to organize the data, with d3’s selection and join methods to render the text. The code fetches a remote CSV and processes the response counts client-side.

Loading thumbnail…

Birds Arent Real Data

This example visualizes the temporal flow of tweets containing the #birdsarenotreal hashtag, sourced from Kaggle. It loads the dataset with `fetch` and parses the CSV with `d3.csvParse`, then displays the raw parsed data as formatted JSON in a `<pre>` element. The visualization uses `d3.select` and `d3.join` to bind and render the data, with D3 v7 handling state updates through a custom `setState` function.

Loading thumbnail…

ACNH Fish Data

The visualization displays raw data from the Animal Crossing: New Horizons fish dataset, presented as a JSON object. It loads a CSV file from a GitHub gist and converts it to a structured array using `csvParse`. The page uses D3 v7 to manage state and re-render the data as a formatted text block via `select`, `join`, and `.text`.

Loading thumbnail…

Elon Musk Tweets

This visualization displays all roughly 3,000 of Elon Musk’s tweets from July 2022 to January 2023, highlighting the period before and after he became head of Twitter on October 27th, 2022. The data is loaded from a CSV via the Fetch API and parsed with `d3.csvParse`. The visualization currently renders the raw parsed dataset as a `pre` element using D3’s `select` and `join` methods, with the loading state managed through a simple state object.