stellnew

@stellnew·11 public vizzes

Loading Data with React & D3

This example demonstrates a minimal React application that loads a remote CSV dataset using D3's `csv` utility. The interface displays a simple text summary of the loaded data, showing the number of rows and columns. The application uses React's `useEffect` hook to asynchronously fetch the data from a GitHub Gist containing CSS named colors, and `useState` to store the parsed result. The message is generated by a custom `message` module and rendered inside an HTML `<pre>` element, with the entire app mounted via `ReactDOM.render`.

Aug 22, 2020

Loading thumbnail…

Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars without any axes, labels, or scales, filling the viewport with oversized rectangles. The chart uses React hooks to fetch and process data from the United Nations World Population Prospects 2019 dataset via `d3.csv`, then renders SVG `rect` elements positioned by `d3.scaleBand` and `d3.scaleLinear`. The code applies no styling or annotations, intentionally presenting bare data values as a deliberately minimal and ironic visualization.

Aug 18, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to draw a cartoon smiley face as an SVG, then animates its eyebrows with a looping transition. The face is composed of circles and rectangular eyebrows that move up and down over two seconds using D3’s `transition` API. The code demonstrates fundamental DOM selection and element creation via `select` and `append`, while the mouth is formed using the `arc` shape generator. The animation runs continuously, showing basic attribute manipulation and chained transitions.

Aug 12, 2020

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file with D3 v5, displaying the resulting dataset’s size, row count, and column count in a large preformatted text element. It fetches a remote CSV of CSS named colors using `d3.csv`, then formats the resulting parsed data with `d3.csvFormat` to compute its kilobyte size. The code also includes commented alternatives using the Fetch API and async/await with `d3.csvParse`, though only the primary `d3.csv` promise-based method is active.

Aug 10, 2020

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas. The example demonstrates React state management with D3.js in the background, using React `useState` and `useCallback` to track cursor coordinates via the `onMouseMove` event. The circle’s position updates in real time through React’s re-rendering, with its `cx` and `cy` attributes bound to the current mouse position. It renders a single circle with a radius of 30 pixels on a 960 by 500 viewport.

Aug 8, 2020

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote source using the Fetch API. It fetches a text file containing CSS named colors and logged the raw CSV contents to the browser console. The code uses the standard `fetch` function with an asynchronous `async`/`await` pattern to retrieve the data, then converts the response to text via `response.text()`. The example focuses on the data-loading step rather than visualization, displaying no graphical output.

Aug 7, 2020

Loading thumbnail…

Smiley Face Part VI

A grid of eighteen randomly generated smiley faces displays the core components of a face—background, eyes, and mouth—each with randomized dimensions and stroke widths. Built with React and D3 v5, the visualization renders SVG elements through reusable components. The mouth uses a D3 `arc` generator to create an arc path, while the faces are positioned with SVG transforms.

Aug 7, 2020

Loading thumbnail…

Smiley Face Part V

This example shows a smiling face built from basic SVG shapes, scaled to fill the browser viewport. The face consists of a yellow circular background with a thick black outline, two small black eyes, and a mouth drawn as an arc. The visualization is constructed using React components that render SVG circles and a D3 arc path, with all positioning and dimensions derived from the viewport’s width and height.

Aug 6, 2020

Loading thumbnail…

Smiley Face Part IV

A yellow smiley face with black outlined eyes and a thick, arc-shaped mouth is rendered as a full-screen SVG. The face is built from React components, with the mouth generated using the `d3.arc` generator to create a half-circle path. The background circle, eyes, and mouth are positioned relative to the window’s center, and D3’s arc API is used to define the mouth’s inner and outer radii and its angular range.

Aug 6, 2020

Loading thumbnail…

Smiley Face Part IV

This example displays a yellow smiley face that fills the browser window, drawn with SVG circles for the head and eyes and a D3 arc path for the mouth. It uses React to render the SVG elements, with D3 v5’s `arc` function defining the mouth’s semicircular shape. The face is centered and scales to the viewport’s width and height, with the head radius based on half the window height. React and D3 are combined to create the static visualization.

Aug 6, 2020

Loading thumbnail…

Smiley Face Part II

A large yellow smiley face rendered in SVG fills the browser window, scaling with the viewport dimensions. The face consists of a circle for the head, two smaller circles for eyes, and a smile created by a D3 arc path. Using React for structure and D3's `arc()` API to generate the mouth’s geometry, the piece demonstrates combining declarative component logic with algorithmic path generation for a playful, responsive graphic.

Aug 6, 2020