redeath96

@redeath96·8 public vizzes

Fork of Fork of Rendering Data with React & D3

This example shows a radial burst visualization of CSS named colors, where each color from the dataset is rendered as a wedge-shaped path emanating from the center of an SVG. React manages the component state, using the `useState` and `useEffect` hooks to asynchronously load the CSV data via `d3.csv`. The `d3.pie` function arranges the data into angular segments, while `d3.arc` generates the SVG path geometries for each colored slice. All rendering happens declaratively in React, with D3 serving only to compute the layout and shapes.

Feb 22, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This example displays CSS named colors as a radial burst, with each color occupying an equal slice of a circle. It loads the data from a CSV via `d3.csv`, then uses React to render SVG paths, with `d3.arc` and `d3.pie` computing the angular segments. The chart is centered in an 960×500 SVG, and the color fill for each slice comes from the `RGB hex value` column.

Feb 22, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data where each car model is represented as a bar positioned by its miles per gallon (mpg) and year, with color encoding the country of origin and bar size encoding horsepower. The visualization uses the Vega-Lite API to construct the specification, which is then rendered as an SVG by Vega, with data loading handled through d3’s `csv` function. Tooltips are enabled via vega-tooltip, and the chart is configured with custom axis and label styling from the `config.js` file, while the layout auto-fits to the browser window.

Feb 22, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in a React application using D3. It displays the parsed dataset’s summary statistics, including its size in kilobytes, row count, and column count. The code uses React’s `useState` and `useEffect` hooks alongside D3’s `csv` function to fetch data from a remote GitHub gist containing CSS named colors. The resulting message is rendered as large text, providing a clear, minimal visualization of the data’s structure.

Feb 22, 2022

Loading thumbnail…

point

A single yellow circle follows the mouse cursor within an SVG canvas, serving as a simple interactive point visualization. The React application tracks mouse movement via an onMouseMove handler, updating the circle's cx and cy coordinates through React's useState hook. Using a production build of React 16.9.0, the code renders a 600x300 SVG element and directly manages state updates on every cursor position change, with no additional D3 functions beyond the imported arc utility.

Feb 22, 2022

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a smiley face built with reusable React components, rendered as SVG with D3’s arc generator for the mouth. The code splits the face into separate ES6 modules for the background circle, eyes, and mouth, using React fragments to return multiple elements. The face is centered via an SVG group transform, with fixed dimensions and styling defined in a plain HTML wrapper. The React and D3 libraries are loaded from CDNs, and the final composition is mounted into the DOM with ReactDOM.

Feb 21, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a smiley face composed of SVG shapes, built with React components and D3’s arc generator. The background circle and eyes are rendered as JSX elements, while the mouth uses the `d3.arc()` API from `mouthArc.js` to define a path with inner and outer radii and angled endpoints. All shapes are centered via a translated `<g>` group inside a fixed-width SVG. The code separates reusable pieces like `BackgroundCircle` into distinct modules, combining React’s declarative structure with D3’s geometry helpers.

Feb 21, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a partially constructed smiley face rendered as a yellow circle with a black outline, paired with a single eye circle positioned to the left of center. The code uses React to define reusable SVG circle elements, with dimensions and positions derived from computed variables such as centerX, centerY, and radius r. The rendering relies on ReactDOM to mount the SVG into the DOM, and all geometric values are calculated from the fixed width and height of 960 by 500 pixels. The face is incomplete, featuring only one eye, leaving the second eye and mouth absent.

Feb 21, 2022