simfen

@simfen·4 public vizzes

Rendering Data with React

A React application renders a pie chart from CSS named colors loaded via `d3.csv`, with each slice filled by its corresponding hexadecimal value. Using React's `useState` and `useEffect` hooks, the data is fetched asynchronously and displayed as SVG paths generated with `d3.arc` and `d3.pie`. The chart maps each color to an equal-sized slice, creating a full circular visualization of the dataset. Loading state is shown as a large text prompt until the CSV data arrives.

Apr 21, 2021

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile displacement against horsepower, with tooltips revealing car model names. The visualization is constructed programmatically using the Vega-Lite API, which builds an interactive chart through chained method calls. Data flows from a CSV file fetched via `d3.csv`, while the chart specification uses `vl.x().fieldQ()` and `vl.y().fieldQ()` for quantitative encodings. The rendering pipeline combines Vega and Vega-Lite libraries, with a custom configuration adjusting axis styles and font sizes for readability. The chart automatically fits to the browser window size and employs a translucent point style to show density.

Apr 21, 2021

Loading thumbnail…

Loading Data with React and D3

A React and D3 example demonstrates how to track and render the mouse position as an SVG circle that follows the cursor across the full viewport. The code uses React’s `useState` and `useCallback` hooks within an `App` component, handling `onMouseMove` events on an `<svg>` element. The circle’s coordinates update directly from `clientX` and `clientY`, with all dimensions set to `window.innerWidth` and `window.innerHeight`. No external data is loaded; the visualization relies solely on user interaction and SVG rendering.

Apr 21, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of 18 randomly generated faces, each with a yellow circular background, two eyes, and a mouth, demonstrates a modular React component approach. The code uses D3’s `arc` API to create the mouth path and the `range` function to generate the grid layout. Each face’s eye offset, eye radius, and mouth radius are randomized, resulting in varied expressions, while the SVG rendering is handled through React components for the background, eyes, mouth, and face container.

Apr 21, 2021