Eric Weiss

15.00 Refactor Bar Chart

This example refactors a horizontal bar chart that displays the ten most populous countries in 2020 based on UN population data, with country names on the y-axis and population on the x-axis. Built with React and D3 v6, it separates axes and marks into reusable components. The code uses d3.scaleBand and d3.scaleLinear to map data to SVG coordinates, while the AxisBottom, AxisLeft, and Marks components render gridlines, tick labels, and rectangle bars. The data is loaded asynchronously via d3.csv and parsed using a row accessor.

14.00 Axes with React $ D3

This example displays a horizontal bar chart of the top 10 countries by population in 2020, using data from a UN Population CSV file. The chart is rendered as SVG via React components, with D3 scales (`d3.scaleBand` and `d3.scaleLinear`) computing positions and sizes. Axes are drawn manually using D3’s `ticks()` for the x-axis and iterating over the scale’s domain for y-axis labels. Grid lines and text elements are styled inline, while React’s `useState` and `useEffect` handle asynchronous data loading.

13.00 Margin Convention

This visualization displays a horizontal bar chart of the top ten countries by population for 2020, using data from the UN Population 2019 CSV file. The chart employs the D3 margin convention to position bars within an SVG canvas, with a band scale for countries and a linear scale for population values. React useState and useEffect load and process the data via d3.csv, while ReactDOM renders the SVG elements, with each bar encoded as a rect positioned by the scales.

12.00 Making A Bar Chart with React & D3

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, rendered as SVG rectangles. The visualization uses React for component state and rendering, while D3’s `d3.csv` loads and parses the UN population dataset, and `d3.scaleBand` and `d3.scaleLinear` map country names and population values to pixel coordinates. Data is filtered to the first ten rows, and the bars are drawn inside a `<svg>` element via React’s JSX mapping.

11.00 Visualizing Data with React & D3

An interactive donut chart displays the proportional distribution of CSS named colors, with each arc segment filled using its corresponding RGB hex value. The visualization loads color data from a remote CSV file containing named colors and their hexadecimal representations. Built with React and D3.js, the code uses `d3.pie()` to compute arc segments and `d3.arc()` to generate SVG path data, rendering the result as a single `<svg>` element centered on the canvas.

10.0 Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatterplot of automobile data from a CSV file, visualizing acceleration, horsepower, weight, and origin. Circle marks are sized by weight, colored by origin, and include tooltips displaying car names via the fieldN encoding. The visualization leverages the vega, vega-lite, and vega-lite-api libraries, with a vega-tooltip handler for hover interactions. The plot fits the window dimensions and uses custom axis and label styling for improved readability.

Apr 7, 2021

9.00 Load CSV Data into React

A React component loads a CSV file of named CSS colors from a remote GitHub gist using `d3.csv`, displaying the number of rows and columns in the dataset. The example demonstrates asynchronous data fetching with React's `useState` and `useEffect` hooks, initializing the state as `null` and updating it once the promise resolves. While loading, it renders the text "Loading", then switches to a message showing the dataset dimensions. The code uses D3 v6, React 17, and ReactDOM to render the output in the DOM.

Apr 7, 2021

7.00 Load & Parse CSV

This example demonstrates how to load and parse a CSV file using D3 v6, displaying the row and column counts of the dataset as large text on the page. It fetches a CSV of CSS named colors from a GitHub gist via the `d3.csv()` method, which returns a promise. The resulting parsed data array is used to extract `data.length` for rows and `data.columns.length` for columns, which are then written to the document body. A commented-out alternative using JavaScript’s native `fetch` with `d3.csvParse` is also included for comparison.

8.00 Mouse Follower

A single dark circle moves within an SVG viewport in direct response to the mouse cursor. The example demonstrates a simple React state update mechanism: the `onMouseMove` event on the `<svg>` element captures cursor coordinates, which are stored in `mousePosition` via `React.useState` and applied to the circle’s `cx` and `cy` attributes. The initial position is centered at (480, 250), and the circle’s radius is set to 10% of the viewport height. Crafted with React 17 and ReactDOM, it renders a pure SVG without external data or animation libraries.

6.00 Lets Make a Face Part 6 (Compartmentalizing Complexity)

A smiling face is drawn as a yellow circle with eyes and an arc-shaped mouth, rendered as SVG. The face is composed of React components that compartmentalize the design into separate `Face`, `FaceCircle`, `Eyes`, and `Mouth` parts, with `Smily` assembling them. The code uses React 17 and D3 6 APIs, including D3’s `arc()` to generate the mouth path. The face is centered in a 960 by 500 viewport, with dimensions and offsets passed as props.

5.00 Lets Make a Face Part 5 (Multiple Files)

This example renders a simple yellow face with two eyes and a smiling mouth as SVG elements in a React application. The face and eyes are drawn using plain SVG `<circle>` elements, while the mouth is generated with D3’s `arc()` generator, which produces a path with specified inner and outer radii and angular ranges. The components are split across multiple files—`FaceCircle.js`, `Eyes.js`, and `Mouth.js`—and imported into a central `index.js` that sets the viewport dimensions and positions the face in the center. React 17 manages the component hierarchy, and D3 v6 supplies the arc geometry.

4.00 Lets Make a Face Part 4 (React + JS)

A yellow SVG face with a black outline, two black eyes, and a red, clipped smile is drawn on a gray background using React components and D3's `arc` generator. The face, eyes, and clipping path are defined as JSX elements within a React functional component, while D3's `arc` function computes the mouth shape. The rendering uses SVG elements like `circle`, `clipPath`, and `rect`, with D3 v6 and React 17 loaded from CDN.

3.00 Lets Make a Face Part 3 (React + D3)

This example renders a stylized cartoon face using React and D3’s `arc` generator, with SVG shapes for the head, eyes, and a clipped mouth. The yellow circle forms the face, while green and blue circles serve as eyes, and a red circle is partially hidden by a `clipPath` rectangle to create a curved mouth. All geometry is positioned relative to a centered group, with fixed pixel dimensions for the canvas. The code demonstrates mixing React’s declarative JSX with D3’s path-generation utilities for static, vector-based visuals.

Apr 1, 2021

2.00 Lets Make a Face Part 2 (React)

A yellow circle with a black outline forms a face, defined by two smaller black circles for eyes positioned within a 960 by 500 pixel SVG canvas. The React application renders the SVG directly, using hardcoded width, height, and stroke variables to set the face’s size and outline thickness, while the eye positions derive from proportional fractions of the canvas dimensions.

Apr 1, 2021