J

Jason Tiller

@Tillerdawg·24 public vizzes

Loading thumbnail…

Axes with React & D3 - JAT

A bar chart displays the populations of ten countries in 2020, loaded from a CSV file with D3 utilities. The example integrates React state management with D3 scales to render SVG rectangles, using `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. Data is fetched via `d3.csv`, parsed, and stored with React's `useState` and `useEffect`. The visualization updates declaratively through React's rendering, with SVG coordinates computed from D3 scale functions.

Loading thumbnail…

The Margin Convention - JAT

A radial burst visualization displays the top ten countries by 2020 population from UN data, sourced via a CSV endpoint. The chart loads the dataset with D3’s `csv` utility and implements a custom band scale (`scaleBand`) for the categorical country axis and a linear scale (`scaleLinear`) for the population magnitude. React state (`useState`, `useEffect`) manages the asynchronous data fetch and triggers rendering of SVG rectangles within a transformed group element. The visualization appears as a burst layout, though the code currently renders a horizontal bar chart using standard rectangular marks.

Loading thumbnail…

Making a bar chart of UN Population Data with React & D3 - JAT

This example displays the top ten countries by 2020 UN population estimates as horizontal bars, with country names on the y-axis and population on the x-axis. The code loads CSV data via D3’s `csv` function, converts population values with a row accessor, and uses React state to trigger rendering. It measures scales with `d3.scaleBand` and `d3.scaleLinear`, then outputs SVG `<rect>` elements directly from JSX. The D3 v6 and React 17 setup uses hooks like `useState` and `useEffect` for asynchronous data fetching and updates.

Loading thumbnail…

Rendering a chart of CSS colors with React & D3 - JAT

Loading a CSV of CSS named colors with d3.csv, this React application displays each color as a single slice of a full-circle pie chart. Using d3.pie and d3.arc, the code assigns every row an equal angular segment, filling each path with its corresponding RGB hex value from the dataset. The SVG renders the complete wheel of 148 colors, with React state managing the asynchronous data fetch and a loading message shown until the data arrives.

Loading thumbnail…

Rendering a chart CSS colors with React - JAT

This example renders the full set of CSS named colors as a stacked sequence of horizontal strips, fetched from a gist-hosted CSV file using D3’s `csv` utility. Each row is displayed as a React `<div>` whose background color is set directly from the `RGB hex value` field, producing a 960-pixel-wide gradient-like swatch. The visualization demonstrates a simple React state workflow: data loads asynchronously in an effect hook, shows a loading message until ready, and then maps each color entry to a styled element.

Loading thumbnail…

Loading Data with React & D3 - JAT

This example displays metadata about CSS named colors—file size, row count, and column count—in large text. It loads a CSV dataset from a GitHub gist using D3’s `csv` utility, then stores the parsed data in React state via the `useState` and `useEffect` hooks. After fetching, a custom message function formats the statistics for display. The rendering relies on React 17 and D3 v6, with the data source defined as a raw URL. While loading, the text shows “Loading …” until the asynchronous fetch completes.

Loading thumbnail…

Stacked Bar Chart using Religion Data Using Vega-Lite API Template

This stacked bar chart visualizes the top five religions by country, with circle size encoding population and axes mapping country and religion. Using the Vega-Lite API template, the code registers Vega, Vega-Lite, and vega-tooltip, then fetches CSV data via d3.csv from a GitHub gist. The viz.js specification defines markCircle with fieldN and fieldQ encodings, while config.js customizes axis labels and titles for readability. The chart renders as an SVG that fits the viewport, with tooltips displaying population values.

Loading thumbnail…

Country Population Data Using Vega-Lite API Template

This visualization displays the population of each country in 2015 as a bar chart, with countries sorted by population descending and a tooltip showing the population value on hover. The chart uses the Vega-Lite API to define the bar mark and encoding, while the vega-lite and vega libraries handle rendering to SVG. Data is loaded from a CSV file via D3’s `csv` function, and the chart’s appearance is customized through the `config` object, which adjusts font sizes and axis styling for readability.

Loading thumbnail…

SanFran Temp Data Using Vega-Lite API Template

This example displays San Francisco temperature trends over time using a line mark from the Vega-Lite API, with tooltips revealing exact temperature values. The visualization pulls weekly temperature data from a CSV file via d3.csv, then renders it with vega, vega-lite, and vega-lite-api. The chart is configured with custom axis styling and a dark color scheme for readability, and it automatically fits to the full browser window size using the autosize option.

Loading thumbnail…

Fork of Temperature in San Francisco Scatter Plot

This scatter plot shows one week of temperature in degrees Celsius in San Francisco, with time on the x-axis and temperature on the y-axis. Each circle represents a temperature reading, plotted using D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`. The code loads the dataset from a CSV file via `csv()` and renders the SVG chart with margins, axis labels, and a title. Data originates from Data Canvas - Sense Your City, a public sensor project.

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile engine displacement versus horsepower, with each point representing a vehicle and tooltips revealing the model name. Built with the Vega-Lite API, the visualization uses `vl.markPoint` and `vl.x().fieldQ()`/`vl.y().fieldQ()` for quantitative axes, while `vl.tooltip().fieldN()` handles categorical labels. Data is loaded asynchronously from an auto-mpg CSV via `d3.csv`, and the chart is rendered to SVG with vega-tooltip for interactive hover details. The code also customizes axis and font styles through a shared configuration object.

Loading thumbnail…

Loading and Parsing CSV Data with D3

This example demonstrates how to load and parse CSV data from a remote URL using D3 v6. It displays the file size in kilobytes, row count, and column count in a large text block. The code uses `d3.csv()` to fetch and parse the data, then `d3.csvFormat()` to measure its size, along with the parsed array’s `length` and `columns` properties. The data source is a GitHub gist containing CSS named colors. Commented alternatives show `fetch`, `async/await`, and `d3.csvParse()` for comparison.

Loading thumbnail…

Fork of Mouse Follower 2 - JAT

This example shows a circle in an SVG that tracks the user’s mouse movements across a 960×500 canvas, starting from the center. Built with React hooks, it uses `useState` to store the cursor’s `clientX` and `clientY` coordinates and `useCallback` to update that state on every `onMouseMove` event. ReactDOM renders the SVG element and its circle, whose `cx` and `cy` attributes are bound to the tracked position. The circle’s constant radius is 30 pixels.

Loading thumbnail…

Mouse Follower - JAT

This example displays a static SVG circle at the center of a 960x500 canvas using React and ReactDOM, with a mouse-move handler that logs the cursor's client coordinates to the console. The circle does not actually move or react visually; the interaction is limited to capturing and printing mouse position events. The code imports React, uses the `onMouseMove` SVG event, and renders a single `<circle>` element with fixed `cx`, `cy`, and `r` attributes.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates a minimal workflow for loading and parsing external CSV data in a web page. It fetches a raw text file from a GitHub gist containing CSS named colors and logs the parsed text to the browser console. The code uses the native `fetch` API and its `response.text()` method to retrieve the data, with a commented-out alternative showing the older promise-chain syntax. The visualization itself is not rendered; the example focuses solely on the data acquisition and initial parsing step.

Loading thumbnail…

Smiley Face Part 6B - JAT

A grid of eighteen smiley faces, each rendered with random background and eye colors, demonstrates compartmentalized React components. The faces use a combination of SVG circles for the background and eyes, and a D3 arc path for the mouth. Each face’s stroke width, eye offset, eye radius, and mouth dimensions are randomized via JavaScript’s `Math.random()`. The React app maps over a D3 range to generate the faces, while the `randomColor.js` utility builds hex color strings for the fills.

Loading thumbnail…

Smiley Face Part 6 - JAT

A grid of smiley faces appears, each with randomized facial features—eye offset, eye radius, mouth radius and width, and stroke thickness—generated from d3’s `range` function. Built with React and ES6 modules, the visualization uses SVG components like `BackgroundCircle`, `Eyes`, and `Mouth`, where the mouth is drawn via d3’s `arc` API. The faces are rendered inside a shared `FaceContainer` that translates the SVG group to center coordinates.

Loading thumbnail…

Smiley Face Part 5 - JAT

A modular React smiley face built with reusable SVG components, rendered through three separate files: a yellow circular background with a stroke, two eyes positioned symmetrically, and a mouth drawn using the `d3.arc` API from D3 v6. The components accept numeric props for size and positioning, and the main `App` function composes them inside an SVG element centered on a 960x500 canvas, using ES6 module imports to organize the code. The project runs with React 17 and D3 6.5, loaded via a bundled script.

Loading thumbnail…

Smiley Face Part 4 - JAT

This example renders a smiley face as an SVG graphic using React components and D3’s arc generator. It shows a yellow circle with black stroke, two static eye circles, and a mouth arc drawn with `d3.arc()`, all centered via a translation transform. The code uses React 17 and D3 v6 to construct the shape, with hardcoded dimensions for the face, eyes, and mouth, and applies the arc’s inner and outer radii and angle range to define the smile.

Loading thumbnail…

Smiley Face Part 3 - JAT

A smiley face is drawn as a yellow circle with black stroke, two fixed-position eyes, and an arc-based mouth, centered on an SVG canvas. The visualization uses React to render the SVG elements, with D3’s `arc` API generating the mouth path based on inner and outer radii and angular extents. All coordinates are calculated relative to the canvas center, and the face is grouped using an SVG `<g>` transform. The code relies on static, hardcoded dimensions and does not include interactive or animated behavior.

Loading thumbnail…

Smiley Face Part 3B - JAT

A yellow smiley face with blue eye patches, one blue eye, and a black outlined mouth is rendered as an SVG. Built with React and D3, the face is drawn using SVG primitives like circles, rectangles, lines, and paths. D3’s `arc` generator creates the mouth shape, while React manages the component structure and rendering. The layout is centered with fixed dimensions and stroke widths.

Loading thumbnail…

Smiley Face Part 2 - JAT

A yellow circle with two black eyes forms a simplified smiley face on an off-white background. The face is drawn as a large filled circle with a thick stroke, while the eyes are smaller solid circles positioned symmetrically on either side of the vertical center. Built with React and rendered as SVG, the example uses ReactDOM to mount the component and defines all geometry through constants such as centerX, centerY, eyeOffsetX, and eyeRadius. The code does not yet include a mouth, hence the title’s reference to being halfway complete.

Loading thumbnail…

Smiley Face Part 1 - JAT

A large yellow circle with a black outline occupies the center of an SVG canvas, flanked by two smaller unfilled circles positioned as eyes, forming the initial stage of a smiley face. The page is static and uses no dynamic data, relying entirely on basic SVG shapes rendered inline within the HTML. The code directly defines each circle’s `cx`, `cy`, `r`, and stroke properties, with the primary shape filled yellow and outlined in black, while the smaller circles have no fill. This example demonstrates hand-coded SVG composition rather than programmatic generation or external datasets.

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that combines CSS and JavaScript to display centered text. The page shows the phrase "Hello HTML" in large, 13em font, while a script logs "Hello JavaScript!" to the browser's developer console. It relies on standard HTML, CSS styling, and vanilla JavaScript, serving as a bare-bones template for web development and a companion to a React starter version.