FukurouNarthil

@FukurouNarthil·3 public vizzes

World Countries Tree

This example presents a hierarchical tree of world countries organized by continent and subregion, rendered as an indented node-link diagram. The visualization uses the D3.js v5 library to parse a nested JSON structure, apply a tree layout, and draw the connections with horizontal link paths. Text labels display country names with depth-dependent font sizes, and the entire graph supports zoom and pan interactions via the `d3.zoom` module. The SVG output is styled with a custom serif font and a teal stroke for the linking paths.

Mar 19, 2020

Loading thumbnail…

Map with Selectable Countries

A choropleth map colors countries by economic category, with clickable countries that highlight while all others fade, and a corresponding color legend allows filtering by category. Built with d3.v5, it uses `geoNaturalEarth1` projection, `geoPath` for rendering, and `zoom` for panning. Data comes from the World Atlas TopoJSON plus TSV metadata, and the ordinal color scale uses `schemeSpectral`. Clicking a country or legend item toggles the selected state.

Mar 17, 2020

Loading thumbnail…

Map with Selectable Countries

This map visualization displays global economies using a choropleth projection, where each country’s color corresponds to its economic classification from World Atlas data. Users can click individual countries to highlight them and dim all others, with a legend that also supports filtering by economic category. The implementation uses d3.geoPath with a geoNaturalEarth1 projection, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral for coloring. TopoJSON loads the geographic boundaries, while SVG paths render the interactive map and legend controls.

Mar 17, 2020