Ismael Nóbrega

@ismaelnobrega·5 public vizzes

Casos de AIDS por Estado

A scatterplot displays AIDS case counts per Brazilian state, comparing 1990 values on the x-axis against 2009 values on the y-axis, with each circle colored on a gray-to-blue gradient indexed by data order. The visualization uses d3.csv to load the dataset, d3.scaleLinear for axes and color mapping, and d3.axisBottom/axisLeft to render scales. State abbreviations are overlaid as red text labels, while circles are appended as SVG elements within a React-agnostic HTML page using D3 v5.

May 1, 2020

Loading thumbnail…

Formas com SVG e CSS

This example shows a simple composition of geometric shapes created with SVG and styled using CSS. It draws a filled circle and a rectangle inside an SVG canvas, with the shapes positioned using a transform translation and given a light blue fill and black stroke. The code uses basic SVG elements like `circle` and `rect` within a `<g>` group, and the page styling comes from embedded CSS. The dataset, stored as JSON in `carros.js`, references car performance attributes but is not directly visualized in the rendered output.

Apr 29, 2020

Loading thumbnail…

Customizing Axes

A bar chart ranks the top ten most populous countries using data from a CSV file, with population values formatted in abbreviated units. The chart uses D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendered as SVG rectangles. Axes are customized with `axisLeft` and `axisBottom`, removing default domain lines and extending tick lines across the plot. Tick labels apply a custom formatter via `format`, while the chart’s title and axis label are added as SVG text elements.

Apr 27, 2020

Loading thumbnail…

Learn d3.js

This example shows a minimal introduction to D3.js data binding using an array of five numbers. A static SVG container is set up in the HTML, while the JavaScript selects the body, binds the dataset to paragraph elements, and appends them with the corresponding text values. The visualization demonstrates the core `data()`, `enter()`, and `append()` pattern from D3 v4, alongside the use of `select()` and `text()`. It does not include interactivity or dynamic updates, serving purely as a basic learning exercise.

Apr 27, 2020

Loading thumbnail…

Learn d3.js

This example demonstrates the fundamental data-binding pattern in D3.js by binding an array of six numbers to paragraph elements and displaying each value as text. The code uses `d3.select` to target the body, then chains `selectAll('p')`, `.data()`, `.enter()`, and `.append('p')` to create one paragraph per data point. The `.text()` method with a function returns each datum, rendering the numbers 1 through 6 on the page. It relies on D3 v4’s core selection and data-join APIs within a minimal HTML setup that loads the library from a CDN.

Apr 27, 2020