Rodolfo Dutra

@deer-rodolfo·3 public vizzes

Bar chart

This bar chart displays the populations of the ten most populous countries in 2017, ordered by country name along the y-axis and scaled by population count along the x-axis. Built with React and D3 v5, the visualization uses `scaleLinear` and `scaleBand` to map data, `axisLeft` and `axisBottom` for ticks, and SVG `rect` elements for bars. The data is loaded from a CSV file and multiplied by 1000 to reflect actual population figures.

Jan 8, 2020

Loading thumbnail…

Face

This visualization displays a stylized, cartoon-like face composed of basic geometric shapes: a yellow circle for the head, circles for the eyes, rectangles for the eyebrows, and an arc for the mouth. The face is centered within an SVG canvas. The code uses D3.js v5’s selection and arc functions, and leverages the library’s built-in transition system to animate the eyebrows and mouth, creating a subtle, looping facial expression change.

Jan 8, 2020

Loading thumbnail…

Tutorial

This tutorial demonstrates how to use React with asynchronous data to render a text-based report. It shows a loading message, then fetches a list of cars from a hardcoded JSON array via a Promise-based `getCars` function, and displays a filtered list of cars under a price threshold. The code uses `getCars()` to simulate a delay, `generateReport` with `filter` and `map` to format results, and React’s `element.textContent` to update the DOM. The example relies on React 16.10 UMD builds and vanilla JavaScript, with no charting or visualization library.

Jan 8, 2020