AnthoVDO

@AnthoVDO·14 public vizzes

Loading data in react

This example demonstrates asynchronous data loading in a React application using D3. It fetches a CSV file containing CSS named colors and displays the file size in kilobytes once the data arrives, showing a "loading" message beforehand. The code uses React hooks (`useState`) to manage the data state and the `csv` function from D3 to parse the remote CSV. The text updates dynamically through React's rendering, with the data size calculated using `d3.csvFormat`.

Apr 22, 2021

Loading thumbnail…

Loading data with React

This example demonstrates how to load and parse CSV data in a React application using D3. It fetches a remote file containing CSS named colors, converts the text response into a structured dataset with `d3.csvParse`, and displays summary statistics about the data size and structure. The page uses the native Fetch API for the network request and async/await syntax to handle the response, with D3 v6 handling text parsing. The resulting info panel shows the file's kilobyte size, row count, and column count as plain text.

Apr 22, 2021

Loading thumbnail…

Test parsing data with D3

This example demonstrates how to load and parse CSV data with D3, displaying basic information about the dataset in the page. It fetches a remote CSV file containing CSS named colors using the Fetch API and parses the text with `d3.csvParse`, then reports the file size, row count, and column count in a paragraph. The async/await pattern and `fetch` handle the network request, while D3 v6 manages the parsing and DOM updates.

Apr 21, 2021

Loading thumbnail…

Testing fetch data Curran Kelleher's course

This example demonstrates how to fetch and load a CSV file asynchronously using JavaScript, logging the raw text to the browser console. It uses the `fetch` API within an `async` function `fetchText` to retrieve a dataset of CSS named colors from a GitHub Gist hosted by Curran Kelleher. The page displays a simple heading, but the core behavior is observable in the console, where the data appears as plain text. The code illustrates a basic pattern for fetching remote data, without parsing or visualizing it further.

Apr 20, 2021

Loading thumbnail…

Fork of Fork of Smiley Face Part V

A grid of eighteen randomized smiley faces renders as SVG via React components, each with a yellow face, black stroke, offset eyes, and an arc-based mouth. The code splits reusable parts into separate ES6 modules (BackgroundCircle, Eyes, Mouth, FaceContainer) and uses React Fragments to group eye elements. It leverages d3’s `arc` generator for mouth paths and `range` for iteration, with ReactDOM mounting the app. Random values for eye offset, eye radius, and mouth dimensions generate subtle variations across the repeated faces.

Apr 19, 2021

Loading thumbnail…

Fork of Smiley Face Part V

A yellow smiley face is rendered as an SVG graphic, composed of a circle, two eyes, and an arc-based mouth. The example demonstrates modularizing React components by splitting the face into separate files—`BackgroundCircle`, `Eyes`, and `Mouth`—using ES6 modules and React Fragments. The `Mouth` component uses `d3.arc()` to generate a path. The `index.js` file assembles these components within an SVG, using fixed pixel dimensions and predefined constants for positioning and sizes.

Apr 19, 2021

Loading thumbnail…

Fork of Smiley Face Part IV

This example shows a classic smiley face drawn with SVG elements in a React application. A yellow background circle with a black stroke forms the head, while two black circles represent the eyes and a D3 arc generator creates the mouth. The code uses React components like `BackgroundCircle`, `Eyes`, and `Mouth`, with D3's `arc()` API for the curved mouth path. All shapes are centered using an SVG `<g>` transform, and the visualization is rendered entirely through React's declarative component model.

Apr 19, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A smiley face is rendered as a yellow circle with two eyes and an arc-shaped mouth, centered within an SVG canvas. The face is built using React components that generate SVG elements, while D3’s `arc` function calculates the mouth’s path geometry. The background circle’s radius is derived from the canvas height minus half the stroke width, and all facial features are positioned relative to the center using translation. The implementation combines React’s declarative rendering with D3’s shape utilities to create a static, stylized illustration.

Apr 18, 2021

Loading thumbnail…

Fork of Fork of Smiley Face Part III

A yellow smiley face is rendered across the full browser height, centered horizontally, with two black eyes and no mouth. The face is drawn as SVG circles inside a React component, using React 16.9 and ReactDOM to mount the visualization. The face’s size adapts to the window height, and its position and features are computed from center coordinates, with the outer circle’s radius set to centerY minus half the stroke width.

Apr 18, 2021

Loading thumbnail…

Fork of Fork of Fork of Smiley Face Part II

A yellow smiley face is drawn on an SVG canvas using React components, with circles for the head and eyes, an arc path for the mouth, and a polygon for the nose. The visualization is generated entirely through code, using d3.arc to compute the mouth’s curved path from inner and outer radii and angular start/end points. React renders the SVG elements, while D3 v6 provides the arc generator, and a hardcoded set of dimensions and offsets positions each facial feature relative to a centered translation group.

Apr 18, 2021

Loading thumbnail…

Fork of Fork of Smiley Face Part II

This example displays a yellow smiley face composed of SVG primitives, centered on a 960×500 canvas with a black circular outline, two eyes, and a mouth. The face uses d3.arc to generate a semi-circular mouth path, while React renders the overall SVG structure. The code defines geometric constants for positioning and sizing, and uses polygon elements to create the nose. The visualization is built with React 16.9 and d3.v6, transforming a group element to the center of the canvas for placement.

Apr 18, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face rendered with React and SVG adapts to the full height of the browser window. It uses React functional components and JSX to draw a circle for the head, two for the eyes, and a mouth via `<g>` transformations. The implementation relies on React 16.9 and ReactDOM, with dimensions calculated from `window.innerHeight`. The face is positioned relative to the center, and the mouth is defined by `mouthWidth` and `mouthRadius` variables, though the final mouth is not visible in the provided code.

Apr 18, 2021

Loading thumbnail…

Fork of Fork of Smiley Face Part III

This example renders a full-screen SVG of a simple smiley face using React and D3. It shows a yellow circle with a black outline, two eye circles, and a mouth arc created with the `d3.arc()` API. The React component computes dimensions from `window.innerWidth` and `window.innerHeight`, positioning all elements relative to the center. The code demonstrates how D3 shape generators can be integrated within a React-rendered SVG.

Apr 18, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a yellow smiley face built from SVG circles, with a large head and two smaller eyes placed symmetrically around the center. React renders the SVG elements, while the dimensions and positions are computed from variables derived from a 960 by 500 viewport. The code uses ReactDOM to mount the component and assigns fixed values for the head radius, eye offsets, and stroke width. The face is incomplete, lacking a mouth, as described in the README.

Apr 18, 2021