GarrisonC

@GarrisonC·2 public vizzes

Making a Bar Chart

This example shows a horizontal bar chart of the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. The SVG renderer uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for ticks, with custom tick formatting that converts G to B for billions. The chart also removes default axis domains, adds a title and axis label, and applies a steelblue fill to all bars.

Apr 26, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiling face from basic SVG shapes using D3.js v5. It shows a yellow circle as the head, two black circles for eyes, and a mouth created as a path. The code uses D3’s `select` to target the SVG element and the `arc` generator to define the mouth’s curved shape. Eye positions are set with explicit spacing offsets, while the mouth is transformed into place with a group translation. Rendering is entirely SVG-based, with styling applied via an external CSS file.

Apr 26, 2020