suddala2001@gmail.com

@HariMohan21·4 public vizzes

Fork of React & D3 Starter

This example visualizes a small conceptual social network of six people connected by family, friendship, and school relationships. The code builds the graph using D3 v7 with a force-directed layout via `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter`. Nodes are drawn as colored SVG circles scaled by group category, with labels beside each, and links rendered as lines. Draggable nodes reposition the simulation, which recalculates positions on each tick.

Nov 17, 2025

Loading thumbnail…

Fork of HTML Starter

This example shows a three-generation family tree with colored nodes representing grandparents, parents, and children, connected by curved links. The code converts flat family data into a hierarchy using `d3.stratify`, then lays it out with `d3.tree()`. Nodes are rendered as SVG circles with name and generation labels, while links use `d3.linkVertical()` to draw the connections. A `d3.scaleOrdinal()` maps generations to distinct colors.

Nov 17, 2025

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This choropleth map visualizes 2024 estimated country populations, coloring nations from light yellow to dark red on a Natural Earth projection to show relative population sizes. The visualization uses d3.geoNaturalEarth1 for map projection and d3.geoPath to render country boundaries from TopoJSON data loaded via d3.json and converted with the `feature` function. Population values are mapped to colors using d3.scaleSequential with an interpolateYlOrRd color scheme, while hover tooltips display each country’s name and population using SVG `<title>` elements.

Nov 11, 2025

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

An area chart displays monthly sales data from a CSV file, with a monotone-smoothed line and translucent fill. The time series x-axis uses UTC date parsing and monthly tick formatting. Built with d3 v7, the chart constructs SVG output via the `areaChart` fluent API, `d3.scaleUtc`, `d3.axisBottom`, and `d3.curveMonotoneX`, rendering the data through d3.select and the charting function.

Oct 27, 2025