Gonçalo

@goncaloferreira92·3 public vizzes

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3 with special cases for enter, update, and exit selections. A bowl of fruit animates through a sequence of state changes: five apples appear, one is eaten, an apple becomes a lemon, and another apple is removed. The visualization uses d3.scaleOrdinal for color and radius mapping, with SVG circles and text elements bound to data arrays. Each update triggers a re-render of the fruit bowl, showing how D3 handles data joins with key functions and merges selections.

Jul 24, 2020

Loading thumbnail…

Cars Scatterplot

This scatterplot displays the relationship between horsepower and weight for various car models, with each point representing a single vehicle. The visualization uses D3 v5's `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to map the data onto an SVG canvas, with circles styled via CSS. Axes include tick marks and labels for both variables, and the title appears above the plot. The data is loaded from a remote CSV file using `d3.csv`.

Jul 22, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects dataset. Built with D3 v5, the visualization demonstrates customized axis styling, including tick mark removal, custom bar chart formatting, and a gridline pattern. The chart uses d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, with population values scaled and formatted using d3.format to display numbers in billions. The SVG rendering applies custom CSS for font sizes and colors, and includes axis labels and a title.

Jul 22, 2020