Vadim Jouk

@vadimjouk·3 public vizzes

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It demonstrates customization of D3 axes, including abbreviated tick labels using `d3.format`, horizontal grid lines via `tickSize`, and removal of axis domains and tick lines. The chart uses `d3.scaleLinear` and `d3.scaleBand` for positioning, with SVG rendering and custom labels for the title and x-axis.

Sep 17, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiley face from basic SVG shapes. A yellow circle forms the head, with separate groups for eyes, eyebrows, and a rectangular nose. Using `d3.select` and `append`, the code builds each element, then animates the eyebrows and nose vertically with `transition().duration(2000)`. The mouth is drawn using the `arc()` generator from the `d3-shape` module. The result is a playful illustration of D3’s data-join-free approach to direct SVG element creation and chained transitions.

Sep 17, 2019

Loading thumbnail…

Face examplle with D3.js

This example renders a simple blue circle on a light blue background using D3.js v5 and SVG. The code selects the SVG element, sets its background color, and appends a circle with a fixed radius of 200 pixels. It demonstrates basic D3 selection, style, and shape creation through the `select` and `append` APIs.

Sep 14, 2019