PekingWaldo

@PekingWaldo·4 public vizzes

Fork of d3-voronoi-treemap usage

A Voronoi treemap shows the global economy by GDP as of January 2017, with countries as cells sized by their economic weight and grouped by continent, each with a distinct color. The circular layout clips the treemap using a computed polygon, and hover effects highlight individual cells. The visualization is built with React, D3 v4, and the d3-voronoi-treemap plugin, which combines d3-weighted-voronoi and d3-voronoi-map to compute the layout. Data comes from a JSON file listing GDP values and country codes, and the SVG rendering includes labels, legends, and a title.

Aug 21, 2023

Loading thumbnail…

Tree Map -- nobel_data

A zoomable tree map visualizes Nobel laureate data from a CSV file, hierarchically organized by country, city, institution, and expert name. The D3.js hierarchy layout with `d3.linkHorizontal` connections renders an SVG tree, using `d3.csv` to load the data and sorting nodes by ranking fields. The dark blue background and interactive collapsible nodes display the dataset's nested structure, with a dynamic width based on the window size.

Aug 19, 2023

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays the hierarchical structure of the Flare dataset, with each ring representing a level of hierarchy and arc length proportional to size. Clicking a sector zooms into that subtree, re-centering and re-scaling the visualization with a smooth 750-millisecond animation. Built with D3 v5, the SVG rendering uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `transition.attrTween` animates the path geometry and label transforms. The color scale assigns distinct hues to top-level categories based on the data's children.

Aug 17, 2023

Loading thumbnail…

Social Network Diagram

A social network diagram visualizes connections among Kenneth Rainin Foundation affiliates, with node size and color distinguishing center, home, and DSI nodes. Built with D3 v6, it uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while `drag` enables interactive repositioning. Links and circles render as SVG elements, with colors from a generated palette in `colors.js`. Node positions update per simulation tick, and drag interactions restart the simulation for continuous layout adjustment.

Aug 12, 2023