Sven

@BrassoMan·9 public vizzes

d3 experimental zone

The d3 experimental zone demonstrates how to begin working with D3 version 7, rendering a sequence of numbers from the array `[1,2,3,4,5,6]` directly into the page body. The example uses the `d3.select` API to target the body element and a chained `.Jenter` method to iterate over the data, with a `.text` callback displaying each value. The page is styled with a massive 13em font size, making the numeric output the focal point. This minimal setup illustrates the core selection and data-binding workflow in D3 while serving as a sandbox for experimentation.

Aug 31, 2023

Loading thumbnail…

Making Bar Chart

This example visualizes the top 10 most populous countries as a basic bar chart with no axes or labels, using population data from the United Nations World Population Prospects 2019. It loads CSV data with `d3.csv` and renders SVG rectangles with React, where each bar’s width is scaled by `d3.scaleLinear` and its vertical position uses `d3.scaleBand`. The chart updates after a brief “Loading...” state, driven by React hooks like `useState` and `useEffect`.

Aug 7, 2021

Loading thumbnail…

Rendering Data with React and D3

This example shows a full-screen SVG pie chart of all CSS named colors, with each slice colored by its corresponding hex value from a CSV dataset. React manages the asynchronous data loading with `useState` and `useEffect`, while D3’s `csv`, `pie`, and `arc` functions calculate the slice angles and path geometry. The chart centers on a 960×500 viewport, rendering each pie segment as a React `<path>` element whose fill is set directly from the data’s RGB hex field.

Jul 27, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes Bitcoin trading activity using a line chart that plots both trading volume and opening price over time. The visualization is built with the Vega-Lite API, which constructs a specification rendered through Vega and Vega-Lite libraries, with the final output displayed as an SVG. Data is loaded asynchronously from a CSV file using d3.csv, and the chart dynamically sizes to fit the browser window. Custom axis styling and tooltips, powered by vega-tooltip, enhance readability of the time-series data.

Jul 25, 2021

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates loading remote CSV data and displaying parsing statistics. It fetches a CSV file of CSS named colors, then shows the file size in kilobytes, the number of rows, and the number of columns in large text. The code uses `d3.csv` to load and parse the data, `d3.csvFormat` to measure the raw string length, and updates the DOM via `textContent`. The data source is a GitHub gist containing the named colors dataset.

Jul 24, 2021

Loading thumbnail…

Interaction with React

A React component renders an SVG circle that follows the mouse cursor across a 960 by 500 viewport. The `App` component uses the `useState` and `useCallback` hooks to track and update the mouse position, binding an `onMouseMove` event handler to the SVG element. This example demonstrates integrating React's state management with D3 v5 and SVG rendering, showing how direct event handling replaces D3's typical selection and data-join pattern.

Jul 23, 2021

Loading thumbnail…

Fork of Smiley Face Part V

A grid of smiling faces fills the screen, each with randomized eye size, eye spacing, and mouth radius. The visualization demonstrates modular React component composition, splitting the face into separate `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer` files using ES6 modules. It renders SVG via React and uses D3’s `arc` generator for the mouth path. Each face applies slight random variation to its features, creating a playful, varied array.

Jul 21, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A React-based smiley face is rendered as an SVG, composed of a yellow circle, two eyes, and a curved mouth. The face is centered on a 960 by 500 canvas, with each part built as a separate React component. The mouth uses D3's `arc` generator to create a half-circle path, while the background and eyes are simple SVG circles with explicit stroke and fill properties.

Jul 20, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face composed of SVG shapes, including a circular head, two eyes, two angled eyebrows, and an arc-based mouth, all centered within a fixed viewport. The visualization is built with React, using both `react-dom` and `d3`’s `arc` function to generate the mouth’s path geometry. Rendering occurs entirely as SVG elements, with coordinates and dimensions defined as constants within the JavaScript code, and the face is drawn using straightforward geometric primitives rather than external data.

Jul 20, 2021