zhehaowUNC

@zhehaowUNC·3 public vizzes

Fork of Rendering Data with React & D3

This visualization renders a radial burst of CSS named colors using React and D3. It loads color data from a CSV file via `d3.csv`, then maps each color to a pie slice using `d3.pie` and `d3.arc`. The React component displays the slices as SVG paths, with each slice’s fill set to its corresponding hex value. The code also includes an alternative manual arc calculation approach, commented out, using trigonometric formulas. A loading state is shown until the data is fetched.

May 2, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between car engine displacement and horsepower, with a tooltip revealing the car name for each point on the line chart. It loads the auto-mpg.csv dataset from a GitHub gist using D3’s CSV function. The visualization is built programmatically with the Vega-Lite API, registering Vega and Vega-Lite, and renders as SVG with custom axis and label styling from a config object. The chart fully fits the browser window via autosize settings.

May 1, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays a single, centered SVG circle on a 500 by 500 canvas, alongside a static HTML message. The page loads React 18 from a CDN but only uses it to log a console message; the visual output relies on raw SVG markup. Styling is handled with CSS, which centers the text and attempts to center the SVG element. The code demonstrates a minimal setup combining HTML, CSS, and JavaScript, with the SVG rendering showing a circle defined by a fixed radius.

Apr 27, 2022