Emily Hudson

@ejhudson33·17 public vizzes

NCAA Women's Volleyball Visualization

The visualization plots average digs against average hitting percentage for NCAA Big Ten volleyball teams over time. Each team appears as a colored circle with its logo, positioned by yearly averaged statistics across two dimensions: digs on the x-axis and hitting percentage on the y-axis. Using D3 v7, the code loads CSV data, aggregates by team and year via `d3.rollups`, and renders an animated, interactive SVG scatterplot. Team-specific colors and logos are defined in mappings, with fallback SVG patterns generated programmatically.

Nov 21, 2025

Loading thumbnail…

NCAA Women's Volleyball Visualization

This interactive D3.js visualization plots average digs against average hitting percentage for NCAA Big Ten volleyball teams over time. Animated SVG circles, each filled with a team logo via SVG patterns, move across a scatterplot as the year changes, making team performance trends immediately visible. The chart loads data from a CSV file, aggregates it by team and year using `d3.rollups` and `d3.mean`, and maps team colors and logo images from predefined objects. Axes scales are set statically, and the visualization is rendered entirely with D3's SVG capabilities.

Oct 30, 2025

Loading thumbnail…

NCAA Women's Volleyball Visualization

This visualization charts the relationship between average digs and average hitting percentage for NCAA Big Ten women’s volleyball teams over time. It uses an SVG scatterplot where each team appears as a circle filled with its logo, and the chart animates through yearly data. The code parses a CSV file with D3’s `d3.csv` and uses `d3.rollups` to compute team-year averages, while custom SVG patterns and inline base64-encoded logo fallbacks render each team’s icon. Team colors and logos are defined in JavaScript maps, and the visualization updates scales and positions as the year progresses.

Oct 22, 2025

Loading thumbnail…

NCAA Women's Volleyball Visualization

A scatterplot depicts the relationship between average digs and average hitting percentage for NCAA Big Ten volleyball teams, with each point colored by school and animated over the 2012–2019 seasons. The visualization uses D3.js (d3.v7) to parse a CSV, compute team-year averages via `d3.rollups` and `d3.mean`, and render SVG circles filled with team logos from external PNG files. Team colors and fallback pattern images are defined in JavaScript.

Oct 22, 2025

Loading thumbnail…

Fork of NCAA Women's Volleyball Visualization

A scatterplot compares NCAA Big Ten women's volleyball teams by average digs against average hitting percentage. Each team appears as a circular point filled with its logo, with team colors applied as strokes. The visualization uses D3.js v7 to load CSV data, aggregate statistics, and render SVG points with axes and interactive tooltips. On hover, a tooltip displays the team's exact averages and the circle's stroke highlights in black.

Oct 9, 2025

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This example displays Fisher’s Iris dataset as a scatter plot comparing sepal length and width, with colored points for each iris species and an interactive legend that fades non-hovered categories. The code uses D3 version 7 modules including `csv`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `select`, with a `ResizeObserver` for responsive sizing. Layout, colors, and typography are configured through exportable JavaScript objects, while hover handling raises matching points via `raise()` and applies opacity transitions.

Oct 1, 2025

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example shows an interactive bar chart of a small CSV dataset mapping letters to counts. The React app manages a state object for the selected letter, while D3 v7 renders the SVG, including axes, bars, and a title. Clicking a bar toggles its selection, changing its fill color and opacity. The chart uses D3’s `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and React’s `useEffect` and `useRef` to coordinate state and dimensions.

Oct 1, 2025

Loading thumbnail…

NCAA Women's Volleyball Visualization

This example visualizes NCAA Women’s Volleyball statistics by school, displaying average digs and hitting percentage in a bar chart generated with Chart.js and a corresponding data table. It parses embedded CSV data containing player performance metrics from multiple 2018 games, aggregating values per team. The chart renders on an HTML canvas element, while the table updates alongside it. This view highlights differences in defensive and offensive performance across teams like Michigan, Washington, Yale, and Syracuse.

Oct 1, 2025

Loading thumbnail…

Bar Chart Showing NCAA Women's Volleyball Data

This bar chart visualizes average hitting percentages for NCAA women’s volleyball teams across 18 schools from 2012–2019, with teams sorted from highest to lowest average. The code processes player-level CSV data by aggregating hitting percentages per school, then renders bars using D3’s scaleBand and scaleLinear with axisBottom and axisLeft. Each bar’s fill color comes from a school-specific color mapping, with a fallback steelblue. The React app loads data via D3’s csv method, filters to target schools, and passes the processed dataset to the viz function for rendering.

Oct 1, 2025

Loading thumbnail…

Scatter Plot Showing NCAA Women's Volleyball Data

This scatter plot displays NCAA Women's Volleyball statistics from 2012–2019, plotting kills on the x-axis against hitting percentage on the y-axis for a subset of the Kaggle dataset. Green points represent players who started a match, while red points indicate non-starters, revealing that higher-performing players tend to be starters. Built with React and D3 v7, the visualization uses `scaleLinear`, `axisBottom`, `axisLeft`, and SVG circles to render the data. The chart includes axis labels, a title, and a legend, with data loaded from a local CSV file.

Sep 18, 2025

Loading thumbnail…

Scatter Plot Showing Women's Volleyball Data

This scatter plot displays the relationship between the number of completed projects and academic performance for students in a dataset of college records, with each circle representing an individual student. The visualization uses D3 v7's `scaleLinear` and `extent` functions to map the data to SVG coordinates, with `d3.select` and `.join` handling circle rendering. The React-based application loads the data from a CSV file via D3's `csv` parser, processes it in a data processor module, and renders through a reusable Chart component with fixed dimensions.

Sep 18, 2025

Loading thumbnail…

Basic Scatter Plot Showing College Acceptance Data

This example shows the relationship between IQ scores and cumulative GPA for students at one college, filtered from a Kaggle dataset. Each black dot represents a student plotted by IQ on the x-axis and CGPA on the y-axis. The React app loads the data with `d3.csv`, filters by `College_ID`, and renders the SVG circles using D3's `scaleLinear`, `extent`, and `select` APIs. The viz module computes scales and draws the scatter plot with `attr` assignments for position, radius, and opacity.

Sep 10, 2025

Loading thumbnail…

College Student Performance and Placement Data Loading

This example loads a CSV dataset of college student performance and placement factors and displays the raw parsed data as JSON in a `<pre>` element. The visualization initially shows a loading state before fetching `data.csv` via the Fetch API, then parses it with `d3.csvParse`. The chart itself is minimal, with D3 v7 used to bind data and update the DOM via `select` and `join`. The data includes variables such as IQ, CGPA, internship experience, and placement outcome.

Sep 4, 2025

Loading thumbnail…

Weather Dataset Loading

This example demonstrates loading a weather dataset from a local CSV file and displaying its contents as raw JSON text. The visualization initially shows a loading state before fetching the data, then parses the CSV into an array of objects using D3’s `csvParse` function. The viewed data includes daily measurements such as temperature in Celsius, Kelvin, and Fahrenheit, precipitation in millimeters, and wind speed in kilometers per hour, for an unknown location. D3’s `select` and `join` methods are used to render the parsed data within an HTML `<pre>` element.

Sep 4, 2025

Loading thumbnail…

Grocery Store Sales Data Loading

This example demonstrates loading and displaying a grocery store sales dataset from an external CSV file. The visualization fetches the data using the Fetch API, parses it with `d3.csvParse`, and renders the parsed rows as formatted JSON text in a `<pre>` element using D3’s `select` and data join. The code uses D3 v7 and manages state transitions from an initial undefined value through a loading phase to the final parsed array. The dataset includes sales records with fields such as product name, total amount, and loyalty points from multiple store locations.

Sep 4, 2025

Loading thumbnail…

Fork of Loading Data

This example demonstrates the asynchronous loading of airline flight data from a CSV file, displaying the parsed contents as a JSON string in a preformatted text element. The visualization uses D3 v7’s `csvParse` method to convert the raw text into an array of objects, with numeric fields explicitly coerced to numbers. The code manages a state machine—starting as undefined, transitioning to `'LOADING'`, then resolving to the final dataset—by fetching `data.csv` via the Fetch API and updating the DOM through `select` and `.join` methods. The data source is a Kaggle dataset of airline flights, though the included file uses iris sample data for demonstration.

Sep 3, 2025

Loading thumbnail…

Hudson--Fork of Circles with D3

Six semi-transparent colored squares of varying sizes are scattered across a light green background, positioned with slight overlaps to create a layered composition. The visualization uses D3 v7’s selection and data-join methods (`select`, `selectAll`, `data`, `join`) to bind a static array of objects containing `x`, `y`, `width`, `height`, and `fill` properties to SVG `rect` elements. Each rectangle is centered on its coordinates by subtracting half its dimensions, and rendered with 70% opacity. The SVG canvas fills the viewport via a fixed container.

Aug 26, 2025