yanaltingliu

@yanaltingliu·5 public vizzes

Loading Data with React & D3

This example demonstrates how to load a CSV file into a React application using D3 utilities, displaying a summary of the dataset as plain text. The app uses React’s `useState` and `useEffect` hooks to fetch and store the data asynchronously via `d3.csv`. Once loaded, a custom `message` function formats the data size in kilobytes, row count, and column count using `d3.csvFormat`. During the fetch, a simple "Loading..." label is shown. The visualization is minimal, focusing on the integration between React state management and D3’s data-loading API.

Nov 3, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a remote CSV file using D3 v7. It fetches the CSS-named-colors dataset from a GitHub gist, then displays the file size in kilobytes, the number of rows, and the number of columns in a large text element. The code uses `d3.csv` for direct loading and parsing, with an alternative commented-out approach using `fetch`, `async`/`await`, and `d3.csvParse` to show manual text handling. The output is rendered as plain text inside a `<pre>` element.

Nov 3, 2021

Loading thumbnail…

Mouse Follower

A mouse follower renders a single black circle on an SVG canvas that tracks the pointer’s position in real time. It visually demonstrates interactive coordinate tracking, updating the circle’s center to match the cursor’s clientX and clientY location. The React component uses the useState hook to store the mouse position and a useCallback handler on the SVG’s onMouseMove event to update state on every movement. Rendered via ReactDOM, the SVG circle’s cx and cy attributes are set from this state, with d3.v5 loaded for potential utility but not directly used in this logic.

Nov 3, 2021

Loading thumbnail…

Smiling Face

A smiling yellow face is rendered front-and-center within a fixed SVG viewport of 960 by 500 pixels. The face is constructed from separate React components for the background circle, eyes, and mouth, all composed inside a shared `<g>` container. The mouth shape is generated using the D3 `arc` generator with specified inner and outer radii. The visualization uses React 17 for component rendering and D3 v7 for the arc path, with all positions and sizes driven by props passed from the top-level App component.

Nov 3, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of “Let’s Make a Face” demonstrates building a smiley face from a set of scattered nodes that gradually arrange into a recognizable shape. The visualization uses d3.forceSimulation to position the nodes into a circular face outline, with the final layout revealing eyes and a smile. The project is based on v3 of D3.js, rendering directly into an HTML page without an external data source. The embedded YouTube video provides a walkthrough of the code, while the live example shows the force-directed animation in action.

Nov 1, 2021