Martha Cash

@mcash8·27 public vizzes

Sleep Dataset Features vs. Age -- One Plot

Three linked scatter plots show how average sleep efficiency, sleep duration, and deep sleep duration vary with age. Each plot uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and `axisLeft`/`axisBottom` to render axes and colored points, with interactive tooltips on hover. Data is fetched as CSV, aggregated by age via `flatRollup`, and visualized using D3’s `select`, `join`, and `transition` APIs.

Apr 25, 2023

Loading thumbnail…

Chess Game Dataset Histogram Viz

Three interactive histograms visualize a chess game dataset, showing the distribution of average player ratings, the absolute rating difference between players, and the number of turns per game. Each plot uses `d3.histogram` with adjustable bin counts via HTML number inputs, and bars transition smoothly using `transition.attrTween` and `d3.axisLeft` for updated scales. Data is fetched as CSV from a GitHub gist and parsed with `d3.csvParse`. The visualizations render as SVG with a shared axes module for consistent labeling.

Apr 25, 2023

Loading thumbnail…

Chess Game Dataset Barchart Viz

This interactive bar chart explores a chess game dataset, allowing users to view distributions of wins by color, game termination type (such as checkmate or resignation), and opening move sequences via a dropdown menu. The visualization uses D3 v7’s `scaleBand` and `scaleLinear` for axes, `flatRollup` to aggregate counts, and `schemeDark2` for bar colors. Data is fetched as a CSV and parsed with `csvParse`, with axes and menu components built using custom D3 modules.

Apr 21, 2023

Loading thumbnail…

Project Momentum Sleep Efficiency Dataset

This visualization compares average sleep metrics by gender using a bar chart of data from a sleep efficiency CSV dataset. A dropdown menu lets users switch between features like sleep efficiency, exercise frequency, caffeine consumption, and sleep-stage percentages. The chart is built with D3 v7, using `scaleBand` for the categorical x-axis and `scaleLinear` for the y-axis, with custom axis labels. Data is fetched as CSV, parsed with `csvParse`, and aggregated on the fly for male and female averages.

Apr 21, 2023

Loading thumbnail…

Historgram V1

This interactive histogram visualizes chess game statistics from a CSV dataset, showing the distribution of average ratings, rating differences, game lengths, or turn counts based on a dropdown selection. A bar chart encodes the frequency of values across bins, with the y-axis labeled according to the chosen metric. The visualization uses D3.js v7, employing `d3.scaleLinear` for axes, `d3.histogram` for binning data, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data is loaded via `csvParse` and rendered dynamically through a custom `densityPlot` function.

Apr 19, 2023

Loading thumbnail…

Average Deep Sleep Duration vs. Age

This visualization shows the relationship between age and average deep sleep duration, using a scatter plot where each point represents the mean deep sleep hours for a given age group. The data is loaded from a remote CSV file and processed with d3.flatRollup to aggregate sleep metrics by age. The chart uses d3.scaleLinear for both axes, displays points with d3.schemeCategory10 colors, and includes labeled axes rendered via custom axis functions. A dropdown menu is implemented but only the deep sleep view is currently displayed.

Apr 19, 2023

Loading thumbnail…

Average Sleep Efficiency and Duration vs. Age

This visualization displays the average sleep efficiency and duration across different ages, sourced from a sleep efficiency dataset. Users can select different sleep metrics—such as REM sleep percentage or deep sleep duration—from dropdown menus to view their relationship with age. The scatter plot uses circles colored by gender, rendered with D3.js (v7), leveraging `scaleLinear`, `scaleOrdinal`, and `flatRollup` to aggregate and plot the data. The chart includes labeled axes and a dropdown for metric selection.

Apr 11, 2023

Loading thumbnail…

Average REM Sleep Duration vs. Age

This visualization shows how average REM sleep duration varies with age using data from a sleep efficiency dataset. The scatter plot displays age on the x-axis and average REM sleep percentage on the y-axis, with each point representing a distinct age group. The visualization uses D3.js v7 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `flatRollup` to aggregate the raw CSV data into age-grouped averages. A dropdown menu lets viewers switch between different sleep metrics, though the default view focuses specifically on REM sleep patterns across the lifespan.

Apr 11, 2023

Loading thumbnail…

Average Light Sleep Duration vs. Age

This visualization shows how average light sleep duration changes across age, using a scatter plot with one point per age group derived from a sleep efficiency dataset. The y-axis displays the aggregated mean light sleep percentage, while the x-axis maps age from 0 to 90 years. The code uses d3.csvParse to load the data, d3.flatRollup to summarize records by age and sleep metrics, and d3.scaleLinear with d3.axisLeft and d3.axisBottom for the axes. It also includes a dropdown menu, though the current view is fixed to light sleep.

Apr 11, 2023

Loading thumbnail…

Average Sleep Duration vs. Age

This visualization shows how average sleep duration varies with age, plotting aggregated data from a sleep efficiency dataset as circles on a scatterplot. The display updates to show other sleep metrics—including efficiency, deep sleep, light sleep, and REM sleep—through a dropdown menu. Built with D3 v7, the code uses scaleLinear for axes, flatRollup to aggregate data by age, and the scatterPlot module to render circles. Data is loaded from a remote CSV file, with axis labels provided by a separate axes module.

Apr 11, 2023

Loading thumbnail…

Sleep Efficiency vs. Age

This scatterplot shows the relationship between age and sleep efficiency, revealing a linear trend among younger individuals that disappears after about age 20. The visualization uses d3.scaleLinear for both axes and d3.scaleOrdinal with schemeCategory10 to color points by age. Data is loaded from a CSV file via d3.csvParse and processed with d3.flatRollup to aggregate observations before rendering circles with d3’s join pattern.

Apr 10, 2023

Loading thumbnail…

Exploratory Data Analysis w/ Chess Dataset

This visualization explores a chess game dataset to determine which color piece wins more often. It presents the results as a simple bar chart, showing the count of games won by white versus black pieces. The code loads the data from a GitHub-hosted CSV file, processes it using D3's `flatRollup` function to aggregate win counts by winner, and then renders the summary as JSON text in a `<pre>` element. The visualization uses D3 v7 and demonstrates a basic exploratory data analysis workflow with a minimal, functional interface.

Apr 3, 2023

Loading thumbnail…

Chess games dataset

This example explores a chess games dataset from Kaggle, showing relationships between game attributes like opening moves, player ratings, and outcomes. It initially displays the raw, parsed CSV data as a JSON-formatted string in a `<pre>` element. The visualization loads the dataset via `fetch` and parses it using the `csvParse` API from D3 v7. The current implementation demonstrates the data-loading pipeline, with the state managed through a `setState` callback and the view updated on each render.

Apr 3, 2023

Loading thumbnail…

Chessboard in D3

This interactive chessboard visualizes classic opening moves in chess. A drop-down menu allows selection among several openings, including the Slav Defense, Italian Game, and French Defense. The board is rendered as an SVG grid of beige and tan squares, with chess pieces drawn using Unicode characters. Selecting an opening triggers step-by-step animations using chained `transition()` calls to move pieces across the board. The code uses D3.js v7 for SVG manipulation and transitions, with data loaded from a CSV of chess games.

Mar 28, 2023

Loading thumbnail…

Heatmap

This heatmap visualizes the frequency of chess opening moves across a 10x10 grid of board positions, with color intensity representing move popularity. The visualization uses d3.scaleBand for axes, d3.scaleLinear for the color gradient from white to green, and d3.axisBottom/axisLeft for labels. Data loads from a CSV file containing sleep efficiency records, though the grid dimensions and labels are hardcoded. The code includes separate modules for axes and heatmap rendering, with d3.csv fetching and d3.selectAll joining rectangles to render cells.

Mar 28, 2023

Loading thumbnail…

New Technique w/ Menu

A bar chart displays average sleep efficiency and exercise frequency by gender, with a dropdown menu to toggle between the two metrics. The visualization uses d3.scaleBand and d3.scaleLinear to construct the axes and bars, while d3.schemeDark2 provides the color palette. The chart refreshes the y-axis labels and bar heights dynamically when the menu selection changes, demonstrating an interactive metric-switching technique built with D3 v7.

Mar 23, 2023

Loading thumbnail…

Average Sleep Efficiency vs. Gender

This visualization shows the average sleep efficiency for males and females as a two-bar bar chart. Using D3 v7, it computes the mean sleep efficiency from a CSV dataset loaded via `fetch`, then renders the results with `scaleBand` and `scaleLinear`. The bars are colored with `schemeDark2`, and the chart includes labeled axes created with `axisLeft` and `axisBottom`, along with custom axis labels.

Mar 15, 2023

Loading thumbnail…

New Technique

This example shows average sleep efficiency by gender in a bar chart, with a button that randomly changes the fill color of the bars. The visualization loads CSV data and aggregates it into male and female averages, then renders the bars using D3 v7’s `scaleBand` and `scaleLinear`. Clicking the button triggers a `transition` with a two-second duration, applying a random color from a predefined array via `d3.selectAll("rect").style("fill")`. The chart includes labeled axes generated with `axisLeft` and `axisBottom`.

Mar 15, 2023

Loading thumbnail…

Average Sleep Efficency per Gender

A bar chart shows the average sleep efficiency percentage for male and female participants, with two labeled bars using the Dark2 color scheme. The visualization loads CSV data from a GitHub gist, calculates mean sleep efficiency per gender in JavaScript, and renders the result using D3 v7’s scaleBand and scaleLinear, along with axis components built from d3.axisLeft and d3.axisBottom. The chart updates responsively to the window size and includes labeled axes for gender and average sleep efficiency.

Mar 15, 2023

Loading thumbnail…

Iteration of Pseudo Viz with Data

This visualization presents a pie chart of chess game outcomes, showing the total wins for white, black, and draws. The chart breaks down win counts by victory type—mate, resignation, or out of time—though only total wins are displayed on the arcs, with a legend identifying each piece color. Built with D3 v7, the code uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the donut chart from a CSV of chess game data loaded via `fetch` and parsed with `d3.csvParse`.

Feb 20, 2023

Loading thumbnail…

Pseudo Viz with Data

A stacked bar chart displays chess game outcomes for white, black, and draw categories, broken down by victory type: mate, resign, and out-of-time, with draws shown as a single segment. Green represents wins from time expiry, yellow shows resignations, and red indicates checkmate. The visualization uses d3.stack() to layer the bars, d3.scaleBand for x-axis positioning, and d3.scaleLinear for the y-axis. Data comes from a CSV loaded via fetch and parsed with d3.csvParse, with aggregates computed through a manual loop over game records.

Feb 20, 2023

Loading thumbnail…

Pseudo Viz

This visualization displays a stacked bar chart breaking down chess game outcomes by piece color: white, black, and draw. Red segments indicate checkmates, yellow represents resignations, green shows wins from timeouts, and blue marks drawn games. The chart uses d3.stack() to layer the outcome data vertically and d3.scaleOrdinal() for the categorical color mapping. d3.scaleBand positions the bars along the x-axis while d3.scaleLinear maps the y-axis to game counts. The data consisted of 1000 white games, 1200 black games, and 500 draws.

Feb 13, 2023

Loading thumbnail…

Fork of Scatter Plot Simple

This example visualizes the Iris Dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with each flower represented by a fixed-radius circle. The plot has no axes, so it focuses purely on the distribution and clustering of the three species. The visualization uses D3 v7, loading data with `csvParse`, mapping values to pixel coordinates via `scaleLinear` and `extent`, and rendering circles through `selection.selectAll` with a `join`. The chart spans the full browser window, with data fetched asynchronously on initial render.

Feb 13, 2023

Loading thumbnail…

Sleep efficiency data

This example visualizes sleep efficiency data sourced from Kaggle, showing records of sleep duration, REM percentage, deep sleep, and related features. The code fetches a CSV file and parses it with `csvParse`, then displays the raw parsed data as formatted JSON text in a `<pre>` element. Using d3 v7’s `select` and data joins, the visualization updates whenever the state changes, initially setting a loading flag before rendering the fetched dataset. The implementation relies on d3’s `fetch` and `csvParse` APIs to load and structure the tabular data.

Jan 23, 2023

Loading thumbnail…

Fork of Fifa World Cup Data

This visualization displays sleep efficiency data from Kaggle, showing a raw JSON representation of the parsed CSV content. The code first fetches the remote CSV file, then uses `d3.csvParse` to convert the text into an array of objects before displaying it as a formatted string inside a `<pre>` element. The visualization uses a state management pattern where `setState` triggers a re-render via `viz.js`, and the page loads data asynchronously with a `'LOADING'` placeholder state. The implementation relies on D3 v7 selection methods like `select` and `join`.

Jan 23, 2023

Loading thumbnail…

Fifa World Cup Data

This example displays the raw contents of a Fifa World Cup 2022 matches dataset as formatted JSON text in a `<pre>` element. The visualization initially fetches the CSV file from a GitHub gist, parses it using `d3.csvParse`, and then renders the resulting array of objects. It uses D3 v7's `select` and `join` methods to manage the display. The dataset includes match statistics such as assists, possession, crosses, cards, passes, and fouls, sourced from Kaggle.

Jan 23, 2023

Loading thumbnail…

Fork of Mouse Follower Simple

A circle follows the mouse across a full-screen SVG, shifting to a random color from a predefined palette on every movement. The example uses D3 v7's selection methods, including `svg.on('mousemove')` for event handling and `circle.attr` to update position. An initial `getColor()` function picks randomly from an array of seven colors, while CSS hides page margins and overflow. The visualization demonstrates basic interactive SVG rendering with D3's data-binding approach.

Jan 15, 2023