albanodossantos

@albanodossantos·12 public vizzes

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes, whose eyebrows animate up and down in a looping motion. It demonstrates fundamental DOM manipulation using D3.js selections, appending a circle for the head, circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc()` helper for the mouth. The animation runs via chained `transition()` calls with `.duration(2000)` on the eyebrow group. The code imports `select` and `arc` from the `d3` module and uses `attr()` to set positions and styles.

Nov 28, 2019

Loading thumbnail…

Africa Countries interactions

This example displays a spherical projection of Africa using the Chamberlin Africa projection, with country boundaries rendered as SVG paths. Hovering over a country highlights it in orange, and users can pan and zoom the map via d3.zoom. The visualization uses d3.geoPath and topojson.feature to draw countries from World Atlas TopoJSON data, with country names loaded from a TSV file and shown as tooltips. The code imports d3-geo-projection for the projection and applies zoom transforms to a grouped SVG element.

Nov 28, 2019

Loading thumbnail…

Temperatura Transboundary River Basin!

This scatter plot displays temperature readings over time for a transboundary river basin, using red semi-transparent circles to reveal data density. It loads CSV data from VizHub, parsing timestamps and numeric temperatures before rendering with D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs. The SVG chart includes gridlines, labeled axes, and a title, with the data sourced from a 2015 Africa Union basin population estimate.

Oct 29, 2019

Loading thumbnail…

Temperatura Transboundary River Basin Area Chart!

This area chart visualizes the population of transboundary river basins in Africa using 2015 estimates from the African Union Basin Population dataset. The chart displays population over time with a smooth curve, using a maroon filled area beneath the line. It leverages d3.csv for data loading, d3.scaleTime and d3.scaleLinear for axes, and d3.area with curveBasis to generate the SVG path, with formatted tick labels for population values.

Oct 29, 2019

Loading thumbnail…

Temperatura Transboundary River Basin Line Chart!

This line chart displays temperature readings over time for a transboundary river basin, using a smooth curve to connect data points. The visualization employs D3 v5 with a time scale on the x-axis and a linear scale for temperature, rendering the path via the line generator with curveBasis. Axes include tick marks and labels, with the chart framed by margins within an SVG. The data originates from a CSV file of basin temperature records loaded from a VizHub dataset.

Oct 29, 2019

Loading thumbnail…

Temperatura Transboundary River Basin Area Chart!

This area chart displays daily temperature variations in a river basin, using a smooth curved line filled in maroon to emphasize the fluctuation pattern over time. The visualization loads CSV data from a VizHub dataset, parsing timestamps and numeric temperatures, then renders an SVG with D3 v5’s `scaleTime`, `scaleLinear`, and `area` generator with `curveBasis`. Axis labels and gridlines are styled via CSS, and the chart includes a title and clearly labeled time and temperature axes.

Oct 29, 2019

Loading thumbnail…

Customizing Axes a Bar Chart!

This bar chart displays the estimated 2015 total population of four transboundary river basins in Africa, sourced from an African Union dataset. The D3.js v5 code builds the visualization using `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` with a custom tick formatter that converts large numbers to billions. Grid lines extend across the chart via negative tick sizes, while the y-axis labels are simplified. The horizontal bars are rendered as SVG `rect` elements with a fixed blue fill.

Oct 29, 2019

Loading thumbnail…

Transboundary River Basin!

This scatter plot shows the relationship between horsepower and weight, using data from the auto-mpg dataset, despite the title referencing Transboundary River Basins. Each circle represents a car model, with its position determined by the d3.scaleLinear scales for the x and y axes. The visualization uses D3 v5 to render an SVG, employing d3.axisBottom and d3.axisLeft for the axes, and d3.csv to load the data. Axis labels and a title are added via D3's SVG text elements.

Oct 28, 2019

Loading thumbnail…

Scatter plot!

This scatter plot displays the estimated 2015 populations of four transboundary river basins in Africa, based on data from the Africa Union. The x-axis uses a linear scale for population values with tick labels formatted in billions, while the y-axis uses a point scale for basin names. Implemented with D3 v5, the visualization renders SVG circles, axes, and labels using `d3.scaleLinear`, `d3.scalePoint`, `d3.axisBottom`, and `d3.axisLeft`. Grid lines extend across the plot, and the data is loaded from a CSV file.

Oct 28, 2019

Loading thumbnail…

Shape With SVG and CSS

This example demonstrates basic SVG shape rendering with D3.js and CSS styling. The code draws circles, rectangles, lines, and paths on a dark blue background using D3’s `select` API and hardcoded coordinates. Shapes are grouped with SVG `<g>` elements, with CSS classes controlling stroke and fill properties. D3 v5 loads from a CDN, while the page displays a "Hello VizHub!" message via ES6 module imports. The visualization also includes transparent and colored shapes, with inline attributes like `stroke-width` and `fill` overriding stylesheet rules.

Oct 25, 2019

Loading thumbnail…

Making a Bar Chart!

This bar chart displays the estimated 2015 populations of four African transboundary basins: Cuvelai, Limpopo, Okavango, and Zambezi, using data from the Africa Union. The visualization uses D3 v5 with an SVG rendering, employing `d3.scaleLinear` for the x-axis population scale and `d3.scaleBand` for the categorical y-axis. Axis labels are generated via `d3.axisLeft` and `d3.axisBottom`, while rectangular bars are appended dynamically to the SVG. The population values are converted from millions to raw numbers before scaling.

Oct 25, 2019

Loading thumbnail…

Hello VizHub

This example displays a simple, centered "Hello VizHub!" message on a dark blue background with large, light-colored Ubuntu font. It introduces the basic structure of a VizHub project by separating HTML, JavaScript, and CSS into distinct files. The code uses the D3.js library (v5) via an ES6 module import to select the HTML element with the ID `message` and set its text content through the `select('#message').text(message)` API. The text itself is defined as a constant in a separate local module, demonstrating modular JavaScript organization.

Oct 23, 2019