Tyler Durham

@TylerDurham·8 public vizzes

World Population - Top 25 - Vega-Lite API Template

This visualization displays the top 25 countries by population, using a circle mark to encode population size while mapping median age to color and population density to the x-axis. The chart is built with the Vega-Lite API, which constructs a specification executed by Vega, with d3.csv loading the world-population dataset. A custom configuration adjusts axis styling and label sizes, while the tooltip handler from vega-tooltip provides interactive country names. The visualization automatically fits to the browser viewport via the autosize setting.

May 2, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile data from the UCI Machine Learning Repository, encoding vehicle weight on the x-axis, horsepower on the y-axis, and miles per gallon as both point size and color. The visualization is constructed programmatically using the Vega-Lite API, which builds a specification rendered as an SVG. The code imports data via D3’s CSV loader and registers Vega-Lite with custom tooltip handling from the Vega-Tooltip library. Axis styling is customized through a configuration object to improve readability.

May 2, 2022

Loading thumbnail…

Loading Data in React & D3!

This example demonstrates loading and summarizing a CSV file within a React application. The code uses D3’s `csv` utility to fetch CSS named color data from a GitHub gist, stores the result in React state via `useState` and `useEffect`, and renders a text summary of the dataset. The display reports the data’s size in kilobytes—calculated with `d3.csvFormat`—along with row and column counts. A brief “Loading…” message appears until the asynchronous fetch completes. The visualization itself is minimal, showing only the computed text information rather than a graphical chart.

May 1, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a remote CSV file using D3 v7’s `d3.csv` method. It fetches the CSS named colors dataset from a GitHub Gist, then logs a summary of the data to the console and displays it on the page, including the URL, file size in kilobytes, row count, and column count. The code also includes a commented-out alternative using `fetch` and `d3.csvParse`. The visualization is minimal, showing only text output rather than a graphical chart.

May 1, 2022

Loading thumbnail…

Mouse Follower

A black circle follows the mouse cursor across a green SVG canvas, responding instantly to pointer movement. The visualization uses React’s `useState` and `useCallback` hooks to track the mouse position and update the circle’s `cx` and `cy` attributes. The SVG element’s `onMouseMove` event handler captures the cursor coordinates, while D3’s `arc` module is imported but unused. The example demonstrates a simple interactive pattern combining React state management with SVG rendering.

May 1, 2022

Loading thumbnail…

Fork of Smiley Face Part IV

A cheerful yellow smiley face rendered in SVG, built from modular React component files for the background, eyes, and mouth. Each part is a separate reusable function component, with the eyes and mouth accepting configurable props for size and position. The mouth uses d3.arc to generate a curved path, while the face container translates the entire group to the center of an SVG canvas. React 18 manages the component tree, and D3 v7 supplies the arc generator.

Apr 27, 2022

Loading thumbnail…

Smiley Face Part 1

A yellow smiley face with black outlines and eyes is drawn in the center of a green background. The face is built with SVG circles and a D3 arc path for the mouth. React elements render the SVG, while D3’s `arc()` helper generates the mouth’s path based on specified inner and outer radii and angle ranges. The example demonstrates combining React’s declarative UI with D3’s geometric utilities for static vector graphics.

Apr 27, 2022

Loading thumbnail…

HTML Starter

A yellow circle with a black outline serves as a face, featuring two eyes, animated eyebrows, and a mouth drawn as an arc path. The eyebrows use D3 transitions to move up and down over two-second intervals. This React-based example renders to SVG, using D3 v5 selection and arc APIs to construct the facial features from hardcoded dimensions and positions.

Mar 1, 2020