Jack Elsey

@JackElsey·14 public vizzes

bar chart

This example shows a horizontal bar chart of sales figures per salesperson, with labeled x-axis ticks and y-axis categories. It loads CSV data from a remote gist using `d3.csv`, then renders the visualization as SVG with React components. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.max` to determine the domain. Grid lines are drawn for each tick value, and bars are positioned and sized using the scales’ range and bandwidth.

Jun 4, 2021

Loading thumbnail…

Fork of hanzi

This fork of the hanzi example animates two Chinese character strokes using SVG and CSS. It shows light gray character shapes being progressively drawn with thick blue strokes, creating a handwriting effect. The animation uses CSS `@keyframes` with `stroke-dashoffset` transitions over two seconds, while SVG `clipPath` elements constrain the blue paths to the original character outlines. The code includes embedded SVG markup inside an HTML document and minor JavaScript that logs to the console.

May 29, 2021

Loading thumbnail…

hanzi

This example visualizes two Chinese hanzi characters as animated blue strokes that draw themselves over a light gray grid. Each character is composed of two distinct path shapes, filled in light gray, with a blue stroke animating along a clipped path to simulate handwriting. The animation uses CSS `@keyframes` to control `stroke-dashoffset`, cycling through delays to sequence the strokes. The SVG is rendered inline in the HTML, scaled and reflected vertically, with a JavaScript console log included for debugging.

May 29, 2021

Loading thumbnail…

D3 Donut Chart

This D3 Donut Chart visualizes categorical sales data loaded from a remote CSV file, rendering each category as a colored arc segment around a hollow center. The chart uses React hooks (`useState`, `useEffect`) to fetch and store the data, then builds the visualization with D3's `pie()` and `arc()` functions inside an SVG element. Each path is generated by the `pieArc` generator with an inner radius of 100 and outer radius of 200, with fill colors assigned from the dataset’s `color` field. The view displays a simple loading state while the CSV is being fetched.

May 21, 2021

Loading thumbnail…

Fork of HTML Starter

This example shows a large, centered Chinese character rendered as an SVG path, with two strokes animating in sequence from blue to black. The animation uses CSS `@keyframes` and `stroke-dashoffset` to create a drawing effect, with each stroke clipped to its shape. A lightgray grid of dashed lines provides a background, while the SVG `viewBox` and transforms scale and flip the coordinate system for display. The page is minimal HTML with embedded styles and a console.log, serving as a basic starter template.

May 8, 2021

Loading thumbnail…

Fork of mouse tracker

A fork of a mouse tracker renders a single circle that follows the pointer over an SVG canvas. The application uses React with the `useState` hook to store the mouse position, updating the circle's `cx` and `cy` attributes on every pointer movement. The code defines a `handleMouseMove` callback that logs client coordinates, though the visible behavior is the circle's reactive tracking. The example is built with the React and ReactDOM libraries, rendering directly to an SVG element.

May 5, 2021

Loading thumbnail…

mouse tracker

A blank SVG canvas logs mouse coordinates to the console as the pointer moves. The React `onMouseMove` handler captures `clientX` and `clientY` from the event, demonstrating a minimal event-driven interaction. The SVG element is rendered by ReactDOM into a full-screen viewport with hidden scrollbars. No visual elements are drawn; the example focuses solely on tracking pointer position through the browser’s event system.

May 4, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays a large, centered “Hello HTML” message on a plain white page. The code fetches a CSV file of CSS named colors from a GitHub gist using the Fetch API, then logs the retrieved text to the browser’s console. It demonstrates a minimal setup using HTML, CSS, and vanilla JavaScript, with no external visualization library. The page’s styling is defined inline, and the dynamic behavior relies on an asynchronous `fetchText` function.

Apr 30, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data containing CSS named colors using the Fetch API in React. The program fetches the remote CSV file, processes the rows into structured objects, and renders the color names and values in a large, legible preformatted text block. It showcases asynchronous data loading with promises and await syntax, highlighting how external tabular data can be integrated into a React component for display. The visualization focuses on the parsing workflow rather than complex visual encoding, using plain HTML formatting to present the results.

Apr 29, 2021

Loading thumbnail…

Fork of Smiley Face Part VI

A row of 36 identical SVG smiley faces is rendered, each consisting solely of a single circle centered within a 100-by-100 viewport. The circles’ radii are randomly generated per face, producing slight visual variation across the grid. The example uses React components to map over a D3 `range` array and returns JSX `<svg>` elements with dynamically assigned `r` attributes. ReactDOM mounts the result to the page, while D3 v5 provides the range utility—no interaction or animation is present.

Apr 28, 2021

Loading thumbnail…

Fork of Fork of Smiley Face Part III

A yellow smiley face is rendered as an SVG graphic using React components and D3 shape generators. The head is a simple circle created with a React component, while the mouth is drawn using the `d3.arc` API with specified inner and outer radii and angles. The code imports React, ReactDOM, and the `arc` function from D3 v5, and positions all elements relative to the center of an SVG canvas. The background circle and mouth arc are both defined with inline styling and transformed into place.

Apr 23, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This example demonstrates how to build a simple smiley face using React and D3. It renders a yellow background circle and a mouth path formed with a D3 arc generator, all positioned within an SVG coordinate system. The code uses React functional components to structure the drawing, while D3’s `arc()` API defines the mouth’s inner and outer radii and angular extent. The face is centered via an SVG group translation, and the result is a static, reusable visualization of basic geometric composition.

Apr 23, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A minimal React SVG renders a single yellow circle on a 900x900 canvas, with a hardcoded radius of 50 and position at coordinates (100,100). The implementation uses React 16.9 and ReactDOM to mount an `App` component that returns JSX defining the circle element. The page includes a commented-out template showing a more complex smiley face layout with additional circles and stroke styling, but the active code displays only the basic circle shape.

Apr 20, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of "Let's Make a Face" displays a single yellow circle with a black outline on a blank SVG canvas. The example uses raw SVG markup within an HTML file, specifying circle attributes for position, size, and fill. A video is embedded alongside, suggesting the process of constructing the face. The rendering relies on inline SVG elements rather than a JavaScript library, and the current visualization shows only the initial step of the drawing process.

Apr 20, 2021