pianojoel

@pianojoel·5 public vizzes

Loading data with react and d3

This example demonstrates loading a remote CSV dataset into a React application using D3’s `csv` method within a `useEffect` hook, then displaying summary statistics—file size in kilobytes, column count, and row count—as large text. The code initializes a state variable with `useState`, asynchronously fetches the data from a GitHub gist, and renders a loading message until the data arrives. It uses React 16.13.1, D3 v6, and defines a reusable `message` function that formats the data summary with `d3.csvFormat`.

Oct 8, 2021

Loading thumbnail…

fetch csv etc

This example demonstrates how to fetch a remote CSV file using D3’s `d3.csv` method and display basic metadata about the dataset in plain text. It renders the file size in kilobytes, the number of columns, and the number of rows into a `<pre>` element. The code loads a CSS color list from a GitHub gist, and uses `d3.csvFormat` to calculate the raw data’s size. React is imported but unused, while D3 v7 handles the asynchronous data loading and parsing.

Oct 7, 2021

Loading thumbnail…

Fork of React Starter

The visualization is an interactive React application that renders a single SVG circle, which follows the cursor's movement across the viewport. The circle's position updates in real time based on the mouse coordinates captured by the `onMouseMove` event handler. Using React's `useState` hook, the component tracks the mouse position and re-renders the SVG element with the new `cx` and `cy` attributes. The code employs the React and ReactDOM libraries, rendering the visualization directly into the HTML root element. The SVG canvas is 960 by 500 pixels, with the circle's default starting position at the center.

Oct 7, 2021

Loading thumbnail…

Forkeact + D3 Viz Starter

This visualization displays a grid of eighteen randomly generated cartoon faces, each composed of a yellow background circle, two eyes, and a curved mouth. The React component structure uses separate components for each facial feature, with the `FaceContainer` managing the SVG coordinate system. D3.js provides the `arc` function for creating the mouth paths and the `range` utility to generate the array of faces, while the `VizContainer` component handles margins and layout boundaries.

Oct 7, 2021

Loading thumbnail…

Fork of HTML Starter

A smiling face built from simple SVG shapes, rendered in React. The code imports React and ReactDOM, alongside the `arc` function from d3, which constructs the mouth path. A background circle, two eyes, and the mouth are composed within a translated `<g>` element. The eyes are separate React components, while the mouth uses d3's `arc` generator with specified inner and outer radii and angles. All shapes have fixed stroke widths and are centered on an SVG canvas.

Mar 1, 2021