junxiangyao

@junxiangyao·7 public vizzes

Pathetic Bar Chart

This example renders the top 10 most populous countries as a bar chart with no axes, scales, or labels, making the bars appear "pathetic" and uninformative. The visualization loads population data from the United Nations World Population Prospects 2019 CSV, and uses React with hooks (`useState`, `useEffect`) to manage state. D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions calculate bar widths and vertical positions, while each bar is an SVG `<rect>` element rendered inside a `<svg>` container.

Dec 19, 2020

Loading thumbnail…

Vega-Lite API Playground

This example visualizes the relationship between horsepower and acceleration for cars, with tooltips revealing the vehicle name. Built using the Vega-Lite API, it abstracts away the typical D3 code by composing a scatterplot through function calls like `vl.markPoint()` and `vl.x().fieldQ()` for quantitative scales. The visualization loads CSV data from a GitHub gist via D3’s `csv` loader, and renders to SVG inside the browser. Configuration customizes axis fonts and colors, while the Vega-Lite library compiles the specification into Vega, which handles the rendering.

Nov 1, 2020

Loading thumbnail…

Loading data with D3 & React (useEffect)

This example demonstrates how to load and summarize a CSV dataset using React's `useEffect` hook in combination with D3's `csv` parsing function. It fetches CSS named colors data from a GitHub gist and displays key statistics including file size in kilobytes, row count, and column count. The visualization highlights the interplay between React's state management and D3's data processing capabilities, showing how `useEffect` with an empty dependency array triggers the data fetch only once during component mounting. The output is rendered as a formatted text summary within a `<pre>` element.

Oct 31, 2020

Loading thumbnail…

Follow Mouse

A circle follows the mouse cursor within an SVG canvas as the user moves over it. The example uses React state (`useState`) to track cursor position and a `useCallback` handler with `onMouseMove`. Position is derived from the `clientX` and `clientY` event properties. The visualization renders with SVG, using d3.v5 for the drawing context and React 17 for component logic.

Oct 30, 2020

Loading thumbnail…

Parsing with D3

This example shows a web page that displays metadata about a CSV file of CSS named colors, fetched from a GitHub gist. It uses d3.csv to load and parse the data asynchronously, then reports the data’s size in kilobytes, the number of rows, and the number of columns by calling `d3.csvFormat` and accessing `data.columns`. The page also demonstrates a parallel `fetch` request to log the raw text, and the final message is rendered using React into the document body.

Oct 28, 2020

Loading thumbnail…

Data Fetcher (Asnyc/Await Promise.Then)

This example demonstrates two techniques for fetching remote data in JavaScript and logging the results to the console. The page uses the Fetch API to retrieve a CSV file of CSS named colors from a GitHub gist, with the data returned as raw text. The code contrasts the use of `async`/`await` syntax within an `async function` against the older `Promise` chaining approach via `.then()` methods. Both methods successfully retrieve the same resource, while a plain `console.log` statement prints a separate message to show the order of execution. The example is implemented as a minimal HTML page inside a React project scaffold.

Oct 28, 2020

Loading thumbnail…

Let's Make a Face

A grid of identical yellow smiley faces repeats across the screen, each composed of SVG circles and an arc path. Built with React components, the `Face` assembly uses `d3.arc()` from D3 v5 to generate the mouth, while React's fragment syntax renders the eyes. The `range()` function from D3 produces 18 instances, and the `FaceContainer` handles SVG translation for positioning. The faces share fixed dimensions and offsets, creating a uniform pattern with no variation between copies.

Oct 28, 2020