sikadali

@sikadali·5 public vizzes

Vega-Lite Iterations

This example demonstrates an interactive scatter plot of automotive fuel economy data, showing the relationship between cylinder count and origin while revealing individual car names through tooltips. Rendered as a Vega-Lite visualization via the `vega-lite-api`, the chart applies a custom configuration for axis styling and font sizes before resizing to fit the viewport. The data is loaded asynchronously from a CSV using `d3.csv`. The plot uses semi-transparent, oversized marks with opacity encoding to avoid overplotting, and the code registers `vega-tooltip` for hover interactions.

Aug 31, 2021

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load and display CSV data using D3’s `csv` function within a React component. It uses React’s `useState` and `useEffect` hooks to fetch data from a remote URL and manage the loading state. Once loaded, the `message` function computes and displays summary statistics—file size in kilobytes, row count, and column count—as large text rendered in an SVG-enabled pre element. The visualization simplifies data loading workflow, showing a “LOADING…” placeholder until the dataset is ready.

Aug 30, 2021

Loading thumbnail…

Loading and Parsing data

This example demonstrates the process of loading and parsing a remote CSV file, displaying key metrics about the dataset as large text. It fetches data from a GitHub Gist containing CSS named colors, then uses d3.csv to parse the text. The visualization reports the file size in kilobytes, the number of rows, and the number of columns, which are obtained from the parsed data structure's columns property. The output is presented in an HTML pre element, with the d3.csvFormat function used to calculate the data's formatted size.

Aug 30, 2021

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas in this interactive React example. The visualization tracks pointer position using React's `useState` hook and updates the circle's center coordinates through an `onMouseMove` event handler on the SVG element. The `useCallback` hook optimizes the event handler, which reads `clientX` and `clientY` from the mouse event and stores them in state. React re-renders the circle at the new position, demonstrating a simple state-driven interaction pattern in a React and SVG environment.

Aug 30, 2021

Loading thumbnail…

Make Face

A grid of eighteen yellow smiley faces appears, each rendered as an SVG with a circular face, two eyes, and an arc-shaped mouth. The faces vary randomly in eye radius, giving each a slightly different expression. The example uses React components to compose the face parts, and D3's `arc` generator for the mouth path, with all geometry positioned via SVG transforms.

Aug 29, 2021