RealAlpha

@pooja2299·3 public vizzes

Fork of World Countries Tree

This visualization shows a hierarchical tree of world countries organized by continent and subregion, with country names displayed at varying font sizes based on depth. The tree layout uses d3.tree with a horizontal link generator (d3.linkHorizontal) to connect parent and child nodes, while d3.zoom enables panning and zooming of the SVG rendering. The data, loaded from a JSON file via d3.json, contains nested geographic groupings, and the text nodes are positioned along the computed tree coordinates with depth-based font scaling.

Apr 18, 2021

Loading thumbnail…

World Countries

This example presents the hierarchical structure of world countries as an interactive zoomable tree diagram. The visualization organizes countries by continent and subregion, revealing geographic groupings at a glance. Using D3.js v5, the code loads data from a JSON file and applies the `d3.tree()` layout with `d3.hierarchy()`, rendering horizontal links via `d3.linkHorizontal()`. Pan and zoom functionality is implemented with the `d3.zoom()` behavior, while text labels display country names with size scaling by depth. The SVG-based rendering allows smooth exploration of the global hierarchy.

Apr 17, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a yellow smiley face with eyes, eyebrows, and a mouth. The code appends SVG circle and rectangle elements to a central group, then animates the eyebrows upward and back down using chained `transition` calls with a 2-second duration each. The mouth is drawn with the `d3.arc` generator using specified inner and outer radii and start/end angles. All elements are positioned via explicit pixel coordinates within a 960-by-500 SVG canvas.

Apr 15, 2021