Akshada Pradhan

@akshprad·4 public vizzes

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js, with circles for eyes and a mouth created via the d3.arc path generator. The face’s eyebrows, rendered as rectangles, animate upward and back down over four seconds using chained transition calls. The code builds the entire face through direct DOM selection and manipulation with d3.select and d3.append, positioning elements via SVG transform attributes.

May 16, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries based on 2018 United Nations estimates, with each country positioned along a point scale and circles sized uniformly. It uses D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render the axes, while `d3.csv` loads the data and `d3.format` customizes tick labels. The chart is drawn as an SVG, with grid lines extended from the axes and a title and axis label styled via CSS.

May 15, 2020

Loading thumbnail…

Customizing Axes

This bar chart shows the top 10 most populous countries from the 2018 United Nations population estimates. It demonstrates customized D3 axes, with a bottom axis formatted using `format('.3s')` to abbreviate large population numbers, and a left axis stripped of its line and domain. The chart uses `scaleLinear` for population and `scaleBand` for country names, with tick lines spanning the full inner height. The data comes from a CSV file loaded via `csv('data.csv')`, and the chart is rendered as SVG.

May 15, 2020

Loading thumbnail…

Let's make a face with D3.js

A smiling face made of SVG shapes is drawn with D3.js, using circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows animate vertically via chained `transition().duration()` calls, shifting down and back up over two seconds each. The code imports `select` and `arc` from d3, manipulates SVG attributes directly, and positions elements relative to a centered group. Rendering uses an SVG canvas with a yellow circle and black strokes.

May 13, 2020