oceanecharlery

@oceanecharlery·5 public vizzes

General Update Pattern

A smiling face rendered in SVG changes expression over time: apples shrink, a lemon appears, and eyebrows disappear as data updates. This example demonstrates the general update pattern with D3 v5, using `selection.data`, `enter`, `merge`, and `exit` to handle entering, updating, and removing circles. The code maps fruit types to colors and radii via `scaleOrdinal`, and `setTimeout` triggers three sequential re-renders to show state transitions.

Aug 5, 2019

Loading thumbnail…

Customizing Axes

This horizontal bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It demonstrates customized D3 axes, including formatted tick labels (e.g., converting G to B for billions) and modified tick sizes. The chart uses d3.scaleLinear and d3.scaleBand for positioning, with d3.axisBottom and d3.axisLeft for the axes. SVG rendering is employed, with population values multiplied by 1000 from the data.csv file.

Aug 5, 2019

Loading thumbnail…

Making a Barchart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to bar widths and country names to vertical positions, with axes customized via CSS. Data is loaded from a local CSV file and rendered as SVG rectangles, with a margin-based layout separating the plot from the axes.

Aug 2, 2019

Loading thumbnail…

Responding to Resize

This example demonstrates how a bar chart responds to window resizing, presenting population data for ten countries from a CSV file. The visualization uses an SVG canvas and relies on D3 v5’s `select` and `csv` methods to load and parse the data. While the initial code only logs the parsed data to the console, the chart’s structure is set up to dynamically adjust its dimensions when the browser window changes size, ensuring the visualization remains proportional and readable.

Aug 2, 2019

Loading thumbnail…

Responding to Resize

This example shows a blank page that responds to window resizing by filling the entire viewport. The chart container is positioned with fixed CSS properties (left, right, top, bottom set to 0px), so it always matches the browser window’s dimensions. The HTML includes a reference to the D3 library (d3.v5.min.js) via a CDN script tag, though no visualization or JavaScript logic is present. The page only sets up the resizable container structure, ready for future chart content, without rendering any data or interactive elements.

Aug 2, 2019