Christian Rohrer

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using horizontal bars, with population values on the x-axis and country names on the y-axis. The visualization uses React components to render SVG elements, with Axes and Marks built from d3.scaleBand and d3.scaleLinear. Data comes from the United Nations World Population Prospects 2019, loaded via d3.csv. The bars include tooltips showing exact population values, styled with the Ubuntu font and teal coloring.

Feb 2, 2023

Fork of Axes with React & D3

A React and D3 bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data, loaded via `d3.csv`. The visualization renders SVG rects scaled with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, with custom React components for axes and marks. The horizontal bars represent each country’s 2020 population, with the left-side country labels derived from the y-scale domain.

Feb 1, 2023

Fork of Refactored Bar Chart

This bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019, with each bar’s length representing the 2020 population figure. Although the chart lacks an x-axis scale, it renders labels for country names on the left and tick marks along the bottom using React components. The visualization uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the population values, and SVG rectangles to draw the bars. Data is loaded asynchronously via d3.csv and rendered within a React application built with functional components and hooks.

Feb 1, 2023

Fork of Vega-Lite API Template

This example visualizes automobile data by plotting car origins on the x-axis against horsepower on the y-axis, with the vehicle’s name available as a tooltip. Built using the vega-lite-api, it programs a scatter plot with semitransparent circular marks, configured to fit the entire viewport. The code loads an auto-mpg CSV dataset via D3’s `csv` method, registers Vega-Lite with a tooltip handler, and applies custom axis and label styling from a shared config module.

Jan 30, 2023

Fork of Loading Data with React & D3

This example demonstrates how to load and summarize CSS named color data using React and D3. The React component uses the `useState` and `useEffect` hooks to trigger a `d3.csv` call, which fetches a remote CSV file, and renders a loading message until the data arrives. Once loaded, the app displays the file size in kilobytes, row count, and column count by calling `d3.csvFormat` on the parsed data. The visualization relies on React’s state management and D3’s data loading utilities rather than any graphical rendering.

Fork of Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing CSV data from a remote URL, displaying the file size, row count, and column count of the dataset. The code uses either the `d3.csv` method or the `fetch` API combined with `d3.csvParse` and async/await syntax to handle the data retrieval. The data source is a gist containing CSS named colors, and the results render as text in a large-format `pre` element. The example also includes commented-out code showing a nested Promise "pyramid of doom" pattern for comparison.

Mouse Follower

A single red circle follows the cursor across the entire browser viewport. The circle is rendered as an SVG `<circle>` element, with its center coordinates updated on every mouse move event. Built with React (using `useState` and `useCallback`) and rendered with `ReactDOM.render`, the application listens for `onMouseMove` on a full-window SVG and sets the circle’s `cx` and `cy` properties to the event’s client coordinates. The viewport dimensions are taken from `window.innerWidth` and `window.innerHeight`.

Fork of Smiley Face Part II

A fork of the "Smiley Face Part II" block renders a simple, responsive smiley face using React and SVG. The face features a yellow circular head with black stroke, two black eyes, and no mouth, centered dynamically based on the window's inner dimensions. The code utilizes React 16.9.0 and ReactDOM to render SVG elements, with the face scaling proportionally to the available viewport height. The implementation computes geometry values like eye offsets and radius from the window size, using JSX with inline SVG tags.

Fork of Smiley Face Part V

A grid of 18 simple smiley faces is rendered, each with randomized stroke widths and identical facial feature positions. The React component tree is split across multiple ES6 modules, including separate `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer` components. The mouth is drawn using the `d3.arc` generator, while the faces are laid out using `d3.range` and rendered as SVG within React.

Fork of Smiley Face Part III

This example shows a smiley face composed of a yellow circle, two eyes, and an arc-shaped mouth, all rendered as SVG elements. The visualization is built with React components and uses D3’s `arc` API to generate the mouth path, while the background and eyes are plain SVG circles. Coordinates for the face features are computed from fixed offset values, and the entire group is translated to the center of a 960×500 viewport. The rendering approach is declarative, with React managing the SVG tree and D3 handling the path generation.

Fork of Smiley Face Part III

This example shows a smiley face built with React and rendered as an SVG, with a yellow circular head, two black eyes, and a thick mouth arc, all positioned relative to the center of a 960×500 viewport. React components define the SVG elements, while D3’s `arc()` function generates the mouth path using inner and outer radii and start/end angles. The code uses React 16.9 and D3 v5, with the face drawn declaratively through JSX props like `cx`, `cy`, and `r` for circles, and a `path` element for the mouth.

Fork of Smiley Face Part III

A React and D3.js visualization renders a smiling face as a single SVG composition. The face features a yellow circle with a black stroke, two eyes positioned with fixed offsets, and an arc-shaped mouth generated using D3’s `arc()` function with specified inner and outer radii and angular limits. The SVG elements are constructed declaratively via React components, with the `App` component building the overall graphic and a `BackgroundCircle` component for the face base. All geometry is computed using the `d3` library’s arc helper, while React manages the rendering and DOM integration.

Fork of Smiley Face Part II

This example renders a yellow smiley face that fills the entire browser window. The face is composed of SVG circles for the head and eyes, with a mouth drawn using a D3 arc path generator. Using React components, the visualization positions all elements relative to the viewport center, calculating the head radius from the window height. The code imports React and ReactDOM for rendering and the `arc` function from D3 v7 to define the mouth’s curved shape, with stroke widths and offsets parameterized for scalability.

Jan 25, 2023

Fork of Let's Make a Face Part I

This example shows a simple yellow circle with a black outline centered on a 960-by-500 SVG canvas, representing the first step toward building a smiley face. It uses React 18 to render the SVG element, with the circle’s dimensions and stroke styling defined directly in JSX. The code relies on ReactDOM.render to mount the component into the page’s root div, while commented-out code hints at future eye placement calculations.

Jan 23, 2023