Paul B

@paubel·14 public vizzes

Episode 1: SVG Fundamentals

This example presents a minimal HTML page that introduces SVG fundamentals, with an empty inline `<style>` block and an `<svg>` element placed directly in the body. It demonstrates the basic structure for embedding SVG in a web document, using plain HTML and CSS without any JavaScript libraries. The page serves as a starting point for learning how to create and style vector graphics, referencing the React Starter as a companion resource. The code shows no interactive behavior or data binding, focusing solely on the static scaffolding required for SVG rendering.

Oct 24, 2022

Loading thumbnail…

Rendering CSS Population Data with React & D3

This example visualizes population data for the top ten countries in 2020 as a bar chart rendered in SVG, using React to manage component state and D3 utilities for data loading and scaling. The code fetches a CSV file via D3’s `csv` function, parses the population column, and applies `scaleBand` for the y-axis and `scaleLinear` for the x-axis. React’s `useState` and `useEffect` hooks handle asynchronous data loading, while the bars are drawn as SVG `<rect>` elements with dimensions derived from the D3 scales.

Sep 5, 2021

Loading thumbnail…

Bar Chart Data with React & D3

This example uses React and D3 to load United Nations population data from a CSV file and render it as a radial bar chart. The code fetches data with `d3.csv`, then uses `d3.pie` and `d3.arc` to compute and draw each segment as an SVG path, with the fill color taken from the dataset's CSS hex values. A loading state displays "Loading..." until the asynchronous data fetch completes, and the resulting visualization fills a 960x500 SVG canvas.

Sep 5, 2021

Loading thumbnail…

Fork of Rendering CSS Colors Data with React & D3

This visualization displays the full set of named CSS colors as a circular pie chart, with each slice filled by its corresponding color. The data loads from a CSV file via `d3.csv`, and React manages the component state with `useState` and `useEffect`. The chart is rendered using React elements for SVG paths, while `d3.pie` computes the arc angles and `d3.arc` generates the path geometries.

Sep 2, 2021

Loading thumbnail…

Rendering CSS Colors Data with React & D3

This example visualizes all named CSS colors as a vertical stack of thin horizontal bars, each colored according to its corresponding RGB hex value. It loads color data from a CSV file using D3’s `csv` utility, stores the fetched array in React state via the `useState` and `useEffect` hooks, and renders each row as a styled `div`. While the data loads, a large "Loading..." message appears. The visualization highlights the sequential ordering of the color list and demonstrates a simple React–D3 data-fetching integration without any charting library.

Aug 30, 2021

Loading thumbnail…

Loading Data with React & D3

This example shows how to load a CSS named colors dataset asynchronously using D3’s `csv` utility, then store the result in React state to display a summary. It uses React’s `useEffect` and `useState` hooks to trigger and manage the data fetch, while the `message` module computes stats like file size, row count, and column count from the parsed data. The visualization renders a simple text summary in a `<pre>` tag, demonstrating the integration of D3 data-loading with React’s component lifecycle.

Aug 30, 2021

Loading thumbnail…

Vega-Lite API Template TESTFork

A bubble chart shows the population of various religious groups across countries, with circle size encoding population and position mapping country and religion. Built with the Vega-Lite API, the visualization loads CSV data from a gist URL and renders as a scalable SVG that fits the browser window. The example demonstrates the `vl.markCircle` method with encoded fields for country, religion, and population, styled through a custom config that adjusts axis and label appearance. It integrates Vega-Lite, Vega, and D3’s CSV loader for data ingestion.

Aug 28, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v7, displaying the dataset’s file size, row count, and column count in a large text pre element. The code fetches a CSV file of CSS named colors from a GitHub gist via `d3.csv`, then formats the parsed data with `d3.csvFormat` to calculate its kilobyte size. It also reports `data.length` for rows and `data.columns.length` for columns, providing a concise summary of the loaded dataset’s structure.

Aug 22, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across a full-screen SVG canvas, updating its position in real time as the pointer moves. The React app uses the `useState` hook to store the current mouse coordinates and the `useCallback` hook to define a `handleMouseMove` event handler, which reads `clientX` and `clientY` from the synthetic event. The circle, with a fixed radius of 30 pixels, is rendered via SVG’s `<circle>` element, whose `cx` and `cy` attributes are bound to the state, and the window’s dimensions determine the viewport size.

Aug 18, 2021

Loading thumbnail…

Smiley Face Part 1

This example draws the upper half of a smiley face using React to render SVG elements. It displays a yellow circle for the face, two black eyes, and a mouth arc created with the D3 `arc()` generator. The code uses D3 v7 for the arc path and React 17 for component structure, with all positions calculated relative to the SVG center.

Aug 18, 2021

Loading thumbnail…

Fork of Smiley Face VI

This example renders a grid of 18 smiley faces, each generated with randomized eye radius, mouth width, and mouth radius. The faces are composed of modular React components, including a yellow background circle, eyes, and a mouth drawn using `d3.arc`. The `FaceContainer` component creates an SVG with a centered `<g>` group, and `index.js` uses `range` from D3 to produce the array of faces. The visualization demonstrates composable SVG rendering with React and D3 shape generators.

Aug 15, 2021

Loading thumbnail…

Smiley Face V

This example shows a simple smiley face composed of a yellow circular background, two black eyes, and a half-circle mouth, all rendered as SVG elements through a React component. The face is centered within a 960 by 500 viewport using a group transform. The code constructs the face from three modular React components: `BackgroundCircle`, `Eyes`, and `Mouth`. The mouth shape is generated using the `d3.arc` API, which defines a path with specified inner and outer radii and angular span.

Aug 15, 2021

Loading thumbnail…

Smiley Face IV

A simple smiley face rendered as an SVG, composed of a yellow circle for the head, two black circles for eyes, and a mouth drawn as an arc. The face is built using React components with JSX, while the mouth uses the `arc()` generator from D3 v7 to compute the path. The layout is centered and positioned via SVG transforms, with dimensions and offsets defined as constants.

Aug 15, 2021

Loading thumbnail…

Smiley Face Assignment

This example renders a cartoon smiley face using React and D3 version 7, with SVG elements for the head, ears, eyes, mouth, nose, and a vertical line. The face is drawn with circles, an ellipse, a line, and a path generated by the `arc` function from D3, which creates the curved mouth by specifying inner and outer radii along with start and end angles. All shapes are centered within an SVG canvas of 960 by 500 pixels, with positions calculated relative to the center coordinates and fixed offsets for the eyes and ears. The code uses React’s `StrictMode` and `ReactDOM.render` to mount the component, and styling is applied through SVG attributes like `fill` and `stroke-width`.

Aug 15, 2021