Arnaud Gbaguidi

@agbaguidi·5 public vizzes

Let's make a another temperature chart bar v3

This bar chart visualizes temperatures from six different controllers, with bars colored green, red, or steelblue based on their value relative to thresholds. The chart uses D3 v5 to load data from a local CSV file and render it as SVG, with axes generated by `d3.axisBottom` and `d3.axisLeft`. A custom tooltip, built with HTML divs, appears on mouseover to display the device name and exact temperature in degrees Celsius.

May 28, 2020

Loading thumbnail…

Let's make a temperature chart bar

This bar chart displays temperature readings for six labeled controllers, ranging from 5 to 60 degrees. The data is loaded from a local CSV file and rendered as SVG rectangles with axes. Built with D3 v5, it uses `scaleBand` and `scaleLinear` for positioning, `axisBottom` and `axisLeft` for tick marks, and `csv` for data parsing. Each bar’s height corresponds to its temperature value, with the y-scale inverted to align with the SVG coordinate system.

May 27, 2020

Loading thumbnail…

Let's make a rolling ball with D3.js

This example demonstrates how to build a rolling ball animation using D3.js v5 with SVG rendering. The code constructs a circular graphic with alternating black and orange arc segments using the `d3.arc` generator, then applies transitions to rotate the entire group element. While the primary ball design is commented out, the active code adds a simple paragraph element styled with red text, showing basic SVG selection and manipulation. The implementation imports `select` and `arc` from D3 and includes a custom text measurement utility for calculating string dimensions.

May 21, 2020

Loading thumbnail…

Let'S make a face with D3.js

This example uses D3.js v5 to construct an animated face entirely from SVG primitives. It draws a yellow circle for the head, adds two black eyes and rectangular eyebrows, then creates a mouth using an `arc()` path generator. The eyebrows are animated with a two-second `transition()` that shifts them up and down before returning to their original position. The code relies on D3's `select`, `append`, and attribute methods to build and manipulate the SVG scene.

May 19, 2020

Loading thumbnail…

HTML Starter

This example renders a simple HTML page that displays the text "Hello HTML" at a very large font size. It uses an embedded CSS style block to set the body text alignment and font size, with no additional JavaScript logic. The page demonstrates the minimal structure of an HTML document, including the `<!DOCTYPE html>` declaration, a head section with a title and styles, and a body containing the text content. It serves as a bare-bones starting point for web-based projects, with no external libraries or data visualization components involved.

May 19, 2020