paulboeck

@paulboeck·2 public vizzes

Let's make a bar chart

A bar chart displays population figures for ten countries, sorted from largest to smallest. The visualization uses D3 v5 with SVG rendering, loading data from a CSV file. The code employs `scaleLinear` for the x-axis, `scaleBand` for categorical y-axis placement, and `axisLeft`/`axisBottom` to draw tick marks. Population values are converted to numbers and multiplied by 1000. Rectangles are appended to a grouped `<g>` element, with widths scaled proportionally and fill color set via CSS to steelblue.

May 22, 2019

Loading thumbnail…

Let's make a face with CSS and D3

This example uses D3 v5 to draw a smiling face with SVG primitives: a yellow circle for the head, smaller circles for eyes, rectangles for eyebrows, and an arc path for the mouth. The code animates the eyebrows by using D3's `transition()` method to move the group element vertically over two seconds, then back. All shapes are positioned relative to the SVG's center using a translated group, and the mouth is created with D3's `arc()` function from the `d3` import.

May 20, 2019