sabredefable

@sabredefable·6 public vizzes

Fork of Axes with React & D3

This visualization displays a horizontal bar chart of the top 20 most populous countries for 2020, using data from the United Nations World Population Prospects 2019. It shows no axes, only labeled bars with tick marks and value labels at the bottom. The chart is built with React components that manage state and rendering, while D3 v5 utilities like `csv`, `scaleBand`, and `scaleLinear` handle data loading and scaling. SVG elements such as `rect`, `line`, and `text` are rendered directly through React’s JSX, with D3’s `ticks()` generating the numeric gridlines.

Apr 23, 2021

Loading thumbnail…

Rendering data with react

An interactive donut chart renders a dataset of CSS named colors fetched as CSV via React’s `useEffect` hook and `d3.csv`. Each color is represented as a slice using `d3.pie` and `d3.arc`, with the slice’s fill set to its corresponding RGB hex value. The React component manages loading state and maps the pie-arc data to SVG `<path>` elements, creating a full-circle visualization where every color appears once with no gaps. ReactDOM mounts the component into the page.

Apr 14, 2021

Loading thumbnail…

Fork of Mouse follow

This fork of "Mouse follow" displays metadata about a CSV dataset, showing the file size in kilobytes, row count, and column count in large text. The page loads data from a remote CSV of CSS named colors using `d3.csv`, then formats the statistics with `d3.csvFormat` within a React component. The application uses React's `useState` and `useEffect` hooks to fetch the data asynchronously and render the message as an SVG via ReactDOM.

Apr 8, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file by fetching a dataset of CSS named colors and displaying summary statistics about it. The visualization shows the file size in kilobytes, the number of rows, and the number of columns in a large text message. It uses the D3.js v6 library, specifically the `d3.csv` method to load and parse the data, and `d3.csvFormat` to calculate the data size. The output is presented as plain text in a styled `<pre>` element.

Apr 8, 2021

Loading thumbnail…

Mouse follow

A React mouse-follow example renders a single SVG circle that tracks the cursor in real time. As the pointer moves across the full-window SVG, the circle's center coordinates update via React state and the `onMouseMove` event handler. Built with React 16.9 and no external data, it demonstrates a minimal interactive component using `useState` and `useCallback` to manage position updates.

Apr 8, 2021

Loading thumbnail…

Smiley face pt1

A grid of eighteen randomly parameterized smiley faces, each rendered as an SVG via React, shows variation in eye placement, eye size, and a fixed-width arc mouth. The faces use d3's `arc` to generate the mouth path, while `Math.random` drives the per-face eye offset and radius. The `FaceContainer` provides a translated SVG group, and each face reuses modular components for the background circle, eyes, and mouth.

Apr 7, 2021