bellotukurm

@bellotukurm·4 public vizzes

Customizing Axes

This bar chart displays the 2018 population estimates for the ten most populous countries, using data from the United Nations World Population Prospects. The visualization highlights how D3 axes can be customized: it employs `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population scale, with `d3.axisLeft` and `d3.axisBottom` creating the axes. Styling via CSS customizes tick text, lines, and labels, while D3’s `select`, `csv`, and `max` functions load and process the data from a CSV file.

Sep 19, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face built with SVG appears on screen, with a red cap that slides back and forth. The face’s eyebrows move up and down in a looping animation. Built using D3.js v5, the code demonstrates fundamental DOM manipulation through selections, appending circles, rectangles, and paths, and uses the `arc` generator for the mouth. Transitions with `transition().duration()` animate the cap and eyebrows by changing their `transform` attributes.

Sep 15, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape drawing alongside HTML and CSS styling. It renders a static collection of circles and rectangles inside an SVG container, with one circle colored green and a group of shapes translated downward and filled blue. The page also displays a fruit list with a highlighted banana item using CSS. The code imports D3’s `select` function and an ES6 module exporting a greeting message, though the message div is not present in the HTML. Rendering relies on native SVG elements with attributes like `cx`, `ry`, and `transform`.

Sep 15, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG circles, a path, and rectangles, then animated with D3 transitions that move its eyebrows and cap. The code uses D3’s `select`, `arc`, and `transition` methods to build and animate the face, which includes eyes, a curved mouth, and a red hat. The eyebrows shift up and down, and the cap slides side to side, demonstrating basic DOM manipulation and tweening with d3.v5.

Sep 15, 2019