ShijiaYan

@ShijiaYan·4 public vizzes

Rendering Data with React

This example visualizes CSS named colors as an array of filled arc paths, each mapped to its corresponding hex value. Using React’s useState and useEffect hooks, it loads a CSV of color names via d3.csv, then renders an SVG where every color occupies a slice of a semicircle. The pie layout is generated with d3.arc, while React handles state-driven rendering and a loading message. The data originates from a gist by Curran, and the visualization updates asynchronously once the CSV is fetched.

Jun 6, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of auto-mpg data with vehicle origin mapped to color, weight to point size, and tooltips revealing model names. It uses the vega-lite-api to compose marks and encodings, with a custom config for axis styling. Data loads via d3.csv from the UCI Machine Learning Repository, while vega-tooltip handles interactions. Rendering focuses on full-window SVG output.

Jun 6, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the fundamental process of loading and parsing a CSV file with D3.js (version 5) inside an HTML page. It fetches a remote dataset of CSS named colors and displays three computed statistics in large type: the number of rows, the number of columns, and the data size in kilobytes. The visualization uses the `d3.csv()` API to asynchronously fetch and parse the data, then calls `d3.csvFormat()` to measure the formatted string length, providing a simple, functional output. The React framework is noted in the metadata for context.

Jun 5, 2021

Loading thumbnail…

starter

A face built from SVG circles and a D3 arc path responds to the mouse position. The multi-component React app, using `useState` and `useCallback`, tracks cursor coordinates and renders a simple circle. The face is composed from `BackgroundCircle`, `Eyes`, and `Mouth` components, with the mouth generated by `d3.arc()` and the face assembled via `FaceContainer`. The code defines a yellow circle with black stroke, black eyes, and an arc-shaped mouth, all arranged in a fixed layout.

Jun 5, 2021