kevin-jake

@kevin-jake·5 public vizzes

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile performance data, using the Vega-Lite API to visualize the relationship between acceleration and horsepower for various car models. The visualization encodes each car as a point, with tooltips revealing the vehicle's name on hover. The code leverages the `vega-lite-api` library, which wraps Vega-Lite and Vega for declarative chart construction, and uses D3's `csv` function to fetch and parse the `auto-mpg.csv` dataset. The chart is configured with a dark theme and custom axis styling to improve readability, and it renders as an interactive SVG.

Apr 6, 2022

Loading thumbnail…

Loading Data

This example demonstrates asynchronous data loading with D3 and React. It fetches a CSV file of CSS named colors from a GitHub gist, then displays the file size, row count, and column count as plain text. The code uses React hooks (`useState`, `useEffect`) to manage state and trigger the `d3.csv` request, while a helper function formats the statistics from the parsed data. Rendering switches from a “loading…” message to the dataset summary once the promise resolves.

Apr 6, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using the D3.js library, displaying summary statistics about the dataset in a large text block. The visualization fetches a remote CSV file containing CSS named colors from a GitHub Gist, then uses `d3.csv` to parse the data and `d3.csvFormat` to measure its size. The output shows the file size in kilobytes, the number of rows, and the number of columns, providing a quick overview of the dataset's structure. The code also includes commented-out alternatives using the `fetch` API and `d3.csvParse`.

Apr 6, 2022

Loading thumbnail…

Mouse Follower

A smiley face rendered in SVG follows the mouse cursor across a yellow background. The face, built from React components for the background circle, eyes, and a d3.arc-generated mouth, updates its position via React state on every mousemove event. The visualization uses React’s useCallback and useState hooks to track client coordinates, re-rendering the face container at the new location.

Apr 6, 2022

Loading thumbnail…

Smiley Part 1

A grid of thirty identical smiley faces is rendered in SVG, each composed of a yellow background circle with a black stroke, two solid eyes, and a mouth. The faces are drawn using React components, with the mouth constructed via `d3.arc` to generate a path. The example demonstrates basic modular SVG composition with React and D3 for shape generation.

Apr 6, 2022