Kristopher Skelton

@KMSkelton·8 public vizzes

basic sleep data

This interactive scatter plot visualizes sleep duration and bedtime across moon phases, with each bar representing one night of Fitbit sleep-tracking data. The x-axis marks moon phase values from 1 to 29, while the y-axis displays time of day, showing end-of-sleep hour and duration in hours. The React app uses `scaleBand` and `scaleLinear` from d3.v5 to position rectangular marks in an SVG. Data is fetched asynchronously from a JSON gist, with moon phases calculated via a simple algorithm and timestamps parsed using `timeFormat`.

May 11, 2022

Loading thumbnail…

Scatter Plot of Hours Slept

A scatter plot compares hours slept against a lunar phase, with each individual night a gray circle and the average per phase a green circle. A bar chart underlying the plot uses the same axes. The React app fetches Fitbit sleep data, processes it with D3 v5’s `scaleBand` and `scaleLinear`, and renders SVG via React components for axes and circle marks. Moon phase values derive from a simple JavaScript calculation.

Mar 9, 2021

Loading thumbnail…

intermediate sleep data

This interactive sleep data visualization charts nightly sleep duration against lunar phase. Rectangular marks show the end time and duration of each sleep session, while moon phases from new moon (1) to full moon (15) run along the x-axis. The SVG rendering uses React with D3 scales (scaleBand, scaleLinear) and custom axis components. Data is fetched from a Fitbit JSON file and processed client-side to calculate moon phase conversions, remove errant values, and unify duplicate days before sorting and averaging.

Mar 8, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automobile data from the auto-mpg CSV dataset, plotting displacement against horsepower with a tooltip revealing the car model. The visualization is built programmatically via `vl.markPoint` and encode methods, with the chart filling the browser window. Appearance is customized through a config object that removes axis domains and adjusts label styling, while `d3.csv` loads the data and a Vega Tooltip handler enables interactive hover details.

Feb 12, 2021

Loading thumbnail…

Load Data with D3

This example demonstrates loading a CSV dataset from a remote URL using D3 v5 and managing the resulting data with React state. The application fetches a list of CSS named colors and displays a text summary showing the file size in kilobytes, row count, and column count. The code uses the `csv` function from D3, the `useState` and `useEffect` hooks from React, and dynamically renders the message using the `message` helper function. While the data loads, a "Loading..." message appears.

Feb 11, 2021

Loading thumbnail…

Making Fetch Happen

This example displays a short text summary of a CSS named colors dataset, showing the file size in kilobytes, row count, and column count. It uses D3’s `d3.csv` to fetch and parse the CSV from a GitHub gist, then builds the message with `d3.csvFormat` and updates the DOM via `textContent`. A commented alternative demonstrates fetching raw text with `fetch` and parsing it using `d3.csvParse`.

Feb 10, 2021

Loading thumbnail…

Mouse Trail

This example shows a simple interactive visualization where a lime-green circle follows the mouse cursor across the full browser window, updating its position in real time. The application uses React with the `useState` and `useCallback` hooks to manage the cursor coordinates from a mouse-move event on an SVG element. The SVG rendering is set to the window’s width and height, and the circle’s `cx` and `cy` properties are bound to the tracked mouse position.

Feb 10, 2021

Loading thumbnail…

base for face

This example shows a cartoon face built from layered SVG circles and an arc, rendered with React components. The face consists of a yellow background circle with a navy stroke, gray eye whites, sky-blue irises with black pupils, and a d3.arc-generated smile. Each facial feature is a separate React component (BackgroundCircle, EyeCircles, IrisCircles, PupilCircles, MouthArc) composed within a FaceContainer that handles SVG centering. The code uses d3.v5’s arc() API to construct the mouth path, with all geometry driven by numeric props for radius, eye placement, and thickness.

Feb 9, 2021