Skip to main content
Log in
I

IAmOscar-Liu

@IAmOscar-Liu·5 public vizzes

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern with special cases: apples and lemons in a bowl are added, removed, or replaced over time, with D3 transitions handling enter, update, and exit selections. It uses d3.select and data joins to bind fruit objects to SVG groups, with scaleOrdinal for color and radius mapping. The code shows explicit handling of entering elements, merging updates, and removing exits, while also reusing existing circle and text elements within each group. The animation runs on a fixed timeline without user interaction.

Jul 1, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 United Nations estimates, with population values in thousands and country names along the y-axis. It shows how D3 axes can be customized in v5 by using `axisLeft` and `axisBottom` paired with `scaleLinear` and `scaleBand`. The example removes default axis domains and tick lines, formats population tick labels with `format('.3s')` to abbreviate billions, and adds custom title and axis-label text. Rendering is done through SVG, with styling applied via externally linked CSS.

Jul 1, 2020
Loading thumbnail…

Customizing Axes

This bar chart shows the top 10 most populous countries, using 2018 UN population estimates from the World Population Prospects. It demonstrates customizing D3 axes by removing domain lines, setting tick formats with `d3.format`, and adding axis labels. The code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, rendering in SVG. Tick lines extend across the chart, and population values are formatted in billions with a custom replacement of 'G' with 'B'.

Jul 1, 2020
Loading thumbnail…

Let's make a face with D3.js!

The example draws a yellow smiley face in an SVG canvas by composing basic shapes—circles for the eyes and a path for the mouth—via D3 selections and an `arc` generator. Eyebrows, rendered as rectangles, animate upward and downward using chained `transition().duration()` calls on a group’s `transform` attribute. This demonstrates fundamental DOM manipulation and data-driven styling with D3 v5, showing how to build and animate static graphical elements without external data.

Jun 30, 2020
Loading thumbnail…

Let's make a face with D3.js!

The example draws a yellow smiley face in an SVG canvas by composing basic shapes—circles for the eyes and a path for the mouth—via D3 selections and an `arc` generator. Eyebrows, rendered as rectangles, animate upward and downward using chained `transition().duration()` calls on a group’s `transform` attribute. This demonstrates fundamental DOM manipulation and data-driven styling with D3 v5, showing how to build and animate static graphical elements without external data.

Jun 30, 2020