3e:null 3f:["$","title",null,{"children":"Seasonal Spirals | Mubanga Nsofu | Observable"}] 45:T779,{ let pages = [ 'Kayaking', 'Game_of_Thrones', 'Jesus', 'Sourdough', 'Prime_numbers', 'Saturday_Night_Live', 'Rebecca_Black', 'Zombie' ]; let captions = [ md`[Kayaking](https://en.wikipedia.org/wiki/Kayaking) is less popular this year.`, md`[Game of Thrones](https://en.wikipedia.org/wiki/Game_of_Thrones) spikes in popularity whenever the TV show airs.`, md`[Jesus](https://en.wikipedia.org/wiki/Jesus) is popular on Christmas and Easter.`, md`[Sourdough](https://en.wikipedia.org/wiki/Sourdough). I wonder what happened?`, md`[Prime numbers](https://en.wikipedia.org/wiki/Prime_number) are making a comeback thanks to online learning during the pandemic.`, md`[Saturday Night Live](https://en.wikipedia.org/wiki/Saturday_Night_Live) is popular on Saturdays.`, md`[Rebecca Black](https://en.wikipedia.org/wiki/Rebecca_Black) is popular on [Friday](https://en.wikipedia.org/wiki/Friday_(Rebecca_Black_song).`, md`[Zombies](https://en.wikipedia.org/wiki/Zombie) are a fixture on Halloween, and perhaps in early 2020 people were fearful of the apocalypse.` ]; let files = [ FileAttachment("image@1.png"), FileAttachment("image@2.png"), FileAttachment("image@3.png"), FileAttachment("image@4.png"), FileAttachment("image@5.png"), FileAttachment("image@6.png"), FileAttachment("image@7.png"), FileAttachment("image@9.png") ]; let mini = width < 630; return html`

${await Promise.all( Array.from( { length: captions.length }, async (_, i) => html`

${await files[i].image()}

${captions[i]}` ) )}`; }46:T5bb,md`## Interesting decisions A few specific design decisions make the spiral an effective way to communicate information. **Optimize for seasonality.** The spiral does not try to replace the line chart, it just tries to be good at visualizing seasonal patterns. It's often better to use multiple pictures side-by-side, each revealing a different aspect of the same object, than it is to attempt one perfect picture. **Turn cognition into perception.** The spiral is designed to make looking for seasonality an exercise in visual pattern matching. Unlike the line chart, where it was hard to see if a pattern was the same from year to year, the spiral feeds this information directly to your visual system. It's [feature engineering](https://en.wikipedia.org/wiki/Feature_engineering) for humans. **Piggyback on something familiar.** The spiral adopts the conventions of a standard calendar layout—one week per row, Sunday to Saturday—which lets us reuse people's existing knowledge and makes the chart easier to understand and explain. **Expect yearly and weekly patterns.** Yearly and weekly patterns are easy to see in the spiral because they're hardwired into the design: each week is a row, each year a circular revolution. It's fun to look at the rare page with an offbeat pattern because it still looks quite pretty. Offbeat pages often have to do with celestial mechanics, such as this chart for [full moon](https://en.wikipedia.org/wiki/Full_moon):`47:T414,md`**Specialize the color scale to the data distribution.** A lot of Wikipedia traffic is driven by current events and Wiki pages often experience several days with an extraordinary number of views. To accommodate this mixed distribution in the color scale, the spiral combines a linear segment for ordinary days together with a log segment for the extraordinary ones. The linear segment goes from light green to dark blue, and the log segment from dark blue to deep red. This approach solves the [histogram equalization](https://en.wikipedia.org/wiki/Histogram_equalization) problem, keeping the subtle seasonal shifts visible while still calling out days with extreme values. The caveat with this approach is that you must pick a precise cutoff between ordinary and extraordinary. Right now we use a heuristic (*n* times the *m*th percentile), which occasionally runs into trouble. If you enjoyed this post, you might enjoy [WikiPulse](https://wikipulse.com/), my side project to draw spirals like this for any page on English Wikipedia.`48:[{"id":"b04cd5e30d9cfbd2e8332103df7c3a2e945b7ec105927eb37f45f02ac332a4b0d5fa0bd96f2a650ebbad0c6dc4910717dfe33022f39d68984f35f6f2d4d1bcb6","href":"https://static.observableusercontent.com/files/b04cd5e30d9cfbd2e8332103df7c3a2e945b7ec105927eb37f45f02ac332a4b0d5fa0bd96f2a650ebbad0c6dc4910717dfe33022f39d68984f35f6f2d4d1bcb6","name":"image@4.png","type":"image/png","lastModified":1670361065673.19,"size":208308},{"id":"0cf49c5cdaaf7b512b6b1f062712d4ad1851075179870dbd2f12b5ebb4186744abdff8e857f62a9c426bfdaae08d9d214a4223e1dff5126a6ae4078c827f07d2","href":"https://static.observableusercontent.com/files/0cf49c5cdaaf7b512b6b1f062712d4ad1851075179870dbd2f12b5ebb4186744abdff8e857f62a9c426bfdaae08d9d214a4223e1dff5126a6ae4078c827f07d2","name":"image@3.png","type":"image/png","lastModified":1670361065673.19,"size":206757},{"id":"bd2f779dc566f9a3aee23c9f021049dfa740edc9f9c70e926f8e7f7129ce5adc29eed977be6261203bed47a716a22b9fed1e5b78638722ab9d32d7ebed2c080e","href":"https://static.observableusercontent.com/files/bd2f779dc566f9a3aee23c9f021049dfa740edc9f9c70e926f8e7f7129ce5adc29eed977be6261203bed47a716a22b9fed1e5b78638722ab9d32d7ebed2c080e","name":"image@2.png","type":"image/png","lastModified":1670361065673.19,"size":195488},{"id":"e2e43f733a6d8d8593b26ed7ffe7de96e6e0fd3cacde3cb513acd583adf553d4429da629daba1c1efb7a74c05927a1a9c04cfabaa27a2318c5a11efeeadc2cb1","href":"https://static.observableusercontent.com/files/e2e43f733a6d8d8593b26ed7ffe7de96e6e0fd3cacde3cb513acd583adf553d4429da629daba1c1efb7a74c05927a1a9c04cfabaa27a2318c5a11efeeadc2cb1","name":"chart (1).png","type":"image/png","lastModified":1670361065673.19,"size":155085},{"id":"dc660bf3ce21914e97279a2849da6ed36d579bba2496d33c998d82fa1a67e69384f2e5cc61d42ed2656bbbaafb3b1bfa1868a3aa324dbaa137f62dc842504e53","href":"https://static.observableusercontent.com/files/dc660bf3ce21914e97279a2849da6ed36d579bba2496d33c998d82fa1a67e69384f2e5cc61d42ed2656bbbaafb3b1bfa1868a3aa324dbaa137f62dc842504e53","name":"image@1.png","type":"image/png","lastModified":1670361065673.19,"size":208186},{"id":"60339671cb7c8a12c8f22dd0a3f84260ae61a4def53acbebdf15d95e90b1daaef2078870990f5b553f8c5b8135611b05e29f79f32b6da6b401d4dc3a55831dc2","href":"https://static.observableusercontent.com/files/60339671cb7c8a12c8f22dd0a3f84260ae61a4def53acbebdf15d95e90b1daaef2078870990f5b553f8c5b8135611b05e29f79f32b6da6b401d4dc3a55831dc2","name":"image.png","type":"image/png","lastModified":1670361065673.19,"size":208764},{"id":"1ecd59eb7940af64a2aebbcea960fdd428f451e8194ff14582a5de20efe581591cfa74da24d880cc5a490359cab05d5e106e76a7d6cd55cb67db5882de1bece4","href":"https://static.observableusercontent.com/files/1ecd59eb7940af64a2aebbcea960fdd428f451e8194ff14582a5de20efe581591cfa74da24d880cc5a490359cab05d5e106e76a7d6cd55cb67db5882de1bece4","name":"image@9.png","type":"image/png","lastModified":1670361065673.19,"size":206952},{"id":"11db2aef8d29f2e72124f9f0a8ce6967e94aab827858a46509fa80bf35d12b68c6b2c8186d0a72a006d91469490779cc43aac03138a343d82f7d99ae5874d196","href":"https://static.observableusercontent.com/files/11db2aef8d29f2e72124f9f0a8ce6967e94aab827858a46509fa80bf35d12b68c6b2c8186d0a72a006d91469490779cc43aac03138a343d82f7d99ae5874d196","name":"image@7.png","type":"image/png","lastModified":1670361065673.19,"size":210702},{"id":"da08d5602c097a18bf612545f682f6674a986380ccba0eaa25d8a7d55677725917b44787f764c0d5e6834bd2484bb6588fddd45f88024baccfe0353ebde8d9fe","href":"https://static.observableusercontent.com/files/da08d5602c097a18bf612545f682f6674a986380ccba0eaa25d8a7d55677725917b44787f764c0d5e6834bd2484bb6588fddd45f88024baccfe0353ebde8d9fe","name":"image@6.png","type":"image/png","lastModified":1670361065673.19,"size":206600},{"id":"dd4901ffe242cc6b25048052a96f1a1e59c7b9f55fbadf72d7a7d900720676b4ef959c5e40c655d727ace9636152f7c93cd28068b3b8583aa54196f6532b001a","href":"https://static.observableusercontent.com/files/dd4901ffe242cc6b25048052a96f1a1e59c7b9f55fbadf72d7a7d900720676b4ef959c5e40c655d727ace9636152f7c93cd28068b3b8583aa54196f6532b001a","name":"image@5.png","type":"image/png","lastModified":1670361065673.19,"size":209579},{"id":"95273bd9badc637b67f9b1954011e8e2d7eaa9984eb3765dc18b2c6d26e4e2bddb06b3a39d71ba2f3ad117939b09b0d1c2ddce669ec692f7326ed70f68f4ae9b","href":"https://static.observableusercontent.com/files/95273bd9badc637b67f9b1954011e8e2d7eaa9984eb3765dc18b2c6d26e4e2bddb06b3a39d71ba2f3ad117939b09b0d1c2ddce669ec692f7326ed70f68f4ae9b","name":"image@10.png","type":"image/png","lastModified":1670361065673.19,"size":207746},{"id":"418162d27de529c0a86dbabfbcf9082256190b506ed231c9317f72a12752daaf2ad9ceec59164e6a2f971c2e1593d11362595c3e8895e9c9a257c8df9e8b0115","href":"https://static.observableusercontent.com/files/418162d27de529c0a86dbabfbcf9082256190b506ed231c9317f72a12752daaf2ad9ceec59164e6a2f971c2e1593d11362595c3e8895e9c9a257c8df9e8b0115","name":"image@11.png","type":"image/png","lastModified":1670361065673.19,"size":208079}] 43:{"id":"5add932cc549ea15","slug":null,"title":"Seasonal Spirals","thumbnail":"8ab3d32af035c98d49912022b66cd6fc070a1dc35affb43aa7fa61c7ef78f597","access_level":"public","create_time":"$D2022-12-06T21:11:05.673Z","update_time":"$D2022-12-06T21:11:05.673Z","view_time":null,"first_public_time":"$D2022-12-06T21:11:05.673Z","has_unpublished_edits":null,"fork":{"id":"2e8a109570d3f603","slug":"seasonal-spirals","title":"Seasonal Spirals","owner":{"id":"106fc7e7a0f11e48","login":"yurivish","name":"Yuri Vishnevsky"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f466891b319ebe82","login":"mubangansofujr","name":"Mubanga Nsofu","avatar_url":"https://avatars-next.observableusercontent.com/4b005c4c9d6b341d61dc750c7789ff06fd47dd3bc7d44c0243fea63e28208c53","tier":"starter_2024","bio":"","following":false},"version":395,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"40936f732a34be3d","login":"mubangansofujr","name":"Mubanga Nsofu","avatar_url":"https://avatars-next.observableusercontent.com/4b005c4c9d6b341d61dc750c7789ff06fd47dd3bc7d44c0243fea63e28208c53","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"40936f732a34be3d","login":"mubangansofujr","name":"Mubanga Nsofu","avatar_url":"https://avatars-next.observableusercontent.com/4b005c4c9d6b341d61dc750c7789ff06fd47dd3bc7d44c0243fea63e28208c53","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Seasonal Spirals","cells":[{"id":6,"value":"md`# Seasonal Spirals\n\nHuman behavior is seasonal. People act differently on weekdays in winter than they do on weekends in summer, and these differences often show up even when you're not expecting them.\n\nLet's take view counts of Wikipedia pages as an example. Here's a chart of four years of daily view counts for the Wikipedia page on [whiskey sours](https://en.wikipedia.org/wiki/Whiskey_sour):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"image(FileAttachment(\"chart (1).png\"), null, { maxWidth: width + 'px' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`The big spikes happen on New Year's Day and the small wobbles are weekly cycles. There's clearly a lot of structure, but the line chart makes it hard to see what's going on.\n\nLet's take the same data and paint a new picture designed to bring seasonality into focus:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"image(\n FileAttachment(\"image.png\"),\n md`Page views for the Wikipedia page on [whiskey sours](https://en.wikipedia.org/wiki/Whiskey_sour)`,\n imageStyle,\n 'https://wikipulse.com/wiki/Whiskey_sour'\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`This chart is basically what you'd get if you took a calendar, colored each day by the number of visits that day, then wrapped it around a spiral.\n\n**How to read it:**\n\n- Just like a calendar, each \"row\" is a week, and each little arc inside that row represents a day. Days run outwards from Sunday to Saturday.\n- Recent data is towards the edges and older data is towards the center.\n- Each revolution around the spiral shows one year of daily data.\n- A darker arc means more page views that day.\n\nThe seasonal patterns are much easier to see here. There's a strong weekly pattern—people like their whiskey sours on weekends—and the buzz around New Year's is still clearly visible.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"md`## Variations on a theme\n\nThe word *seasonality* evokes smooth transitions, from summer to fall to winter to spring, but seasonality in real data is often richer than that. Seasonal patterns interact with each other and shift over time. And sometimes a pandemic comes along and changes everything.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"image(\n FileAttachment(\"image@10.png\"),\n md`Page views of \"[full moon](https://en.wikipedia.org/wiki/Full_moon)\" are periodic, but the period does not line up with weekly or yearly rhythms emphasized by the spiral.`,\n imageStyle,\n 'https://wikipulse.com/wiki/Full_moon'\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`**Use a spiral.** The spiral has high data density, enables easy comparison across years, and looks nice, which, aside from being valuable for its own sake, encourages interaction. One alternative would be to use a long rectangular grid that unwraps the spiral, or a stack of rectangular grids, one per year. These can be reasonable choices depending on what you're trying to accomplish.\n\nThe spiral devotes more space to recent data, which makes sense when recent data is more important. In contrast, rectangles give equal weight to every day.\n\nThe spiral represents the continuous unbroken flow of time, while stacked yearly rectangles artificially divide it into yearly chunks. This would be a disadvantage for us but might be useful in other contexts. One advantage of a stack of rectangles is that they scale better to showing more years at a time.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"image(\n FileAttachment(\"image@11.png\"),\n md`[Gore-tex](https://en.wikipedia.org/wiki/Gore-Tex), with a nice unbroken wintry seasonal pattern thanks to the spiral design. The spike in September 2020 was due to the inventor of Gore-tex, [Robert Gore](https://en.wikipedia.org/wiki/Robert_W._Gore), passing away at age 83.`,\n imageStyle,\n 'https://wikipulse.com/wiki/Gore-Tex'\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`Thanks to Andrew Lin, Zora Killpack, Yuriy Rusko, Boris Vishnevsky, Dillon Shook, and [Dan Luu](http://danluu.com/) for reading drafts of this post. Credit for the linear-log color scale idea is due to Andrew Lin.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"image = async (file, caption, style, url) =>\n html`

${await file.image()}

${caption}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"imageStyle = ({ maxWidth: ~~(640 / 1.5) + 'px', paddingBottom: '0.5em' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"import { html } from '@observablehq/htl'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 44:"$43:body"