mohdabidali

@mohdabidali·7 public vizzes

World Countries Tree

A static, zoomable tree visualization displays the hierarchical structure of world countries, organized by continent and region, using a horizontal node-link layout. The D3.js code loads a JSON file, builds the hierarchy, and renders text labels alongside connecting paths. The SVG output uses a custom zoom feature and a serif font, with the tree sized to fit the browser viewport.

May 31, 2020

Loading thumbnail…

World Countries Tree

The World Countries Tree visualizes the hierarchical relationships between continents, subregions, and countries in a radial layout, with leaf nodes representing individual nations. It uses a D3 cluster layout to compute the tree structure and project nodes into polar coordinates via the `project` function, rendering SVG paths for links and text labels for each country. The visualization supports zooming and panning through D3's zoom behavior, applies a square-root font scale based on tree depth, and loads its data from a JSON file, with styling using the Playfair Display font.

May 28, 2020

Loading thumbnail…

Learning D3.js

This example shows an interactive radial dendrogram of country population data, rendered as SVG. The visualization uses `d3.cluster` to compute a circular tree layout, with leaf nodes labeled by country name and sized by text depth. Pan and zoom are implemented via `d3.zoom` on a background rectangle, transforming the containing `<g>` element. The code loads hierarchical data from `countryHierarchy.json` and projects node positions using trigonometric functions to map tree coordinates to a radial polar layout.

May 28, 2020

Loading thumbnail…

Blank Canvas

A treemap displays the hierarchical structure of world regions and countries, with nested rectangles representing continents, subregions, and individual nations. The visualization uses SVG rendering with D3 v5, building the tree from a `data.json` file containing geographic groupings. The underlying code employs a force-directed simulation approach, though the visible output is a static hierarchical layout of geographic areas.

May 27, 2020

Loading thumbnail…

Cheap Tricks for Interaction

This example displays an interactive world map using a Natural Earth projection, rendered as SVG paths with d3.geoPath. It shows country boundaries filled in light green, with a hover effect that turns them red, and supports zooming and panning through d3.zoom. Geographic data comes from the world-atlas TopoJSON and TSV files, merged via Promise.all. A sphere outline is drawn first, and country names appear as tooltips using appended title elements.

May 25, 2020

Loading thumbnail…

Customizing Axes

This bar chart shows the populations of the top 10 most populous countries, based on 2018 United Nations estimates from the World Population Prospects 2017 data. It demonstrates how to customize D3 axes, including removing axis domains and tick lines, applying a custom tick format that converts billions to millions, and adding axis labels. The visualization uses D3 v5 APIs such as `csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, rendering to an SVG element with redrawn ticks and styled text.

May 24, 2020

Loading thumbnail…

HTML Starter

Five red circles appear in a row across the center of an SVG canvas, created using D3 v5 data joins. The code generates an array of apple objects with `d3.range`, binds it to circle elements, and renders them with a static radius and fill. It then removes one data item to demonstrate the `.exit()` selection, but no transition animates the removal. The visualization relies on D3 selections and standard SVG attributes.

May 21, 2020