2d:null 2e:["$","title",null,{"children":"d3.js Downloads Since 2015 | Joanne Ramadani | Observable"}] 33:T851,chart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height * years.length]) .attr("font-family", "sans-serif") .attr("font-size", 10); const year = svg .selectAll("g") .data(years) .join("g") .attr( "transform", (d, i) => `translate(40.5,${height * i + cellSize * 1.5})` ); year .append("text") .attr("x", -5) .attr("y", -5) .attr("font-weight", "bold") .attr("text-anchor", "end") .text(([key]) => key); year .append("g") .attr("text-anchor", "end") .selectAll("text") .data(weekday === "weekday" ? d3.range(1, 6) : d3.range(7)) .join("text") .attr("x", -5) .attr("y", (i) => (countDay(i) + 0.5) * cellSize) .attr("dy", "0.31em") .text(formatDay); year .append("g") .selectAll("rect") .data( weekday === "weekday" ? ([, values]) => values.filter( (d) => ![0, 6].includes(formatIso(d.date).getUTCDay()) ) : ([, values]) => values ) .join("rect") .attr("width", cellSize - 1) .attr("height", cellSize - 1) .attr( "x", (d) => timeWeek.count(d3.utcYear(formatIso(d.date)), formatIso(d.date)) * cellSize + 0.5 ) .attr("y", (d) => countDay(formatIso(d.date).getUTCDay()) * cellSize + 0.5) .attr("fill", (d) => color(d.value)) .append("title") .text( (d) => `${formatDate(formatIso(d.date))} ${d.value.toLocaleString("en")} downloads` ); const month = year .append("g") .selectAll("g") .data(([, values]) => d3.utcMonths( d3.utcMonth(formatIso(values[0].date)), formatIso(values[values.length - 1].date) ) ) .join("g"); month .filter((d, i) => i) .append("path") .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 3) .attr("d", pathMonth); month .append("text") .attr( "x", (d) => timeWeek.count(d3.utcYear(d), timeWeek.ceil(d)) * cellSize + 2 ) .attr("y", -5) .text(formatMonth); return svg.node(); }34:[{"id":"54dbeeb53277e9f2f061b7fc6e558389ccae3d87fc00a35498ac641cb6c11c3854a58ce3595d5f08e14b90ad9a79ac7d35c6b855f295540e584231a3133d0099","href":"https://static.observableusercontent.com/files/54dbeeb53277e9f2f061b7fc6e558389ccae3d87fc00a35498ac641cb6c11c3854a58ce3595d5f08e14b90ad9a79ac7d35c6b855f295540e584231a3133d0099","name":"data.json","type":"application/json","lastModified":1619458856011.989,"size":112489}] 31:{"id":"8011767b27fb8cec","slug":"d3-js-downloads-since-2015","title":"d3.js Downloads Since 2015","thumbnail":"b532b3ae4c47aae5948ddbb812876518ffcf7e982add121efc140c2a3b465f58","access_level":"public","create_time":"$D2021-04-26T17:40:38.164Z","update_time":"$D2021-08-09T22:23:21.428Z","view_time":null,"first_public_time":"$D2021-05-03T21:41:14.324Z","has_unpublished_edits":null,"fork":{"id":"0fe69fda7e4fdacb","slug":"u-s-births-2000-2014","title":"U.S. Births, 2000–2014","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":0,"starred":false,"owner":{"type":"team","id":"24dc2152c9b33141","login":"jramadani","name":"Joanne Ramadani","avatar_url":"https://avatars-next.observableusercontent.com/48448a0993a3ccdf3074eefa56699c236402cb797c465b479b262485faeceb8a","tier":"starter_2024"},"version":636,"publish_version":636,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a74973112facf02","login":"jramadani","name":"Joanne Ramadani","avatar_url":"https://avatars-next.observableusercontent.com/48448a0993a3ccdf3074eefa56699c236402cb797c465b479b262485faeceb8a","tier":null}],"members":[{"type":"individual","id":"5a74973112facf02","login":"jramadani","name":"Joanne Ramadani","avatar_url":"https://avatars-next.observableusercontent.com/48448a0993a3ccdf3074eefa56699c236402cb797c465b479b262485faeceb8a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"d3.js Downloads Since 2015","cells":[{"id":0,"value":"md`# d3.js Downloads Since 2015\n\nThis visualization relies heavily on the forked code, and is essentially an exercise in exploring the npm d3 downloads data in the format of a calendar heatmap rather than pushing the boundaries of visualization.\n\nData: [from Mike Bostock's npm downloads notebook](https://observablehq.com/@mbostock/npm-daily-downloads)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"key = legend({\n color,\n title: \"Number of d3 downloads\",\n tickFormat: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"html`

Things we can learn from this data:

\n\n

People who visualize with d3 mostly do it at work

\n\n

Saturdays and Sundays pretty consistently stick around 50,000 downloads.

\n\n

The middle of the week is when people tend to program with d3

\n\n

Even when d3 wasn't as popular, you can see flare-ups happen on Tuesdays, Wednesdays, and Thursdays!

\n\n

The holiday season is (usually) a time for rest

\n\n

You can see that downloads drop off around the holiday season, but still, 175k downloads is nothing to sneeze at. Some people are still hard at work making visualizations even during the holiday season!

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"data = FileAttachment(\"data.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"formatMonth(d3.utcMonth(formatIso(years[0][1][0].date)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"years[0][1].map((d) => formatMonth(d3.utcMonth(formatIso(d.date))))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"years = d3.groups(data, (d) => formatIso(d.date).getUTCFullYear()).reverse()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"cellSize = 17","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"width = 954","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"height = cellSize * (weekday === \"weekday\" ? 7 : 9)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"weekday = \"monday\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"timeWeek = weekday === \"sunday\" ? d3.utcSunday : d3.utcMonday","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"countDay = weekday === \"sunday\" ? i => i : i => (i + 6) % 7","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"function pathMonth(t) {\n const n = weekday === \"weekday\" ? 5 : 7;\n const d = Math.max(0, Math.min(n, countDay(t.getUTCDay())));\n const w = timeWeek.count(d3.utcYear(t), t);\n return `${d === 0 ? `M${w * cellSize},0`\n : d === n ? `M${(w + 1) * cellSize},0`\n : `M${(w + 1) * cellSize},0V${d * cellSize}H${w * cellSize}`}V${n * cellSize}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"formatIso = d3.utcParse(\"%Y-%m-%dT%H:%M:%S.%LZ\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"formatDate = d3.utcFormat(\"%x\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"formatDay = i => \"SMTWTFS\"[i]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"formatMonth = d3.utcFormat(\"%b\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"color = d3.scaleSequential(\n d3.extent(data.map((d) => d.value)),\n d3.interpolateTurbo\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"