nkmwambs

@nkmwambs·4 public vizzes

Fork of Fork of Vega-Lite API Template

This example visualizes yearly costs by bar height, with tooltips displaying the associated account code. The visualization is built with the Vega-Lite API, using `vl.markBar()`, `vl.x()`, and `vl.y()` to encode the data fields. It loads CSV data from a remote URL via `d3.csv`, then renders the chart to a canvas using Vega and Vega-Lite’s rendering engine. The `config.js` file customizes axis and label styling for improved readability, while the `vega-tooltip` handler enables interactive hover details.

Jul 4, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example shows a summary of CSV data loading and parsing, displaying the file size in kilobytes, row count, and column count as large text. It uses React’s `useState` and `useEffect` hooks to manage the asynchronous fetch, with D3’s `csv` function retrieving data from a GitHub gist containing named CSS colors. The parsed data is then passed to a message module that formats the statistics using `csvFormat`. While loading, the screen displays a simple "Loading ..." message.

Jul 4, 2022

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor inside an SVG canvas. The example demonstrates React state management with a `useState` hook to track the cursor's `clientX` and `clientY` coordinates, updating on every `onMouseMove` event. The app renders a single `<circle>` element with a radius of 30, initially centered at a fixed midpoint, and uses React's `useCallback` to optimize the handler. Built with React 16.9 and D3 v5, the rendering relies entirely on SVG output without external data sources.

Jul 1, 2022

Loading thumbnail…

Smiley Face Part 1

A grid of fifteen identical pink smiley faces is rendered, each composed of a circular background, two black eyes, and an arc-shaped mouth. The React components structure the SVG drawing, while D3's `arc` generator creates the mouth path. The faces are static, with no animation, and each is drawn using the same fixed properties.

Jul 1, 2022