77tinna

@77tinna·4 public vizzes

Fork of A Visual History of Stamen Open Source Contributors

This example visualizes the commit activity of the top 100 contributors to Stamen’s open source repositories, using a modified streamgraph where layer order reflects the timing of each contributor’s first commit. It uses D3 v6 with `d3.stack`, `stackOffsetWiggle`, and `stackOrderInsideOut` to build the layered chart, and applies smoothing via the `array-blur` library. Each layer’s thickness encodes commits per week, with repository names as labeled anchors. Data comes from a JSON file of all commits, rendered as SVG with hover interactions highlighting individual layers.

May 5, 2022

Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

This radial tree diagram visualizes the hierarchical structure of migrant worker demographics, displaying categories such as background, distribution, industry type, and basic characteristics. The visualization uses D3 v4’s `d3.cluster()` layout to position nodes radially around a central root, with `d3.zoom()` enabling pan and zoom interactions. The SVG rendering applies curved link paths between parent and child nodes, while font size scales with node depth via `d3.scaleSqrt()`. Text labels rotate based on angular position, with leaf nodes aligned outward for improved readability.

May 5, 2022

Loading thumbnail…

Fork of Colm Lang A2 Heatmap

This visualization displays the average share of renewable energy production per country in Europe from 2000 to 2020, with each row representing a country and each column a year, colored on a green scale from dark to light. Built with p5.js, it uses a loadTable call to fetch CSV data from a GitHub gist, then draws a heatmap grid with square cells sized and spaced by calculated dimensions. Axis lines, country labels, and a legend showing percentages from 0 to 100 are rendered via p5’s drawing functions, while color interpolation (lerpColor) maps production values to a gradient.

May 4, 2022

Loading thumbnail…

Fork of Melting Data for Multiple Lines

This visualization shows population over time by region, with multiple lines depicting trends from 1950 to 2100. The code uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `line`, `curveBasis`, `nest`, and `axisLeft`/`axisBottom` to render SVG paths with a color legend. Data comes from UN population estimates and medium variant projections, processed by melting wide-format CSV data into tidy long-form rows.

May 3, 2022