T.T

@takhub·5 public vizzes

Fork of Vega-Lite API Template

This example visualizes automobile horsepower trends over time using a scatter plot, where each point represents a vehicle model year. The visualization uses a Vega-Lite API specification to encode the year on the x-axis and horsepower on the y-axis, with tooltips displaying vehicle names. Data is loaded asynchronously from a CSV file via d3.csv, and the chart is rendered with the vega, vega-lite, and vega-lite-api libraries, along with vega-tooltip for interactive hover details. The configuration customizes axis and label styling for improved readability.

May 3, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load a CSV dataset and display its summary statistics as text, using React state to track the data as it loads asynchronously. The `d3.csv` function fetches the CSS named colors dataset from a GitHub gist, and a custom `message` utility calculates and formats the data’s size in kilobytes, row count, and column count. The app renders either a loading message or the summary using React’s `useState` and `useEffect` hooks, with the output displayed in a large monospace `<pre>` element rendered as SVG.

May 3, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file with D3, displaying the file size, row count, and column count as large text. It uses `d3.csv` to fetch and parse the CSS Named Colors dataset from a GitHub gist, then formats the results with `d3.csvFormat` to calculate kilobytes. The code also includes commented alternatives using `fetch` with `async/await` and `d3.csvParse`.

May 3, 2021

Loading thumbnail…

Mouth Follower

A circle follows the mouse cursor across the full browser window in real time. The application tracks pointer movement and renders the circle at the current cursor position. Built with React and SVG, it uses the React `useState` and `useCallback` hooks to manage and update the circle's coordinates in response to `onMouseMove` events. The circle’s radius is fixed at 30 pixels, and the initial position is centered on the screen.

May 3, 2021

Loading thumbnail…

Smiley Face Part 1

Eighteen identical smiley faces tile the screen, each face sharing the same width, height, and eye-offset values. The code uses React with SVG rendering and draws each face’s spherical body, black eyes, and a pink mouth. The mouth is a d3.arc path with randomized inner radius and width, while eye radius also varies per face. The D3 range function generates the repeated array of Face components.

May 3, 2021