Renato Magalhães

@renatonankran·3 public vizzes

treemap

This example shows a treemap visualization of population data, with three vertical columns of stacked rectangles representing different data groupings. The chart uses React to render SVG rectangles, with D3’s `scaleBand` and `scaleLinear` computing x and y positions and heights. Data comes from the United Nations World Population Prospects 2019. Mouse interactions highlight individual rectangles by adding a pink stroke via DOM event listeners. The visualization also includes a manually placed gray rectangle spanning multiple columns.

Sep 26, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example builds a grid of black rectangles that, along with a white label, begins to form a simple face. The SVG is 960 by 500 pixels, with the primary shapes translated from the origin. The visualization is a direct code fork that demonstrates basic shape construction and placement, using inline SVG elements such as `rect` and `text` within a `<g>` group. It does not employ any external JavaScript libraries or data-driven interactions, relying instead on static markup to show the early stage of a facial layout.

Sep 26, 2022

Loading thumbnail…

Fork of Axes with React & D3

This example displays the top 10 most populous countries as a bar chart with x and y axes, using React for component rendering and D3’s `scaleBand`, `scaleLinear`, and `ticks` for scaling and axis generation. The bars are SVG `<rect>` elements, positioned via the scales, with axis lines and labels constructed manually from tick values. Data comes from the United Nations World Population Prospects 2019 CSV, loaded asynchronously with `d3.csv` and filtered to the first ten rows. The chart uses a left margin for country names and a linear scale for population counts.

Sep 3, 2022