Skip to main content
Log in
K

kiyimba5

@kiyimba1·4 public vizzes

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of country populations, with each bar’s length proportional to the population value. The chart uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, rendering SVG rectangles whose `width` and `y` attributes are set from the data. Population values from the CSV file are multiplied by 1000 to reflect actual counts, and the data is loaded asynchronously via `d3.csv`.

Mar 5, 2021
Loading thumbnail…

Making A bar chart

A smiling face rendered as a yellow circle with black stroke, black eyes, and a curved mouth. The SVG is built with React components and uses D3’s `arc()` generator to create the mouth path. The face is centered via a transform, with all dimensions defined as variables for reuse. The scene is static and portrait-like, demonstrating component composition in React with D3 for custom shapes.

Mar 5, 2021
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation in D3.js. The SVG-based visualization builds the face using `d3.select` and `d3.arc` for the mouth, while circles and rectangles form the eyes and eyebrows. The eyebrows move up and down via chained `transition.attr` calls over four seconds, shifting the group’s transform. Rendering is static except for this looping eyebrow animation, with all elements positioned around a centered translation of the SVG viewport.

Feb 28, 2021
Loading thumbnail…

Fork of Let's make a face with D3.js!

This fork of “Let’s make a face with D3.js!” draws a smiley face as static SVG shapes: a yellow circle, two black eyes, and an arc-based mouth. D3 selections and the `arc()` generator position the facial features relative to the SVG’s width and height. The code imports `select` and `arc` from d3.v5, sets attributes like `cx`, `cy`, and `r` manually, and leaves eyebrow paths incomplete, showing only the face’s base construction without animation or interaction.

Feb 28, 2021