29:null 2a:["$","title",null,{"children":"Animating Maps by Centroid Sorting | Parker Ziegler | Observable"}] 2f:[] 2d:{"id":"4473f1fce7a89ea0","slug":"animating-maps-by-centroid-sorting","title":"Animating Maps by Centroid Sorting","thumbnail":"95096cc16024fae18b13c76e288425af8541dd628136058b71dbe48cbf2a9ac8","access_level":"public","create_time":"$D2020-07-21T01:17:16.323Z","update_time":"$D2021-08-27T21:07:41.738Z","view_time":null,"first_public_time":"$D2020-10-31T18:26:10.519Z","has_unpublished_edits":null,"fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"62e9b5949e6a1563","login":"parkerziegler","name":"Parker Ziegler","avatar_url":"https://avatars-next.observableusercontent.com/aec48783377e4b4fae52856095f3934a81651c898148bbb134db5b10e4fbb788","tier":"starter_2024"},"version":255,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"66dfe0b521039480","login":"parkerziegler","name":"Parker Ziegler","avatar_url":"https://avatars-next.observableusercontent.com/aec48783377e4b4fae52856095f3934a81651c898148bbb134db5b10e4fbb788","tier":null}],"members":[{"type":"individual","id":"66dfe0b521039480","login":"parkerziegler","name":"Parker Ziegler","avatar_url":"https://avatars-next.observableusercontent.com/aec48783377e4b4fae52856095f3934a81651c898148bbb134db5b10e4fbb788","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Animating Maps by Centroid Sorting","cells":[{"id":0,"value":"md`# Animating Maps by Centroid Sorting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`One of my favorite flourishes when creating new maps is to animate in the individual SVG paths for the areal unit I'm using, be that a state, province, county, or U.S. House District. It gives a pleasant unfolding effect to the experience, a way to settle a map reader into the story you're trying to tell.\n\nA nice pattern to perform these animations is to presort your areal units by (x,y) coordinates of their centroids, and then animate them in with an opacity stagger. A centroid is the center of mass of a geometric object, assuming uniform density; for our purposes, it's more or less the center of the areal unit. d3, in combination with topojson (a library for encoding topological information on top of GeoJSON), provides us with a great toolbox for deriving the centroid of our areal units, which makes creating these types of animated map experiences a breeze.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"md`## Preparing our Areal Units`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md`Before we think about animating our individual SVG paths for our areal unit of choice, we want to [topologically clean](https://medium.com/@mbostock/command-line-cartography-part-3-1158e4c55a1e) them. Standard GeoJSON encoding treats each areal unit as a discrete path stored as a sequence of coordinates, which can have a few negative consequences:\n\n- **Large file sizes** — encoding a lot of (x,y) coordinate pairs at high precision means a lot of bytes.\n- **Redundant boundaries** — if two geographic features share a boundary, such as a state border, that path can be drawn twice. This can lead to small visual artifacts if the borders don't line up cleanly.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"md`To avoid these deficiencies, we can use the topojson-client to topologically clean our GeoJSON.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"topojson = require('topojson-client@3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`With topojson-client loaded, let's bring in the GeoJSON for our areal units using d3.json. In this example, we'll use U.S. states.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"us = d3.json('https://d3js.org/us-10m.v1.json')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`Let's now topologically clean our GeoJSON using [topojson.feature](https://github.com/topojson/topojson-client#feature).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"states = topojson.feature(us, us.objects.states).features","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`Awesome, we now have the raw geographic data needed to render the map. Next, we need to convert these features from their real-world geographic representation to SVG paths that d3 can work with and render.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"md`## D3's geoPath Function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"md`d3 has a great set of APIs for displaying geographic data. The [geoPath](https://github.com/d3/d3-geo#geoPath) function is one of the most useful — it returns a geographic path generator for deriving SVG paths from GeoJSON.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"path = d3.geoPath();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`With this function, we can iterate over our states array and generate an SVG path for each state. The path generator returned by geoPath also comes with a centroid method that returns the centroid for each of our geographic features. This gives us access to an (x,y) coordinate pair in the context of our SVG element's Cartersian coordinate system, which we'll use for sorting our states before we animate them in.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"statesPaths = states.map((feature) => ({\n id: feature.id,\n d: path(feature),\n centroid: path.centroid(feature)\n}));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"md`## Sorting and Rendering Features by Centroid`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md`With our SVG paths and centroids in hand, we can now sort and render them in any manner we like. If we wanted to animate the states in from left to right, for example, we could sort by the x coordinate of the centroid!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"statesPathsLTR = [...statesPaths].sort((a, b) => a.centroid[0] - b.centroid[0]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"viewof replayLTR = html`