captind

@captind·9 public vizzes

Fork of Rendering data with react

This example visualizes CSS named colors as a pie chart, with each slice colored by its corresponding RGB hex value. It loads color data from a CSV file using D3’s `csv` utility, then manages the fetched data through React’s `useState` and `useEffect` hooks. The chart is rendered as SVG paths, with each arc computed using D3’s `arc` generator and positioned around a central point. While the data loads, a large loading message appears in place of the visualization.

Feb 24, 2023

Loading thumbnail…

Rendering data with react

This example displays CSS named colors as horizontal bars stacked vertically, with each bar’s background color set to its corresponding RGB hex value from the loaded dataset. It uses React hooks (`useState`, `useEffect`) to fetch and store the data via D3’s `csv` utility, then conditionally renders a “Loading...” message until the data arrives. ReactDOM mounts the `App` component, which maps over the CSV rows to produce the colored divs, demonstrating a simple data-driven rendering pipeline with React and D3.

Feb 24, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data from an auto-mpg CSV, showing the relationship between engine displacement and horsepower. The visualization is built using the Vega-Lite API, which composes specifications and renders them through Vega-Lite while leveraging D3’s `csv` loader to fetch and parse the data. Points are rendered as semi-transparent filled circles with tooltips that reveal vehicle names. The plot uses a custom config and a fit-to-window layout, with axis styling adjusted for readability.

Feb 22, 2023

Loading thumbnail…

Loading Data with react and D3

This example demonstrates how to load and display CSV data within a React application using D3. It shows a text summary of the dataset, including its size in kilobytes, row count, and column count, while the data is fetched asynchronously from a remote GitHub URL. The code uses React hooks like `useState` and `useEffect` along with D3’s `csv` function to parse the data, and renders the result as SVG text within a `<pre>` element.

Feb 22, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the initial steps of working with tabular data in D3 by fetching a CSV file and parsing it into JavaScript objects. It displays a summary message showing the file size in kilobytes, the number of rows, and the number of columns. The code uses the native `fetch` API to retrieve the remote CSV from a GitHub gist, followed by `d3.csvParse` to convert the raw text into an array of objects. The resulting counts are rendered into a `<pre>` element with large font styling, highlighting the parsed data’s structure without showing its contents.

Feb 22, 2023

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor within an SVG canvas as the pointer moves. The visualization uses React hooks and event handling, specifically the `useState` and `useCallback` functions, to track the cursor's `clientX` and `clientY` coordinates and update the circle's `cx` and `cy` attributes. The circle is drawn using React's SVG support, with the D3.js `arc` function imported but not used in the visible code. The canvas size is fixed at 960 by 500 pixels with a circle radius of 30.

Feb 21, 2023

Loading thumbnail…

Mouse Follower

A yellow face with two eyes follows the mouse cursor across the full browser window. Built with React and ReactDOM, the SVG rendering uses window dimensions to position a centered group containing a large stroked circle and two smaller eye circles, with a transform translating the group to the cursor’s coordinates. The code derives the target position from `window.innerWidth` and `window.innerHeight`, though the actual mouse tracking is not implemented in the provided files.

Feb 21, 2023

Loading thumbnail…

Smiley Face Part 1

This example shows a minimalist smiley face composed of a yellow circle, two eyes, and a mouth that only forms the lower half of an arc, giving it a neutral yet slightly melancholic expression. The face is built from reusable React components—BackgroundCircle, Eyes, Mouth, and FaceContainer—that accept props for positioning and sizing. The mouth is generated using d3.arc with a predefined start and end angle, while SVG circles render the head and eyes. The fixed 960×500 viewport centers the face, and all elements scale based on numerical props passed from a top-level Face component.

Feb 21, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiling face made of SVG shapes uses D3.js selections and transitions to animate its eyebrows. The code builds a yellow circle for the head, two eyes, and an arc-based mouth. D3's `transition()` and `attr()` methods move the eyebrow group up and down. The example demonstrates fundamental DOM manipulation with D3 v5, drawing shapes directly in an SVG element.

Feb 20, 2023