JadeJOy

Try 500,000 data

This visualization presents a scatter plot of 500,000 data points from the UCI Auto MPG dataset, encoding miles per gallon, horsepower, origin, and weight. Using the vega-lite-api, it renders circles with size mapped to weight and color to origin. The code configures axes without domains for a cleaner look, fits the chart to the window, and includes tooltips via vega-tooltip. The visualization demonstrates how vega-lite-api can plot high-density datasets with interactive hover details.

Apr 3, 2021

Axes with React & D3

This example renders a bar chart of the top 10 most populous countries from United Nations World Population Prospects 2019 data, displayed using React-managed SVG elements. D3 v5 provides the scales: `scaleBand` for countries on the y-axis and `scaleLinear` for population on the x-axis, with manually drawn axis ticks and labels computed via `xScale.ticks()`. React hooks `useState` and `useEffect` handle asynchronous CSV loading and data updates. The chart lacks axis lines or gridlines, showing only tick marks and country names.

The Margin Convention

This example demonstrates the importance of chart margins by rendering the top 10 most populous countries as a pathetic bar chart with no axes. The bars are drawn directly against the SVG edges, making the lack of scales and labels immediately apparent. The code uses React hooks to load data from the United Nations World Population Prospects 2019 via `d3.csv`, then maps that data with `d3.scaleBand` and `d3.scaleLinear` to position rectangles. A `<g>` transform applies the margin offsets, while `d3.max` computes the domain for the x-axis scale.

Fork of Pathetic Bar Chart

This example renders a deliberately minimal bar chart of the top 100 countries by population, drawn as plain SVG rectangles without any axes or labels. The chart uses React’s `useState` and `useEffect` hooks to load and store data fetched via `d3.csv` from the United Nations World Population Prospects 2019 dataset, selecting only the first 100 entries. Scales are built with `scaleBand` for country categories on the y-axis and `scaleLinear` for population values on the x-axis, mapping each bar’s width to that population. The visual results in a sparse, unadorned layout that emphasizes raw magnitude over context.

Fork of Rendering Data with React & D3

This visualization displays the complete set of CSS named colors as a radial burst, with each color represented as a single slice of a pie chart. The code loads color data from a CSV file using `d3.csv`, then employs React's `useState` and `useEffect` for asynchronous data fetching and rendering. Each wedge is drawn as an SVG `path` using `d3.arc()` with an inner radius of zero, while `d3.pie()` computes the angular segments. The interface shows a “Loading…” message until the data arrives, after which the full color spectrum appears centered on an SVG canvas.

Loading Data with React and D3

This example demonstrates loading a CSV file in a React application using D3’s `csv` retrieval function. It fetches a dataset of CSS named colors from a GitHub gist, then displays the file’s size in kilobytes, row count, and column count as plain text. The React app uses the `useState` and `useEffect` hooks to manage the asynchronous data loading, and the `message.js` module formats the summary metrics.

Fork of Loading and Parsing CSV Data

This example loads a CSV file containing CSS named colors and displays a summary of the dataset, including its size in kilobytes, row count, and column count. The data is fetched from a GitHub-hosted CSV file using the `d3.csv` function, which parses the remote data and returns a promise. The parsed data’s `columns` property provides the column count, while `d3.csvFormat` calculates the text length. The visual output is a large, simple text message rendered in an HTML `pre` element, with the React framework noted in the metadata despite the code using plain JavaScript with d3.v5.

Mouse Follower

A circle follows the mouse cursor across a full-screen SVG canvas. The React component tracks pointer coordinates from the `onMouseMove` event and updates the circle's `cx` and `cy` attributes through `useState` and `useCallback`. The visualization uses React 16.9 with ReactDOM to render the SVG in production mode, positioning the circle at the exact client X and Y coordinates of the mouse.

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data, displaying the dataset’s size in kilobytes, row count, and column count. The code fetches a remote CSV file of CSS named colors and parses it with d3.csvParse. It highlights multiple approaches, including the active fetch-based async/await method, plus commented-out alternatives using d3.csv and a nested Promise chain. The final result renders the statistics inside a pre element.

Let's Make a Face Part VI (Compartmentalizing Complexity)

Repeated smiley faces arranged in a grid demonstrate how modular React components compartmentalize a complex SVG visualization. Each face is rendered 18 times using `range` from d3, with a yellow circle, two eyes, and a mouth drawn via d3's `arc` generator. The `FaceContainer` component wraps the SVG and applies a translate transform, while `BackgroundCircle`, `Eyes`, and `Mouth` are separate exported functions accepting props like `eyeOffsetX` and `mouthRadius`. The code showcases reusable, parameterized components for scalable and maintainable data-driven graphics.

Let's Make a Face Part V multiple files with ES6 modules

This example shows a smiley face built from individual SVG shapes, including a yellow background circle, two black eyes, and a mouth drawn as an arc. The face is constructed using React components with ES6 module imports, and the rendering uses an SVG coordinate system. The mouth’s arc is generated using the D3.js `arc()` API, which computes the path based on a specified inner radius, outer radius, and angle range. The face’s features are positioned relative to a central point, and the components are composited within a single SVG element.

Let's Make a Face Part IV (React Components & ES6)

A yellow smiley face is drawn as an SVG, with a filled circle for the head, two small circles for the eyes, and an arc for the mouth. The face is built using React components, with the background circle and mouth path defined as separate reusable elements. The mouth is generated using the D3 `arc` function, while the SVG is rendered by ReactDOM. All values are computed from constants for width, height, and offsets, reflecting a component-based approach to structuring the visualization.

Let's Make a Face Part III (React & D3)

This example shows a yellow smiley face drawn with SVG shapes, including a circular head, two eyes, and a mouth arc. The code combines React for component structure and D3’s `arc` generator to create the mouth path. The face is centered using a `g` transform, with fixed pixel dimensions for the SVG canvas, eye offsets, and stroke width. The project uses React 16.9, ReactDOM 17.0.2, and D3 v6, rendering the final graphic to the DOM.

Smiley Face Part I

A yellow smiley face rendered as SVG, centered on a 960 by 500 canvas, uses D3’s `arc` generator to draw a thick mouth outline. React manages the component structure, while D3 v6 provides the arc path. Circles form the eyes and face, with the face stroke and mouth width defined by constants.