Ronald Ngounou

@ronaldngounou·4 public vizzes

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical structure of the Flare dataset, with arc segments representing files and folders, and their angular size encoding file size. Built with D3 v5, the chart uses `d3.partition`, `d3.arc`, and `d3.select` to render SVG paths and labels, and `d3.interpolateRainbow` for coloring. Clicking a segment zooms in on that subtree, triggering a 750 ms animation via `g.transition().duration(750)` and `attrTween` to smoothly redraw arcs and labels based on the new root.

Jun 13, 2024

Loading thumbnail…

Fork of CodePen - D3 TreeMap

A zoomable treemap visualizes the hierarchical distribution of top-grossing movies, grouped by genre, with each tile sized and colored by category. The visualization uses D3 v5’s `d3.hierarchy` and `d3.treemap` to compute the layout, while click interactions and a zoom-out button invoke transitions that re-scale the x and y domains for drill-down navigation. Movie data is loaded from a local JSON file, and tooltips display details on hover.

Jun 13, 2024

Loading thumbnail…

Fork of Visualize Data with a Heat Map| fcc project-3

This heat map visualizes monthly global land-surface temperature anomalies from 1750 to 2015, with each cell colored by variance from a base temperature. The visualization uses a blue-to-red diverging color scale to represent temperature deviations, and a legend displays the value ranges. Built with React and D3 v7, the chart renders as an SVG with interactive tooltips that show the year, month, and temperature on hover. The data comes from the freeCodeCamp Project Reference Data repository, processed using D3's `scaleLinear`, `scaleBand`, and `json` APIs.

Jun 13, 2024

Loading thumbnail…

Fork of Treemap from bl.ocks.org

This treemap visualizes the hierarchical structure of the Flare software dependency data, using nested rectangles whose area encodes either the size or count of each leaf node. Built with D3 v4, it demonstrates a direct port of Mike Bostock’s original bl.ocks.org example, splitting code into separate files. The visualization uses `d3.treemap` with a squarified tiling algorithm, `d3.hierarchy` for data layout, and `d3.schemeCategory20` for color coding. It renders as SVG and includes a 750ms animated transition when switching between size and count modes via the radio buttons.

Jun 13, 2024