CL

@camille-le·4 public vizzes

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map populations and country names to the SVG canvas, with axes drawn via `axisLeft` and `axisBottom`. The chart’s bars are rendered as SVG rectangles, styled with CSS. Population values are loaded from a local CSV file and multiplied by 1,000 before rendering.

Jan 25, 2022

Loading thumbnail…

Fork of Smiley Face Part I

The visualization shows a partial construction of a smiley face, centered within an SVG canvas. A large red circle forms the head, with two concentric white circles representing the eye, all outlined in black. The code uses React and ReactDOM to render the SVG elements, while D3 is loaded but not directly utilized in the drawing logic. The rendering approach is declarative, with hardcoded dimensions and coordinates for the shapes, leaving the face incomplete at this stage.

Jan 25, 2022

Loading thumbnail…

Testing

This example shows a partial smiley face: a single thick arc forming the bottom half of a mouth, centered on an otherwise blank SVG canvas. The arc is drawn using `d3.arc()` with `innerRadius` and `outerRadius` set from `mouthRadius` and `mouthWidth`, and its angles span from −0.5π to 0.5π. The visualization is built with React 17 and D3 v7, rendering the shape via an SVG `path` element inside a translated group. No eyes or other facial features are present.

Jan 25, 2022

Loading thumbnail…

Smiley Face Part I

This example renders a yellow smiley face using React and D3’s `arc` generator. The face consists of a large yellow circle with a black stroke, two black eye circles, and a mouth drawn as an arc path via `d3.arc()` with specified inner and outer radii and start/end angles. The SVG output is 960×500 pixels, and all shapes are positioned relative to a centered translation. The code uses React 17, D3 v7, and SVG rendering with hardcoded dimensions.

Jan 25, 2022