Nguyen Le Ngoc Tran

@Marceline4972·3 public vizzes

Bar Chart with Basic Hover

This bar chart displays the top 10 countries by total population from the UN population estimates dataset. Hovering over a bar highlights it in black while dimming the others to gray, with the hovered datum tracked via React-style state updates. The chart uses d3.scaleBand and d3.scaleLinear for positioning, and the @curran/responsive-axes library for axis rendering. Bars are drawn as SVG rectangles, with mouseenter and mouseleave events triggering interactive state changes.

Nov 3, 2025

Loading thumbnail…

Fork of Fork of Bar Chart with Basic Hover

This example shows a horizontal bar chart of the top 10 countries by population, using data from the UN Population Estimates 2024 dataset. When a bar is hovered, it turns black while the others fade to gray. The visualization is built with D3.js (version 7.8.5), using `scaleBand` and `scaleLinear` for positioning, along with the `observeResize` and `axes` utilities from `@curran/responsive-axes`.

Nov 3, 2025

Loading thumbnail…

SVG fundamental

This example is a minimal web page that displays the static text "Hello HTML!" centered on a blank canvas. It demonstrates the fundamental structure of an HTML document with linked CSS and JavaScript files, but it does not produce any data visualization. The code uses a standard `<div>` element with an inline CSS class for styling and a simple JavaScript file that only logs a message to the console. The rendering approach relies entirely on the browser's native HTML and CSS layout engine.

Oct 30, 2025