Saralanelson

@Sarala-D·4 public vizzes

Fork of Rendering Data using React & D3

A React application renders a color swatch strip from CSS named colors data. It fetches the dataset using d3.csv from a gist, then maps each row to a styled div whose background color uses the row’s RGB hex value. The example demonstrates integrating React state and hooks (useState, useEffect) with D3’s CSV parsing in an SVG-free layout, producing a full-width, height-constrained band of individual color rows.

Jul 17, 2021

Loading thumbnail…

Rendering Data using React & D3

This example renders a vertical stacked-bar-style visualization of CSS named colors, with each color represented as a 3-pixel-tall horizontal strip whose background color matches the RGB hex value from the data. It uses React 17 to manage component state and rendering, while D3 v7’s `csv` function fetches the color data from a GitHub gist URL. The `useEffect` hook triggers the asynchronous data load, and the `useState` hook stores the parsed result, displaying a loading message until the data arrives. The visualization itself is composed of simple React div elements, each styled inline with the hex color, rather than using D3’s SVG or layout functions.

Jul 17, 2021

Loading thumbnail…

Loading data

This example demonstrates how to load and summarize a CSV dataset using D3.js. It fetches a file of CSS named colors from a GitHub Gist, then displays the number of rows, the approximate file size in kilobytes, and the column count as plain text in the browser. The code uses `d3.csv` to parse the remote data and `d3.csvFormat` to calculate its string length. The result is a minimal, text-based confirmation that the data has been successfully retrieved and parsed.

Jul 17, 2021

Loading thumbnail…

Fork of HTML Starter

A yellow smiley face is rendered in the center of an SVG canvas, composed of circles for the face and eyes, and an arc for the mouth. The React component structure uses D3's `arc` generator to compute the mouth path, while circle elements are positioned via SVG transforms. The code imports React and ReactDOM to render the SVG, with D3 v7 providing the arc geometry.

Jul 10, 2021