jinglejiang

@jinglejiang·7 public vizzes

Fork of Loading Data with React & D3

This example displays a text summary of a CSS named colors dataset. It shows the file size in kilobytes, the row count, and the number of columns after loading a CSV file from a GitHub gist. The visualization uses React’s `useState` and `useEffect` hooks to fetch the data asynchronously via D3’s `csv` function, then formats the results with `d3.csvFormat`. The React component renders either a loading message or the computed statistics, demonstrating integration between D3’s data-loading utilities and React’s state management.

Aug 12, 2021

Loading thumbnail…

Fork of Mouse Follower

A circle inside an SVG viewport follows the mouse cursor in real time, updating its position on every mouse movement. Built with React Hooks (`useState` and `useCallback`), the `onMouseMove` event handler captures `clientX` and `clientY` coordinates and stores them in state, re-rendering the `<circle>` element’s `cx` and `cy` attributes. The chart uses React and ReactDOM for rendering, with a plain SVG circle as the visual element.

Aug 12, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example loads a CSV file containing CSS named colors from a remote URL and displays summary statistics about the data: its size in kilobytes, row count, and column count. It uses the D3 v5 library’s `d3.csv` method to fetch and parse the data asynchronously via promises, then accesses the parsed array’s `columns` property to report the number of columns. The visualization is minimal—a large text display—but it demonstrates the core workflow of loading and parsing tabular data with D3’s CSV utilities.

Aug 12, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a classic smiley face using React and D3, combining SVG circles for the face and eyes with a D3-generated arc path for the mouth. The visualization is static, with the face centered in a 960×500 viewport, and uses hardcoded constants for dimensions and positioning. It demonstrates how to integrate D3’s `arc` generator within a React component, specifically applying a custom start and end angle to create the mouth’s open curve. The code relies on React 16.9 and D3 v5, drawing purely with SVG elements and no external data source.

Aug 12, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a smiley face drawn as a single SVG circle with two eyes, rendered to fill the entire browser window. The face is positioned at the center of the viewport using a translate transformation. React components create the SVG elements, with circle elements defining the yellow face, black stroke, and eyes. The code uses React and ReactDOM to render the visualization, setting dimensions and offsets as constants based on window.innerWidth and window.innerHeight.

Aug 12, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a yellow smiley face that fills the entire browser window. Using React and ReactDOM, the application defines SVG circles for the face, eyes, and an implied mouth, with dimensions calculated from the window’s inner width and height. The face is centered via a transform, and its radius is set relative to half the window height, ensuring the graphic scales to any viewport. The code references React 16.9.0 and draws the smiley using SVG’s circle elements.

Aug 12, 2021

Loading thumbnail…

hah Fork of Let's Make a Face Part I

A yellow smiley face appears on a black-outlined circle. Two smaller black circles form the eyes, positioned symmetrically on either side of the face's vertical center. The code constructs the SVG directly with three `<circle>` elements, using absolute pixel coordinates for the face radius, stroke width, and eye placement. No interactive behavior or additional facial features are present in this static rendering.

Aug 12, 2021