tasqon

@tasqon·6 public vizzes

Circles on a Map

Circles on a Map visualizes country population for 2018 using sized circles positioned at each country’s centroid on a natural Earth projection. The visualization uses d3.geoPath to render the map and d3.geoCentroid to place the circles, with d3.scaleSqrt mapping population values to circle area. Users can pan and zoom via d3.zoom, and hover over countries to see pop-up tooltips with population details. Data comes from a UN population CSV and TopoJSON world atlas, loaded asynchronously via d3.csv and d3.json. A size legend is built with d3.scaleSqrt’s ticks.

Jul 21, 2019

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive visualization presents a zoomable sunburst chart of the Flare data hierarchy, where clicking a ring segment smoothly transitions the view to that level. The chart encodes hierarchical relationships as concentric rings, with arc length proportional to values and colors assigned by top-level category. Built with D3 v5, it uses the `d3.partition()` layout, `d3.arc()` for path geometry, and CSS transitions driven by `transition.attrTween` to animate changes. The example loads data from the `@observablehq/flare` package and renders everything as SVG elements.

Feb 13, 2019

Loading thumbnail…

D3 v5 Circle Packing from Observable

This example visualizes a hierarchical dataset from the Observable `@observablehq/flare` library using circle packing. It displays the data as nested circles, where each circle's area encodes a value and color encodes the depth in the hierarchy. The visualization is rendered as an SVG, using D3 v5's `d3.hierarchy` and `d3.pack` layout, with a sequential magma color scale via `d3.scaleSequential`. Hovering reveals a tooltip with the full path and value, generated through SVG `title` elements.

Feb 12, 2019

Loading thumbnail…

D3 v4 Circle-Packing

This example shows a hierarchical circle-packing layout of the Flare software package’s class hierarchy, with each node’s size proportional to its value and color mapped to depth. Using D3 v4’s `d3.stratify` to build the hierarchy from CSV data and `d3.pack` for layout, circles are rendered as SVG groups. Interactivity highlights all ancestor circles on hover via the `d3.selectAll` and `classed` methods, while leaf labels are clipped to their circles.

Feb 5, 2019

Loading thumbnail…

D3 v5 Circle-Packing

This circle-packing diagram visualizes the hierarchical structure of the Flare dataset, with nested circles representing categories and subcategories. Circle size encodes the summed value of each node. The visualization uses D3 v5’s `d3.stratify` and `d3.pack` to compute the layout, and `d3.scaleSequential` with `d3.interpolateMagma` to color circles by depth. Hovering highlights a node’s ancestors using the `d3.selectAll` and class toggling. SVG renders all elements, with leaf labels clipped via `clipPath`.

Feb 5, 2019

Loading thumbnail…

Treemap from bl.ocks.org

This treemap visualizes the hierarchical structure of the Flare data set, using nested rectangles whose areas encode each leaf’s size value. Users can toggle between summing by size or by count via radio buttons, which triggers a smooth 750ms transition of the rectangles. The visualization is built with D3 v4, using `d3.treemap` with the resquarify tiling function, `d3.hierarchy`, and `d3.scaleOrdinal` for color coding by parent category. The SVG rendering includes clip-paths for text labels and tooltip titles on each leaf.

Feb 4, 2019