David Beales

@LibraryBeales·10 public vizzes

New Face

This example shows a simple, stylized face composed of geometric shapes, including a yellow circular background, two black eyes, and a curved mouth. The face is constructed using React components for each part, which are assembled within a React application. The rendering is handled through SVG elements, and the mouth’s curve is generated using the D3.js `arc` function from the d3 library, with its radius and width defined as properties. The code uses React and D3, with the face centered and scaled based on specified dimensions.

Mar 31, 2023

Loading thumbnail…

Recfactored Bar Chart

This example presents a basic horizontal bar chart of the top ten countries by 2020 population, using data from a UN population CSV. The chart shows bars scaled linearly against their population values, with axis ticks and country labels. Built with React and SVG, it leverages D3 utilities like `scaleBand`, `scaleLinear`, `max`, and `ticks` to compute scales and tick marks. The code demonstrates a clean separation between data loading via `csv` and declarative UI rendering through React components.

Mar 27, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a bar chart of population by country for 2015, with tooltips displaying the population values. The visualization is built using the Vega-Lite API, which programmatically defines a markBar encoding with a categorical x-axis sorted by value and a quantitative y-axis. Data is loaded asynchronously via d3.csv from a Gist-hosted CSV file, and the chart is rendered as SVG through the Vega runtime. The code customizes axis and label styling via a config object and fits the chart to the browser window dimensions.

Mar 27, 2023

Loading thumbnail…

Data into d3

This example demonstrates how to load external CSV data into a React application using D3 utilities and display summary statistics. It uses the `d3.csv` method to fetch a dataset containing CSS color information from a GitHub gist, with React's `useState` and `useEffect` hooks managing the asynchronous data loading. Once loaded, the application calculates the data size in kilobytes, row count, and column count using `d3.csvFormat` and the dataset's properties, rendering the results as plain text. The visualization highlights the integration of D3's data-handling capabilities with React's state management for dynamic content updates.

Mar 27, 2023

Loading thumbnail…

Interaction with React

This example demonstrates how to integrate React with a data loading workflow using the Fetch API. It fetches a CSV file containing CSS color data from a GitHub gist URL and parses the response as text, logging the raw contents to the console. The code includes an asynchronous `fetchText` function that uses `await` and `response.text()` to handle the request. A commented-out alternative shows a promise-based approach with nested `.then()` calls. No visualization is rendered; the focus is on preparing the data pipeline and understanding asynchronous JavaScript patterns in a React context.

Mar 27, 2023

Loading thumbnail…

smiley face nojs

This example renders a grid of procedurally generated smiley faces using React components and D3’s `arc` generator for the mouths. Each face is built from SVG circles for the eyes and background, with randomized stroke widths, eye positions, and mouth dimensions via `Math.random`. The `FaceContainer` translates a central group, while `index.js` maps over `range(18)` to produce multiple variations, showcasing reusable component composition without external data.

Mar 27, 2023

Loading thumbnail…

Margin Convention Bar Chart

A margin convention bar chart displays the top ten countries by 2020 population, with horizontal bars ordered by country name. The visualization uses React to manage state and render SVG elements, while D3 v5 utilities handle data loading and scales: `csv` fetches the UN population dataset, and `scaleBand` and `scaleLinear` map country names and population values to pixel positions. Axis ticks are generated via `xScale.ticks()`, with the chart area offset by explicit margins for the left-aligned labels.

Mar 27, 2023

Loading thumbnail…

BarCharts

This bar chart displays the top 10 countries by projected 2020 population. The visualization loads a CSV dataset from a GitHub URL using D3’s `csv` utility, then maps each country to a horizontal rectangle via React’s `rect` elements. D3’s `scaleBand` and `scaleLinear` functions position and size the bars, while `max` computes the domain for the value axis. The SVG rendering is handled through ReactDOM, with the chart updating after the asynchronous data fetch completes.

Mar 27, 2023

Loading thumbnail…

Loading and parsing CSV

This example demonstrates the basic process of loading and parsing a CSV file with D3, displaying the file size, row count, and column count of the dataset. It fetches a CSV of CSS color names from a GitHub gist using `d3.csv`, then formats the response with `d3.csvFormat` to calculate its size in kilobytes. The code also includes commented alternatives using the Fetch API with async/await and `d3.csvParse` for manual text parsing.

Mar 27, 2023

Loading thumbnail…

Mouse Follower

A single circle follows the mouse cursor across an SVG canvas, responding to every pointer movement. Built with React 16.9, the app tracks the cursor’s clientX and clientY coordinates via an onMouseMove event handler, storing them in state with useState and updating the circle’s cx and cy attributes accordingly. The useCallback hook optimizes the event handler, while ReactDOM renders the interactive SVG element.

Mar 27, 2023