zhangwbhi

Coronavirus Basic Line Chart With 10,000 Marker Line

This line chart displays the global cumulative death toll from COVID-19 over time, using data from the Johns Hopkins Coronavirus Dataset. A horizontal marker line at 10,000 deaths highlights the threshold, with a labeled “10,000” text at the left edge. The visualization is built with React and D3 v5, using `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to generate the SVG path and axes. The marker line is drawn as a separate SVG `<line>` element, with the y-coordinate computed via the linear scale.

Sep 11, 2021

Summarizing Coronavirus Data

This example summarizes the global death toll from the Johns Hopkins Coronavirus Dataset. It shows a single large red number, displaying the total confirmed deaths and the date of the latest data column. Using d3.csv to load the data, it calculates the sum by mapping over the last column and reducing the values. The result is formatted with d3.format and displayed in a pre element.

Sep 10, 2021

Loading and Parsing Coronavirus Data

This example displays basic statistics about the Johns Hopkins Coronavirus Dataset, showing the file size in kilobytes, row count, and column count in large text. It loads the CSV data with `d3.csv` and its promise-based `.then` method, then uses `d3.csvFormat` to calculate the data size. React is used as the framework, though the visualization itself is a simple text output via the DOM. The code also includes commented alternatives using `fetch` with `async`/`await` and `d3.csvParse`.

Sep 10, 2021

Rendering Data with React & D3

A radial burst visualizes CSS named colors as equal-width slices of a pie chart, each filled with its corresponding hex value. The code loads color data from a CSV file using D3’s `csv` utility, then maps it to pie segments with `d3.pie()` and renders them as SVG `<path>` elements via React’s `arc()` generator. React state and hooks (`useState`, `useEffect`) manage asynchronous data loading, while the chart centers on an SVG canvas sized 960 by 500. The example demonstrates combining D3’s data utilities with React’s declarative component rendering.

Sep 7, 2021

Loading Data with React & D3

This example shows how React state and D3 utilities work together to load and summarize a remote CSV dataset. The app fetches CSS named colors data from a GitHub gist URL using D3’s `csv` method, then stores the parsed result in React’s `useState` hook via `useEffect`. While loading, it displays “Loading…”, and once the data arrives, it renders a text summary computed by a custom `message` function that uses `d3.csvFormat` to report the dataset size in kilobytes, row count, and column count. The visualization relies on React 16.9 and D3 v5.

Sep 6, 2021

Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file of CSS named colors by displaying its file size, row count, and column count. The visualization uses the d3.csv function to asynchronously fetch the data from a GitHub gist, then d3.csvFormat to compute the file size. The code also includes commented alternatives using fetch, async/await, and d3.csvParse, illustrating different methods for handling CSV data in D3 v5.

Sep 6, 2021

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real-time in response to mouse movement. The example demonstrates state management in React, using the `useState` hook to store mouse coordinates and the `useCallback` hook to handle the `onMouseMove` event. The circle is rendered as an SVG `<circle>` element within a React component, with the width and height set to 960 and 500 pixels. The visualization uses React's declarative rendering to update the circle's `cx` and `cy` attributes as the mouse moves.

Sep 6, 2021

Loading and parsing CSV data

This example demonstrates how to load and parse raw CSV data from a remote URL using the Fetch API. It fetches a plain-text file containing CSS named colors and logs the entire content to the browser console. The code uses the async/await pattern with `fetch` and `response.text()` to retrieve the data, though it does not yet parse the CSV into structured rows. A commented-out alternative shows the older promise-chain approach. The page itself renders only the static text “Hello HTML” with oversized styling.

Sep 5, 2021

Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for cars from the UCI Machine Learning Repository’s Auto MPG dataset. It uses the Vega-Lite API to compose a scatter plot with colored points by origin, sized by weight, and includes tooltips showing car names. The code registers the API with Vega and Vega-Lite, then fetches CSV data via D3’s `csv` method, applying a custom dark theme for readability. The view renders to SVG and fits the window dimensions.

Loading data with React & D3

This example demonstrates how to load and display CSV data in a React application using D3 utilities. The app fetches a dataset of CSS named colors from a GitHub gist, calculates summary statistics including file size in kilobytes, column count, and row count, then renders these values as text. React state management tracks the loading status and data, displaying a "Loading..." message until the asynchronous data fetch completes. The implementation uses React hooks (useState, useEffect) alongside d3.csv to parse the remote CSV file, with the final output presented as formatted text in an HTML pre element.

Loading and parsing csv data

This example demonstrates the basic process of loading and parsing CSV data using D3 v7, displaying the file size, column count, and row count as large text on the page. It fetches a CSV file containing CSS named colors from a GitHub gist and parses it with `d3.csv`, then formats the data back into a string using `d3.csvFormat` to calculate the size in kilobytes. The results are rendered into a predefined `<pre>` element via the DOM API. The code includes commented-out alternatives using `fetch` and `d3.csvParse`, highlighting different approaches to handling CSV data.

Mouse Follower

A yellow circle follows the mouse cursor across a 960 by 500 SVG canvas. The sketch uses React's `useState` to track the pointer's `clientX` and `clientY` coordinates from the `onMouseMove` event, updating the circle's `cx` and `cy` attributes in real time. The example demonstrates a minimal interactive SVG render loop with React 17 and ReactDOM.

Fork of Fork of Fork of Fork of Fork of Let's Make a Face Part VI

A grid of small, yellow smiley faces, each with a randomly sized pair of eyes, is rendered in an SVG canvas. The faces are generated by mapping over an array of six multiplied by three, creating eighteen face instances. The visualization employs React components, including a `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth drawn using d3’s `arc` function. The code relies on both React and D3 v7, using the `range` function to produce the grid layout.

Aug 1, 2021

Fork of Fork of Fork of Fork of Let's Make a Face Part V

This example shows a yellow smiley face composed of a circular background, two eyes, and a mouth, rendered as SVG shapes. The face is drawn declaratively, using React components to wrap each visual element, and positioned at the center of the canvas. The code relies on React 17 and d3.v7 specifically the `d3.arc` API, applied through the `Mouth` component to generate the mouth path. The facial features are parameterized, with the background circle, eyes, and mouth each receiving explicit coordinates and dimensions as props, resulting in a static, programmatically constructed portrait.

Aug 1, 2021

Fork of Fork of Fork of Let's Make a Face Part IV

This example draws a yellow smiley face using React for component structure and D3’s `arc` generator to create a mouth shape. The face consists of a circle background, two eyes, and a filled arc representing a smile, all rendered as SVG elements. The code uses ReactDOM to mount the app and computes geometry from fixed dimensions, with stroke widths and offsets defined as constants. The D3 `arc()` API generates the mouth path with inner and outer radii and angular start and end positions.

Aug 1, 2021

Fork of Fork of Let's Make a Face Part III

A yellow smiley face is drawn in an SVG canvas using React, with two black eyes and a mouth. The face is centered on a 960x500 canvas, with the head as a yellow circle outlined in black, and the eyes positioned symmetrically. The mouth is created using the `arc` function from the d3 library to define a path, while ReactDOM renders the SVG elements. The code uses d3.v7 and React 17.0.2, with all shapes positioned via transform and absolute coordinates.

Fork of Smiley Face Part III-copy

This example shows a classic smiley face drawn with a yellow circle, two black eyes, and a wide mouth, centered within an SVG canvas. The face is built from primitive shapes, including circles for the head and eyes and a `d3.arc` path for the mouth, all positioned via SVG group transforms. The code uses React to render the SVG elements and the `arc` function from D3 v5 to generate the mouth’s curved outline. Static geometry is defined through numeric constants, making the face scalable and easy to modify.

Fork of Let's Make a Face Part II

A smiley face rendered with two black eyes and a yellow circular head on an SVG canvas, built using React components and ReactDOM. The code defines fixed dimensions, center coordinates, and offset constants for the eyes, then renders circles with these computed positions and radii. It uses React’s declarative syntax to create SVG elements, with the head stroked in black and filled yellow, while the eyes are solid black circles. No interactivity or data loading is present, just static geometric shapes.

Smiley Face Part 1

This example presents a static SVG rendering of a smiling face, featuring a large yellow circle with a black outline for the head and two smaller filled circles for the eyes. The visualization draws its shapes declaratively using SVG elements—specifically three `<circle>` tags—directly embedded in the HTML body. The first circle defines the face with explicit fill and stroke attributes, while the latter two circles position the eyes without additional styling. The code uses plain HTML and SVG markup, with no external libraries or JavaScript, and the page is set to hide overflow. The data source is the hardcoded coordinates within the SVG viewport.