Zoha9

@Zoha9·4 public vizzes

Fork of Organization Graph Diagram

This fork of the Organization Graph Diagram visualizes the network of connections for the Kenneth Rainin Foundation, with nodes representing partners and links showing their relationships. Built with d3.forceSimulation, it applies forceManyBody, forceLink, and forceCenter to simulate a physics-based layout. The SVG renders nodes as circles, links as lines, and labels, while supporting dragging to reposition nodes. Data comes from data.js, where main nodes and links are defined with custom colors from a palette and distances between locations.

Dec 13, 2022

Loading thumbnail…

Fork of TreeMap Layout

This example displays a treemap visualization of hierarchical data using D3 v5’s `d3.hierarchy` and `d3.treemap` layouts. The SVG renders nested rectangles sized proportionally to node values, with labels for named leaves and empty labels for internal branches. The code manually constructs the dataset in `index.js`, sums values via `root.sum`, and applies layout properties like `paddingOuter`. Rectangles and text are appended into grouped `<g>` elements, with styling from `styles.css` using royal blue fills and white strokes.

Dec 13, 2022

Loading thumbnail…

Fork of map of epa data sites

This D3.js and React visualization displays a map of US Environmental Protection Agency (EPA) air quality monitoring sites, with each site represented by a circle sized according to its AQI value using a square root scale from `d3.scaleSqrt`. The map is rendered using an SVG-based equirectangular projection via `d3.geoPath` and `geoAlbersUsa`, with US state boundaries and interiors drawn from a TopoJSON atlas loaded through `topojson.feature` and `topojson.mesh`. The underlying data is fetched as a CSV file containing latitude, longitude, and AQI measurements.

Dec 11, 2022

Loading thumbnail…

Smiley 1

A yellow smiley face rendered with SVG in React, featuring two black eyes and a mouth drawn as a thick arc. The code uses D3’s `arc()` generator to shape the mouth, while the face, eyes, and stroke are plain SVG circles positioned via React components. All elements are grouped and centered using a `translate` transform, with dimensions and offsets defined as constants. The visualization demonstrates combining React’s declarative JSX with D3’s geometric helpers to build a simple, static graphic.

Dec 10, 2022