D3-Fuse Clustering with pie charts

100%

D3-Fuse Clustering with pie charts

✓ Published0🌍 Public

Last edited Dec 18, 2019

Created on Dec 18, 2019

This visualization maps places of worship in London from OpenStreetMap data, using D3-Fuse clustering to aggregate nearby points into fused circular clusters. Each cluster is rendered as a pie chart on an SVG canvas, with slices encoding the proportion of religious denominations (e.g., Christian, Catholic, Anglican) within that cluster. The map uses a geographic projection to place clusters over the city, while D3's quadtree algorithm efficiently merges overlapping nodes based on their spatial proximity and size. Hovering or interacting with a cluster reveals its internal composition, making it easy to explore the religious distribution across different areas of London. The visualization combines SVG for the base map and vector shapes with canvas for optimized rendering of the many clustered points.

AI-generated description

Clustering points into pie charts with d3-fuse. The size of each point represents how many places of worship from Open Street Map are present. Background map with an experimental tile module.

Similar vizzes

Loading thumbnail…

d3-fuse Map

This example demonstrates a custom d3-fuse layout that merges overlapping circles by area, applied to geographic data displayed on an OpenStreetMap tileset. The circles are positioned with a Mercator projection via the d3-slippy helper, which provides slippy-map-like panning and zooming. As circles overlap, larger nodes absorb smaller ones, aggregating their area, radius, and child node relationships recursively until no further merges occur. The visualization uses SVG for map rendering and canvas or SVG for the fused circles, highlighting the fusion algorithm’s behavior on clustered geographic points.

Aandrew-reid

74% match

Loading thumbnail…

D3 Example

This visualization displays small multiples of pie charts showing the religious breakdown of the five most populous countries. Each donut uses color-coded slices for different religions, with all charts scaled equally regardless of population, highlighting proportional composition within each nation. The code uses D3.js with `d3.layout.pie` and `d3.svg.arc` for chart generation, `d3.nest` for data grouping, and the d3-legend library for the color key. Data comes from the Pew Research Center Global Religious Landscape dataset.

LLjfernando

71% match

Loading thumbnail…

D3 Example

This is a small-multiples visualization of pie charts showing the religious breakdown of the five most populous countries. Each country’s donut chart displays the proportion of its population following each religion, but the charts are all the same size, so area is not proportional to population, which can be misleading. The code uses D3’s `d3.layout.pie` and `d3.svg.arc` to generate the slices, with nested selections binding data to each chart. It also employs the d3-legend library for the color legend and renders as SVG. Data comes from the Pew Research Center’s Global Religious Landscape dataset.

CCurran Kelleher

71% match

Loading thumbnail…

D3-fuse

Ten thousand circles with fixed radius are scattered randomly across a canvas, and overlapping circles merge into larger clusters while retaining a branching tree of their component nodes. The d3-fuse library, using a quadtree, repeatedly fuses overlapping nodes and adjusts the center of gravity of each cluster. Mouse-wheel zoom modifies the circle radii, causing the clustering to change dynamically. The visualization is rendered on a 2D canvas, with circle size and color encoding cluster area, and text labels displaying the count of merged nodes.

Aandrew-reid

70% match

Loading thumbnail…

D3 Example

This small multiples visualization uses donut charts to show the religious breakdown of the five most populous countries. Each donut represents a country, with slices sized by the proportion of followers of each religion within that country, though the donuts themselves are equal-sized regardless of population. The code uses D3.js (v3) with `d3.layout.pie`, `d3.svg.arc`, and `d3.nest` for data grouping, plus the d3-legend library for the color legend. Data comes from the Pew Research Center’s Global Religious Landscape dataset, rendered as SVG.

663anp3ca

69% match

Loading thumbnail…

D3 Example

A small multiples visualization of polar area charts displays the breakdown of religious populations across countries, with each pie chart positioned around a central circle and sized by population. The view animates country charts into place and supports clicking the color legend to re-rank countries by the selected religion’s population. Built with D3.js and SVG, the code uses nested selections, `d3.layout.pie`, `d3.svg.arc`, and ordinal, sqrt, and category color scales, with data from the Pew Research Center’s Global Religious Landscape dataset.

CCurran Kelleher

69% match

Loading thumbnail…

D3 Example

A pie chart of world religions uses a color legend to distinguish seven global religious groups by population. The D3.js code loads data from a CSV file and renders an SVG pie chart with an ordinal x-axis and categorical color scale. It employs `d3.layout.pie` and `d3.svg.arc` for the slices, and the `d3.legend.color` API from the d3-legend library to generate the color legend. The visualization highlights the relative sizes of religious populations, with Christianity as the largest segment.

CCurran Kelleher

69% match

Loading thumbnail…

D3 Example

This visualization shows small multiples of polar area charts comparing the religious breakdown of the five most populous countries, with each slice sized by population and colored by religion. Using D3.js and d3-legend, the code applies nested selections and a pie layout, with a square-root radius scale to encode values. The chart renders in SVG and pulls data from the Pew Research Center Global Religious Landscape dataset, including a color legend for religion categories.

TThanaporn-sk

69% match