Rodolfo Viana

@rodolfo-viana·8 public vizzes

01_covid19_flag_20210203

A horizontal bar chart displays the seven-day average of COVID-19 deaths per Brazilian state, sorted in descending order. The chart uses d3.scaleLinear for the x-axis, d3.scaleBand for the categorical y-axis, and renders SVG rectangles. Data comes from a local CSV file parsed with d3.csv, with axes styled using d3.axisLeft and d3.axisBottom.

Feb 6, 2021

Loading thumbnail…

Blank

This example displays a blank SVG canvas with a bold, centered placeholder text element rendered in a monospace font. The visualization uses D3.js version 6 to create a minimal static layout, with the SVG element sized at 960 by 500 pixels. The page imports the Roboto Mono font from Google Fonts and sets the body to hide overflow, creating a clean, distraction-free presentation. The code defines a single text element within the SVG, though its content appears to be intentionally left empty, leaving the canvas entirely blank.

Feb 5, 2021

Loading thumbnail…

Useful functions

This example demonstrates a reusable JavaScript function for joining two datasets, enabling efficient data combination in visualization workflows. It builds an index from a lookup table and then maps rows from a main table through that index, selecting only the desired columns. The code shows a raw implementation of a lookup-table join, similar to SQL-style joins, with a commented usage example that merges brand and article data. The example relies on plain JavaScript arrays and objects, with no external libraries, making it a lightweight utility for preprocessing data before visualization.

Jan 21, 2021

Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between horsepower and miles per gallon for various car models, sourced from the auto-mpg dataset. The D3 v6 code loads CSV data, maps horsepower to the x-axis and mpg to the y-axis using linear scales, and renders semi-transparent pink circles for each car. Axis tick marks extend across the plot, and both axes are labeled. The SVG output includes a title and uses Roboto Mono typography for all text elements.

Jan 4, 2021

Loading thumbnail…

Simple face with D3js

A yellow circle represents a simple face, with two black eyes and a mouth drawn using an arc path, all centered within an SVG canvas. The code uses D3.js v6 to select the SVG element and append shapes, including circles for the face and eyes and a path for the mouth. The arc generator from D3 creates the mouth shape, while the SVG attributes control positioning and styling, with a transform applied to center the entire group. The visualization is static, rendering directly in the browser via a bundled JavaScript file.

Jan 2, 2021

Loading thumbnail…

Simple scatter plot

A simple scatter plot displays the population of the ten most populous countries, with circles positioned along a linear x-axis for population values and a point scale y-axis for country names. The chart uses D3 v6's `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` APIs, rendering SVG circles with a red stroke and light fill. Axes include custom tick formatting via `format('.2s')` to abbreviate numbers in billions, and gridlines extend across the plot area. Data originates from a CSV file listing country populations in thousands.

Dec 31, 2020

Loading thumbnail…

Simple bar chart with custom axes

A simple bar chart displays the ten most populous countries using population data from a CSV file, with country names on the y-axis and population values on the x-axis. The chart uses custom axes that convert large numbers from the d3.format('.3s') format (such as G for billions) to B for billions, and removes the default axis domain lines. Built with d3.csv, scaleLinear, scaleBand, axisLeft, and axisBottom, the visualization renders red bars in an SVG element with a Roboto Mono font and a title in Portuguese.

Dec 29, 2020

Loading thumbnail…

Simple bar chart

A horizontal bar chart displays population figures for ten countries, with values divided by 1000 and sorted in descending order from China to Mexico. The visualization uses D3 v6 (d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom) to render SVG rectangles with a red fill. The chart includes a left categorical axis for country names and a bottom quantitative axis for population. Data comes from a local CSV file, loaded asynchronously and processed before rendering.

Dec 27, 2020