Rafael O'Duarte

@RafaeloDuarte·6 public vizzes

Let's make a face with D3.js!

This example demonstrates how to construct a smiley face using basic D3.js SVG elements, with static eyebrows positioned above two circular eyes and a small rectangular mouth. The code imports `select` and `arc` from D3 v5, creates an SVG group centered via a `translate` transform, and appends a yellow circle with a black stroke as the face. The rendering approach relies on manual coordinate attributes (`cx`, `r`, `x`) rather than data binding, showing fundamental DOM manipulation with `d3.select` and `selection.append`.

Aug 18, 2020

Loading thumbnail…

World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, with each node labeled by name. The tree uses a left-to-right layout, with font size decreasing at deeper levels. Built with D3 v5, it applies the `tree` layout and `hierarchy` functions to the JSON data, rendering horizontal links via `linkHorizontal` and enabling pan and zoom through D3's `zoom` behavior.

May 16, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository Auto MPG dataset. The visualization uses D3.js v5 with SVG rendering, employing d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for grid lines and tick labels, and d3.csv to load the data. Red semi-transparent circles represent individual car models, with axis labels and a title displayed using SVG text elements styled through external CSS.

May 12, 2020

Loading thumbnail…

Circle Chart

This circle chart displays the populations of the 10 most populous countries from 2018 World Population Prospects estimates, with each country represented by a black circle whose x-position and radius correspond to its population. The SVG rendering uses d3.scaleLinear and d3.scaleBand to map population values and country names, with d3.axisBottom and d3.axisLeft providing labeled axes. The code loads data from a CSV file via d3.csv, converts population values from thousands, and appends circles using d3.select and d3.append, with a formatted tick label function replacing G with B for billions.

May 8, 2020

Loading thumbnail…

Bar Chart

This bar chart displays the population of the ten most populous countries based on 2018 estimates from the World Population Prospects 2017. The visualization uses d3.scaleLinear and d3.scaleBand to map population values to bar widths and country names to vertical bands, with d3.axisBottom and d3.axisLeft for the axes. Data is loaded from a CSV file using d3.csv, and the population values are multiplied by 1000 to reflect actual figures. The chart renders as SVG, with a title annotation and formatted tick labels using d3.format.

May 7, 2020

Loading thumbnail…

A Face With D3.js

A cheerful cartoon face is drawn using D3.js v5 in an SVG, with animated eyebrows that bounce up and down in a looping transition. The face consists of a yellow circle, two eyes, rectangular eyebrows, and a smile path generated with the `d3.arc` function. The code uses `d3.select` to manipulate SVG elements and `transition()` to animate the eyebrow group's vertical position over two seconds. Rendering is done entirely with SVG shapes, and the example is structured as a React project with a static HTML page loading D3 from a CDN.

May 6, 2020