Skip to main content
Log in
A

Anton Koukharski

@antonok·4 public vizzes

Loading thumbnail…

Let's make a face with D3.js!

A face made of SVG shapes is drawn and animated with D3.js v5, using a yellow circle for the head, green eyes, and black eyebrows. The code uses `d3.select` and `d3.arc` to construct the mouth, while chained `transition().duration()` calls animate the eyebrows upward and the mouth into a wider smile over two seconds. The static SVG canvas is 960 by 500 pixels, with all elements positioned relative to the center via a translated `<g>` group.

Aug 5, 2019
Loading thumbnail…

Customizing Axes

This example demonstrates how to customize axes in a bar chart showing population data for ten countries. The visualization uses d3.v5 with SVG rendering to draw the chart, pulling data from a CSV file. It utilizes D3's axis functions to create and style the axes, showing how to modify tick marks, labels, and positioning. The chart displays population values in thousands for countries from China to Mexico.

Aug 5, 2019
Loading thumbnail…

Customizing Axes

This bar chart shows the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization demonstrates customized D3 axes, including tick labels formatted with `d3.format`, a removed domain line, and an added axis label. It uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to render the axes in SVG.

Aug 1, 2019
Loading thumbnail…

Let's make a face with D3.js!

A face made of SVG shapes is drawn and animated with D3.js v5, using a yellow circle for the head, green eyes, and black eyebrows. The code uses `d3.select` and `d3.arc` to construct the mouth, while chained `transition().duration()` calls animate the eyebrows upward and the mouth into a wider smile over two seconds. The static SVG canvas is 960 by 500 pixels, with all elements positioned relative to the center via a translated `<g>` group.

Aug 1, 2019