pyDimi

@pyDimi·7 public vizzes

Fork of Rendering Data w/ React

This example visualizes CSS named colors as a donut chart, with each color’s name and value displayed as a slice. The code loads color data from a CSV file using `d3.csv`, stores it in React state with `useState` and `useEffect`, and renders the chart as SVG paths. Each slice’s angle is computed from the index of the color in the dataset, and its fill is set to the corresponding hex value using the `arc` and `pie` functions from D3 v6. The chart is centered within a fixed 960×500 viewport.

Mar 3, 2021

Loading thumbnail…

Rendering Data w/ React

A React application renders a horizontal strip of CSS Named Colors from a CSV dataset, with each color displayed as a thin 4-pixel-high div whose background matches its hex value. The code uses `useState` to hold the data, `useEffect` with `d3.csv` to load the remote file, and `ReactDOM.render` to mount the component. While the data loads, a large "Loading..." message appears; once fetched, the map over the array produces the full color band.

Mar 3, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This visualization demonstrates a minimal React and D3 integration for loading and summarizing a CSS Named Colors dataset. The app uses React’s `useState` and `useEffect` hooks to manage asynchronous data fetching, while `d3.csv` retrieves the CSV file from a GitHub gist. Once loaded, the `message` function computes and displays the dataset’s file size, row count, and column count using `d3.csvFormat` and string concatenation, rendering the result inside a `<pre>` element. Before data arrives, the UI shows a simple “loading...” placeholder.

Mar 3, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how React state manages and updates an SVG circle’s position in response to mouse movement. The App component uses the useState and useCallback hooks to track the cursor’s clientX and clientY coordinates, updating the circle’s cx and cy attributes on every mousemove event within the SVG element. Built with React 16.9 and rendered through ReactDOM, the visualization creates an interactive circle that directly mirrors the pointer’s location on the 960×500 canvas, with a fixed radius of 30 pixels.

Mar 2, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL, displaying the file size, column count, and row count as large text. The code fetches the CSV using the Fetch API, then parses it with `d3.csvParse` to extract metadata. The rendered output is plain text in a `<pre>` element, styled with CSS. The visualization itself is minimal, focusing on the parsing workflow rather than graphical representation. A React-based alternative is also provided, showing mouse tracking with SVG.

Mar 2, 2021

Loading thumbnail…

Fork of viz start

A grid of eighteen yellow smiley faces renders in SVG via React. Each face is composed of separate components for the background circle, eyes, and a mouth drawn with d3’s `arc` generator. Eyes vary randomly in radius per face, while all other geometry stays fixed. The example demonstrates composing interactive-free SVG elements with React and d3, using `FaceContainer` to center a translated group.

Mar 1, 2021

Loading thumbnail…

viz start

A grid of eighteen smiling faces, each rendered as an SVG with a yellow circular head, black outline, two eyes, and an arc-shaped mouth. The faces are generated using React components, with the `Mouth` component leveraging the D3 `arc` API to create the curved smile. Each face randomly varies its eye radius, while all other facial features remain consistent. The `Face` component composes the constituent parts, and the `FaceContainer` wraps them in an SVG element, translating the coordinate system to the center of each face.

Mar 1, 2021