Map

100%

Map - I

✓ Published0🌍 Public

Last edited Dec 9, 2018

Created on Dec 9, 2018

Clicking the SVG canvas toggles between a map of Wenzhou districts and a pie chart of their GDP values. Each shape morphs between its geographic boundary and pie slice using `transition.attrTween` with a custom `pathTween` interpolator. The code builds both geometries with `d3.geoPath` and `d3.pie`, coloring regions via a linear scale. Data comes from a local GeoJSON file and an inline GDP array, with SVG and animation rendering.

AI-generated description

Path animation is inspirated by Mike Bostock, the man behind the D3js.

路径动画取经于 D3js 创始人 Mike Bostock。

By cliking on svg canvas, chart will switch from map to pie chart, or vice versa.

单击图形，图形会在地图和饼图中切换。

mit Licensed

Similar vizzes

Loading thumbnail…

d3-voronoi-treemap

The visualization displays global economic output by GDP, showing a treemap that morphs between rectangular and Voronoï layouts. It uses D3.js v4 with the d3-voronoi-treemap plugin, which iteratively partitions space to create weighted Voronoï polygons. Animated transitions between the two layouts are powered by flubber's `fromRect` interpolation, applied via `transition.attrTween` on SVG paths. The data comes from a JSON file of country GDP weights grouped by continent, with each region assigned a distinct color.

KKcnarf

73% match

Loading thumbnail…

Zoomable Pie Chart

This zoomable pie chart allows users to explore a hierarchical dataset by clicking on arcs to zoom into nested levels, and clicking the center circle to zoom out. The visualization uses D3 v4's partition layout, with arcs representing nested data values from a JSON file. The chart is rendered using scalable vector graphics (SVG) with animated transitions, employing `d3.scaleLinear` for angular scaling and `d3.scaleSqrt` for radial sizing. Interactions trigger custom tween functions to smoothly interpolate arc geometries.

SSpaceActuary

72% match

Loading thumbnail…

Map with Selectable Countries

An interactive choropleth map displays global economies colored by income group, with clickable countries that highlight and dim others. Clicking a selected country again deselects it, while pan and zoom are supported. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for map projection, `scaleOrdinal` with `schemeSpectral` for coloring, and `d3.zoom` for interaction. Data comes from the World Atlas TopoJSON and TSV files. The code demonstrates migration from VizHub to local development with Rollup bundling.

CCurran Kelleher

71% match

Loading thumbnail…

Pie Chart II

A pie chart animates its slices outward on hover. The example uses D3 v3 with SVG and animation. Each slice’s path is drawn with `d3.svg.arc`, and hovering triggers a transition via `transition.attrTween`, interpolating the slice’s `outerRadius` to expand it. The dataset is a simple array of five values, with percentages displayed as rotated text labels. The code is adapted from Mike Bostock’s “Extending Arcs” block and was built with Blockbuilder.

11Cr18Ni9

71% match

Loading thumbnail…

Map animation with D3.js

Choropleth maps with interactive zoom and pan are rendered using SVG shapes, colored in pink and highlighted in red on hover. Built with D3.js and the d3-geo-projection library, the map uses a Bonne projection and displays country names from the World Atlas 50m TSV and GeoJSON datasets. The code constructs map paths with `geoPath`, applies a zoom interaction via `zoom().on('zoom')`, and enables rotation through the projection, though the animation itself is not demonstrated.

YYanan Xin

71% match

Loading thumbnail…

This example uses D3 v5 to visualize global economic data with a natural Earth projection. Countries are filled with colors from a spectral scheme based on their economy category, and hovering highlights each region. The visualization includes a custom color legend with circles and text. Data is loaded from the world-atlas package as TopoJSON and TSV files, which are processed using the `feature` function from topojson and rendered with `d3.geoPath`. The map supports zooming through `d3.zoom` events.

Kklumng

71% match

Loading thumbnail…

Transition

The visualization demonstrates a multi-stage transition of fruit count data, first morphing circular bubbles into rectangular bars, then into a pie chart. It uses D3.js version 3.5.6 with SVG and animation via chained `transition()` calls, employing `d3.scale.ordinal` and `d3.scale.linear` for positioning. The data comes from `fruit.csv` with fruit names and counts. After five seconds, a `setTimeout` triggers a second transition where bars become pie slices using `d3.layout.pie` and `d3.svg.arc`, with y-axis removal and element replacement.

DDarienLiang

71% match

Loading thumbnail…

Pie chart with annimation

This interactive pie chart displays six categorical values under three selectable datasets (“Total,” “Option 1,” “Option 2”) with a donut layout and legends. It animates slice arc changes using D3’s `transition` and `attrTween`, interpolating between old and new arc paths when switching datasets via radio buttons. The SVG rendering includes slice paths, label polylines, and tooltips on mouseover, while colors come from `d3.scale.category20()`. The code mixes d3.v4 and d3.v3 APIs, including `d3.layout.pie` and `d3.svg.arc`.

DDDDDDanica

71% match