yeeet0421

@yeeet0421·9 public vizzes

data vis hw3

This interactive dashboard explores a Spotify dataset, displaying a genre treemap alongside a bar chart of track counts for the top 10 artists within a selected genre. The interface includes 64 small scatter plots comparing musical attributes for the chosen genre, with a highlighted overlay for a selected artist. Built with React and D3 v7, the visualization uses SVG rendering, d3.treemap for the genre hierarchy, d3.scaleBand for the bar chart, and d3.scaleLinear for the scatter plots. Users can click the treemap to change genres and bar chart bars to filter artists.

Nov 20, 2022

Loading thumbnail…

Fork of Bubbles with Json Data

This visualization displays a bubble chart built from JSON data, with each circle representing a person and sized according to a numeric value. The bubbles are labeled with truncated names and monetary amounts, and clicking one triggers a process load. The code uses d3.pack for hierarchical layout, d3.hierarchy for data structuring, and D3 selections to append SVG circles and text. The visualization is rendered in a React framework with SVG, using the d3.v5 library.

Nov 7, 2022

Loading thumbnail…

data vis 2

A parallel coordinate plot visualizes the Iris dataset’s four numeric measurements across categorical species, with each flower as a polyline and axes colored by class. Users can drag any axis horizontally to reorder dimensions, with paths animating smoothly to the new arrangement via D3 transitions. Built with React and D3 v5, it uses `scalePoint`, `scaleLinear`, `scaleOrdinal`, `axisLeft`, `line()`, and the `drag` behavior. SVG renders the polylines, axes, and a custom legend, while CSV data is loaded asynchronously.

Oct 17, 2022

Loading thumbnail…

data vis hw1

This scatterplot displays the Iris flower dataset, plotting sepal and petal measurements as colored circles. Users select the x and y attributes from dropdown menus, and hovering over the legend highlights the corresponding flower species while fading others. It uses React with d3.scaleLinear, d3.scaleOrdinal, SVG axes, and custom React components for marks and legends. Data is loaded via d3.csv from a GitHub gist.

Oct 17, 2022

Loading thumbnail…

loading data with React D3

This example demonstrates how to load and render CSS color data using React and D3 utilities. It fetches a CSV file from a GitHub gist via `d3.csv`, stores the parsed result in React state with `useState`, and displays a loading message until data arrives. Once loaded, the application maps each row to a horizontal colored div, using the `RGB hex value` column as the background color. The code imports `arc` and `csv` from D3, though only `csv` is actively used for data fetching.

Sep 21, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of auto-mpg data, with a circle for each car positioned by miles per gallon and horsepower. The color of each circle encodes the car’s origin, while its size reflects the car’s weight, and hovering reveals the model name. It uses the Vega-Lite API to define the visualization declaratively, with D3’s `csv` function to load the data from the UCI Machine Learning Repository. The chart is rendered as an SVG via Vega and Vega-Lite, with tooltips provided by the vega-tooltip handler.

Sep 20, 2022

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates the basic workflow of loading and parsing external CSV data with D3.js. It fetches a CSS color dataset from a GitHub-hosted CSV file and displays the file’s size in kilobytes, row count, and column count in a large monospace `<pre>` element. The implementation uses the `d3.csv` method with a promise to parse the remote file, then accesses `data.length`, `data.columns`, and `d3.csvFormat(data)` to compute the summary statistics. An alternative approach using the Fetch API and `d3.csvParse` is commented out in the source.

Sep 20, 2022

Loading thumbnail…

mouse follower

A smiley face circle follows the mouse cursor across a 960×500 SVG canvas. The visualization tracks pointer movement and repositions the circle's center to match the cursor's coordinates in real time. Implemented with React's `useState` and `onMouseMove` event handler, the circle's `cx` and `cy` attributes update from the mouse's `clientX` and `clientY` values. D3's `arc` function and React's `ReactDOM.render` manage the circle's geometry and rendering, while the SVG element provides the drawing surface.

Sep 20, 2022

Loading thumbnail…

smiley faces

A grid of 36 smiley faces renders via React components, with each face composed of D3-generated SVG shapes for the background circle, eyes, and mouth. The faces vary slightly in eye position and radius due to randomized values applied per face. Using `range` from D3 to generate the grid, the app maps each index to a `Face` component, scaling the composition across the viewport. The mouth uses D3’s `arc` generator with a fixed inner radius and angular span, while SVG `g` transforms center each face within its container.

Sep 19, 2022