Jing-MS

@Jing-MS·7 public vizzes

Rendering Data with React and D3

This example renders a data visualization of CSS named colors using a pie chart. The React component loads the dataset via D3's `csv` parser, then uses D3's `pie` layout and `arc` path generator to create the chart's sectors. Each slice is filled with the corresponding color from the data's `RGB hex value` field. The chart is drawn as an SVG element, with React managing the component's state and rendering the final output.

Mar 22, 2021

Loading thumbnail…

Visualizing Data with React and D3

A React app uses D3's `csv` loader to fetch a named CSS color dataset, displaying each color as a thin horizontal strip whose background matches its RGB hex value. The `useState` and `useEffect` hooks manage asynchronous data loading, showing a "Loading..." placeholder until the CSV arrives. The visualization renders as plain SVG-styled divs, relying on D3 v6 and React 16.9, with no interactive or animated behavior.

Mar 22, 2021

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load and summarize a CSV dataset asynchronously using React alongside D3. The app fetches CSS named colors from a GitHub gist with D3’s `csv` function, then uses React hooks (`useState`, `useEffect`) to manage the loading state and update the view. Before displaying the data, it computes the file size in kilobytes, row count, and column count using `d3.csvFormat`. While loading, a simple text message appears; afterward, the summary is rendered in a `<pre>` element.

Mar 18, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data using D3.js v6, displaying the dataset’s size in kilobytes, row count, and column count. It fetches a remote CSV file of CSS named colors via `d3.csv`, then converts it back to text with `d3.csvFormat` to measure its encoded length. The code also includes commented alternatives using the Fetch API, `async/await`, and `d3.csvParse`. The result appears in a large `<pre>` element styled with oversized font, showing only the summary statistics.

Mar 18, 2021

Loading thumbnail…

Mouse Tracker

A full-screen SVG tracks the mouse and draws a single black circle at the cursor's current position. The circle follows pointer movement in real time, rendered with React's `useState` and `useCallback` hooks to update its `cx` and `cy` coordinates on every `mousemove` event. The SVG uses `window.innerWidth` and `window.innerHeight` for its dimensions, and the example demonstrates declarative state-driven rendering with React 16.9 and ReactDOM.

Mar 18, 2021

Loading thumbnail…

Hello HTML

A grid of eighteen identical smiley faces, each rendered as a yellow circle with black outline, two eyes, and a curved mouth, is displayed. The example demonstrates how to build a reusable React component hierarchy using JSX and SVG. It uses ReactDOM to render the faces, with D3's `arc` generator defining the mouth shape and `range` from D3 producing the grid.

Mar 18, 2021

Loading thumbnail…

HTML Starter

A bare-bones HTML page illustrates the minimal structure required for a web-based visualization, containing only the standard document type, head, and empty body tags. The example shows how to set up a blank canvas for future content using the fundamental HTML specification, with no CSS or JavaScript included in this starter file. This provides a basic foundation for adding visual elements and interactivity in subsequent steps.

Mar 17, 2021