1godfrey

Fork of USA Country Map

This interactive map of the United States displays state-level drug overdose mortality rates for 2020, with each state colored red and highlighted in blue on hover. Using React and D3 v5, the visualization projects geographic boundaries with `geoAlbersUsaTerritories` and renders them through `d3.geoPath` as SVG paths. State mortality data from a CSV file is merged with TopoJSON land and interior mesh data, while CSS tooltips reveal state names and mortality values when hovered.

Mar 20, 2023

Refactored Bar Chart

This example displays a horizontal bar chart showing the 2020 population for ten countries listed in a UN dataset. The chart loads CSV data using the d3 `csv` utility and renders React SVG components for the plot. D3's `scaleBand` and `scaleLinear` are used for the y- and x-axes, respectively, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the tick marks, labels, and rectangular bars. The visualization is drawn with SVG inside a React application, with the chart area offset by margins defined in the container.

Mar 6, 2023

Axes with React and D3

This example renders a horizontal bar chart of United Nations population data for 2020 using React and D3.js. The chart displays the top ten countries by population, with a linear scale for the x-axis and a band scale for the y-axis. React manages the SVG rendering and state, while D3 utilities (`d3.csv`, `d3.scaleBand`, `d3.scaleLinear`) handle data loading and scaling. Axis ticks and labels are generated via D3’s scale methods, and the bars are drawn as SVG `rect` elements.

Mar 6, 2023

Pathetic Bar Chart

This example displays a horizontal bar chart of the top ten countries by 2020 population, loading data from a CSV via `d3.csv`. React manages the component state and renders SVG `<rect>` elements, while D3’s `scaleBand` and `scaleLinear` map country names and population values to screen coordinates. The chart updates once the asynchronous data fetch completes, with a "Loading..." fallback displayed until then.

Fork of Load Data with React

This example displays all CSS named colors as a vertical stack of horizontal color swatches. It loads the data from a remote CSV file using the `d3.csv` utility. The application then maps each data row to a React `<div>` element, setting its background color to the `RGB hex value` field and rendering it as a 4-pixel-high strip. The visualization uses React with hooks like `useState` and `useEffect` to manage the asynchronous data loading and rendering, and it displays a loading message before the data arrives.

Load Data with React & D3

This example demonstrates how to load and display summary statistics for a dataset of CSS named colors. The React component uses `useState` and `useEffect` to asynchronously fetch the CSV data with D3’s `csv` utility. While loading, it displays “Loading…”, then renders the file size in kilobytes, row count, and column count in large text via the `message` utility. The visualization relies on React state management and D3’s `csvFormat` to calculate the data’s byte length.

Fork of Vega-Lite API Template

This example visualizes the religious composition of countries using a bubble chart, where each bubble represents the population of a religion within a country. The visualization is built with the Vega-Lite API and rendered using D3.js, with data sourced from a CSV file containing religion-by-country statistics. The chart maps country names to the x-axis, religions to the y-axis, and population to bubble size, while tooltips display the exact population values on hover. The code leverages Vega-Lite's declarative API to encode these fields, and the chart resizes to fit the browser window using the autosize feature.

Loading and Parsing CSV Data

This example demonstrates loading a remote CSV file of CSS named colors and displaying basic file statistics. A large preformatted text element shows the file size in kilobytes, the number of rows, and the number of columns. The code uses the d3.csv method from D3 v7 to fetch and parse the data asynchronously, then accesses the parsed array and its columns property. The data comes from a GitHub gist URL, and the results are written to the page via textContent.

Mouse Follower

A colored circle follows the cursor across an SVG canvas, updating its position in real time. The visualization demonstrates React's state management and event handling, using the `useState` and `useCallback` hooks to track mouse coordinates. The `App` component renders an SVG with a `<circle>` element, and the `handleMouseMove` callback updates the circle's `cx` and `cy` attributes via `clientX` and `clientY` events. ReactDOM renders the component into the DOM, with the circle initially centered at 960 by 500 pixels.

Fork of Smiley Face Part II

A React application renders a single SVG circle that follows the mouse cursor as it moves across a 960×500 viewport. The circle’s position updates via React’s `useState` and `useCallback` hooks, which track the cursor’s `clientX` and `clientY` coordinates from the SVG’s `onMouseMove` event. The example demonstrates interactive rendering with React 16.9 and SVG, using a simple state-driven approach to update the circle’s `cx` and `cy` attributes in real time.

Mar 4, 2023

Smiley Face Part 1

A grid of randomly generated smiley faces is rendered, each face composed of a yellow background circle, black-stroked outline, two eyes, and a curved mouth. The faces vary in stroke width, eye offset, eye radius, and mouth dimensions, creating a playful array of distinct expressions. The React components structure the SVG elements, while the D3 arc generator (`d3.arc`) defines the mouth’s path. The code uses `ReactDOM.render` to display the faces, with each face’s properties computed from `Math.random()` within the `array.map` loop from `d3.range`.

Hello HTML

This example shows a minimal starter page for the web, with an empty document body and a title. It uses plain HTML with the `<!DOCTYPE html>` declaration, and the structure includes a `head` section with a `title` element. The code does not include any CSS or JavaScript, so it is purely a static HTML skeleton. It serves as a foundation for building more complex visualizations with external libraries or frameworks.

Hello HTML

Fork of React + D3 Viz Starter

This example shows a blank React + D3 starter template with a gray SVG background and a light inner rectangle that visualizes the margin convention. A `VizContainer` component abstracts the SVG group element and uses a `transform` attribute to translate content by the specified margins. The template includes `showMargins` prop to toggle the guide rectangles, and relies on React 16.13.1 and D3 v6.2.0 loaded via CDN, with dimensions defined in the main `index.js` file.