The assignment comes first: one GDP hierarchy drawn as two treemaps that differ only in how they cut up the rectangle. The in-lab exercises (a collapsible tree and a zoomable treemap of twelve cities) follow in Section 5.
continent,
area, country,
gdp_billion_usd and gdp_status
(Increase 15, Unchanged 7, Decrease 5). Synthetic, supplied for
visualization practice.gdp and
status; continent and area totals are not stored but
summed in the browser with d3.hierarchy().sum().d3.treemapSquarifyd3.treemapSliceDiceEach coloured rectangle is one country; its area is proportional to GDP. Countries sit inside a light frame for their area, which sits inside a darker frame for their continent, each with its name in the header strip. Hover a country for its exact values — the same country is outlined in both treemaps so they can be compared. Click anywhere to zoom both treemaps into that continent, and click again (or use Back to World) to return. Below treemap B the continents are also labelled as an axis, because three of its columns are too narrow to carry their own names.
GDP amount is rectangle area, the channel a treemap is built on, so part-to-whole reads directly: the United States and China together fill over half of each picture. GDP status is colour on a diverging scheme, blue for Increase and red for Decrease, with neutral grey for Unchanged, since “no change” should look like the absence of a signal. Status is also printed as ▲/●/▼ inside each labelled cell so it never relies on hue alone. The hierarchy is containment: two tones of framed header strip, continent and area, so structure never competes with status for colour.
Squarify keeps rectangles close to square, which makes areas easy to compare and leaves room for labels; the cost is that position means nothing, and a continent's areas land wherever they fit. Slice-and-dice alternates direction by depth — continents are columns, areas are rows, countries are columns again — so the hierarchy is readable at a glance and order is stable, but small members become slivers (Africa is 14 pixels wide). Zoom and tooltips recover what it squeezes out.
Growth is concentrated rather than spread: 15 of 27 countries increased, but they carry 72% of all GDP ($61,290B) because the United States, China and India are among them. The five decreases are mid-to-large economies — Japan, Germany, Italy, Brazil and Nigeria — so in treemap A the red cells are few but not small. In treemap B the same fact is easier to locate: Europe's column is the only one with two red cells, one in each of two different areas.
Twelve cities in a World → continent → country → region → city hierarchy, converted from CSV to nested JSON by convert_hierarchy.py. The hierarchy object, its descendants and the summed root value (… thousand people) are also logged to the browser console.
d3.tree() (Tasks 6–9)Click any blue node to hide its children; the layout is recomputed and the rest of the tree closes up around it. A collapsed node is drawn larger, with the number of cities it hides.
d3.treemap() (Tasks 10–15)Area is population, colour is continent. Click a city to zoom one level deeper (World → continent → country → region); the x/y scales change and every rectangle is re-drawn against the new domain. Switching the tiling keeps the same values and the same zoom — only the cutting changes.
← Back to home