Sandra

@sandra-tu·9 public vizzes

Fork of Loading data with React and D3

This example demonstrates a React and D3 v6 workflow for loading external CSV data, displaying summary statistics about the dataset, and rendering a visual representation of CSS named colors. The code uses React hooks (`useState`, `useEffect`, `useCallback`) to manage asynchronous data loading via `d3.csv`, fetching a gist-hosted file containing color names and RGB hex values. Once loaded, the app calculates and displays dataset size in kilobytes, row count, and column count using `d3.csvFormat`. The example shows how to integrate D3 data-fetching methods within a React component lifecycle, with the resulting data available for further visualization tasks.

Jun 7, 2021

Loading thumbnail…

Loading data with React and D3

This example demonstrates how to combine React with D3 to load and display CSV data. Using the `useState` and `useEffect` hooks, it fetches a CSS named colors dataset from a GitHub gist via `d3.csv` and presents a summary message showing file size in kilobytes, row count, and column count. The visualization updates from "loading" to the data summary once the asynchronous request completes, with React handling the UI state and D3 performing the data parsing. The code uses React 16.9 and D3 v6.

Jun 3, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3.js, displaying the file size, row count, and column count in a large text container. It fetches a CSV of CSS named colors from a GitHub gist and processes it with `d3.csv` and `d3.csvFormat`. The code also includes an alternative commented-out approach using the Fetch API and `d3.csvParse`, highlighting two common methods for handling CSV data in D3 v6.

Jun 3, 2021

Loading thumbnail…

Smiley Face Part VI

A yellow smiley face is drawn as a static SVG graphic, centered on a canvas of 960 by 500 pixels. The face consists of a yellow circle with a black stroke, two black eyes, and an arc-shaped mouth. The example demonstrates how to structure a React application using ES6 modules, with separate component files for the background, eyes, and mouth, and uses React fragments to group elements. The mouth's arc is generated using D3's `arc` API to create the path data.

Jun 2, 2021

Loading thumbnail…

Smiley Face Part V

This example shows a yellow smiley face composed of a circular face, two eyes, and a curved mouth, rendered as scalable vector graphics. The implementation uses React components for the face and eyes, while D3’s `arc` generator creates the mouth path. All shapes are drawn inside a single SVG group, positioned via a transform, with fixed pixel dimensions for width and height. The code relies on React’s `ReactDOM.render` to mount the app and D3 v5 for the arc calculation.

Jun 2, 2021

Loading thumbnail…

Smiley Face Part IV

A smiley face is drawn as a yellow circle with black outline, two eyes, and a curved mouth, all centered in an SVG canvas. The React component uses D3’s `arc` generator to create the mouth path, while circles and a background circle are defined as React elements. The code employs `ReactDOM.render` to display the graphic, with fixed dimensions and styling for stroke width and eye placement.

Jun 2, 2021

Loading thumbnail…

Fork of Smiley Face Part IV

This example shows a yellow smiley face rendered as an SVG, with two static eyes and a curved mouth positioned symmetrically around the center of a 960-by-500 canvas. The face is built using React components for the circle elements, while the mouth is generated with the `arc()` function from d3, specifying inner and outer radii and start and end angles. The visualization uses React 16.9 and d3 v5, with all shapes drawn directly in SVG coordinates.

Jun 2, 2021

Loading thumbnail…

Let's Make a Face Part III

This example displays a yellow smiley face constructed with SVG shapes, including eyes, a mouth arc, and an angled eyebrow line. The rendering uses React to manage the SVG elements, with D3 v6 calculations via `arc()` for the mouth path and `line()` for the eyebrow. The face is centered on a 960×500 canvas, with positions derived from fixed offsets and radius values. The code demonstrates a static, programmatic composition of a facial illustration, combining D3 geometry helpers within a React component tree.

Jun 1, 2021

Loading thumbnail…

Smiley Face Part I

A yellow circle with two black eyes floats against a blank background, forming the start of a smiley face. The code renders the shapes as SVG circles, using inline attributes for radius, position, fill, and stroke. It sets a 10-pixel black stroke around the face and a dark fill for the eyes. The example relies solely on raw SVG markup within an HTML page, with no external libraries or data sources.

Jun 1, 2021