Iverefiner

@Iverefiner·8 public vizzes

Fork of Rendering Data with React and D3

A radial burst of CSS named colors fills an SVG canvas, with each color represented as a pie slice emanating from the center. The visualization loads color data from a CSV file using D3’s `csv` utility, then uses `d3.pie` and `d3.arc` to compute the slice geometry for React components. React’s `useState` and `useEffect` hooks manage the asynchronous data fetching and rendering, producing a static, full-width radial layout where each slice’s fill corresponds to its hexadecimal color value.

Nov 4, 2021

Loading thumbnail…

Rendering Data with React and D3

This example displays the 148 CSS named colors as a horizontal stacked bar chart, with each color rendered as a 4-pixel-tall div whose background color matches its RGB hex value. The application loads the dataset using D3’s `d3.csv` utility and then uses React components to map each row into styled HTML elements. The code combines React’s state management with D3’s data-fetching API, and renders the output via ReactDOM.

Nov 4, 2021

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load external CSV data with React and D3, displaying a text summary of the dataset. It fetches CSS named colors from a GitHub gist using d3.csv, stores the parsed rows in React state via the useEffect hook, and renders the result as a message showing file size, row count, and column count. The visualization updates from a “loading” placeholder to the data summary once the asynchronous request completes, highlighting the integration of React’s state management with D3’s data-loading utilities.

Nov 4, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows the distribution of religious affiliations across countries, using circle size to encode population and axes for country and religion. Built with the Vega-Lite API, it registers Vega and Vega-Lite libraries, fetches CSV data via d3.csv, and renders an interactive SVG chart with tooltips. The visualization config customizes axis labels, tick colors, and font styles for improved readability. The chart auto-sizes to the window and fits its content with padding.

Nov 4, 2021

Loading thumbnail…

Smiley Face

The visualization displays a grid of eighteen randomly generated smiley faces, each rendered as an SVG. Built with React and D3 v7, the code composes faces from separate components for the background circle, eyes, and mouth. The mouth uses D3's `arc()` to create a smile shape. Each face is generated with randomized values for stroke width, eye position and radius, and mouth dimensions, producing a playful variety of expressions.

Nov 2, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and analyze a CSV file from a remote URL. It displays the file size in kilobytes, the row count, and the column count for a dataset of CSS named colors. The implementation uses D3’s `d3.csv` method to fetch and parse the data, then computes and renders the statistics using `d3.csvFormat` and the parsed array’s `columns` property. The output is presented as large text in a `<pre>` element, with alternative commented approaches showing `fetch` with `async`/`await` and `d3.csvParse`.

Nov 1, 2021

Loading thumbnail…

Mouse Follower

A single circle follows the mouse cursor across a full-screen SVG canvas. Built with React and SVG, the example uses the `useState` and `useCallback` hooks to track `clientX` and `clientY` coordinates from the SVG element's `onMouseMove` event, updating the circle's `cx` and `cy` attributes in real time. The circle starts at the center of the viewport and moves smoothly with pointer input.

Nov 1, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A yellow smiley face is drawn in SVG, centered within a 960 by 500 viewport, with black-outlined circular eyes and a thick, arc-shaped mouth. The face’s head is a circle with a yellow fill and black stroke, while the mouth is generated using the `d3.arc()` generator with specified inner and outer radii and angular extents. The component is built with React and rendered through `ReactDOM.render`, using D3 v5 for path generation and React for declarative SVG element creation.

Nov 1, 2021