CrisAbxs

@crisAbexus·3 public vizzes

Fork of Organization Graph Diagram111111111

This D3.js force-directed graph visualizes the network of organizations connected to the Kenneth Rainin Foundation, using `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes. Each main organization appears as a larger colored circle with smaller child nodes and leaf nodes representing related entities, while colored links indicate connections between groups. The graph renders in SVG and supports dragging via `d3.drag`, with data defined in a custom `data.js` module generated from the foundation’s funding relationships.

Jan 20, 2021

Loading thumbnail…

Fork of Coronavirus Linear Y Axis

This visualization shows the cumulative global death toll from COVID-19 over time, using a linear y-axis to emphasize the raw magnitude of the rise. Built with React and D3.v5, it plots a single thick black line across a grid of faint gray ticks. The data, sourced from the Johns Hopkins Coronavirus Dataset, is aggregated by summing daily death counts worldwide. The chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and `d3.axisBottom`/`d3.axisLeft` to render the labeled gridlines.

Jan 17, 2021

Loading thumbnail…

Circles on a Map

This visualization displays the world’s population by country, with circle area scaled to each nation’s 2018 population, mapped onto a natural Earth projection using d3.geoNaturalEarth1 and d3.geoPath. A square-root scale (d3.scaleSqrt) determines circle radii, while a separate size legend communicates the mapping. Users can pan and zoom via d3.zoom, and hover over countries to reveal a tooltip with the region and population count. The code uses D3 v5, TopoJSON for world geometry, and CSV data from the United Nations, with an SVG rendering approach.

Nov 17, 2020