mgweiner

@mgweiner·2 public vizzes

Fork of Choropleth Map

This choropleth map colors world countries by their economy classification, using a spectral ordinal color scale and a natural Earth projection. The visualization supports zooming and panning through d3.zoom, and displays a custom interactive legend built with SVG circles and text. It loads geographic and economic data from the world-atlas TopoJSON and TSV files, processing them with topojson.feature and d3.tsv. Country paths are rendered via d3.geoPath, with hover highlighting and a tooltip showing the country name and economy value.

Dec 29, 2020

Loading thumbnail…

Animated happy to evil face (click to see transformation)

A D3.js v6 SVG animation transforms a cheerful, orange face into an evil one. The face features blue eyes that turn red, eyebrows that rotate and translate, and a mouth that changes from a smile to a frown. The user initiates the transformation with a click, triggering sequential `transition()` chains that animate eye color, brow rotation, and the mouth's arc path. The code uses `d3.arc()` for mouth shapes, `d3.interpolateString` for rotations, and `attrTween` implicitly via transitions.

Dec 13, 2020