28:null 29:["$","title",null,{"children":"Pandemic Running | Luc Guillemot | Observable"}] 2e:[{"id":"dd5b41dc5ff2357a69ff963af7db7f2f739e2a0eb0de1a158658097c359d7a9244c77ecfd10559295120ecb0b3823aefd8200413feb865296f6986dc2f756c84","href":"https://static.observableusercontent.com/files/dd5b41dc5ff2357a69ff963af7db7f2f739e2a0eb0de1a158658097c359d7a9244c77ecfd10559295120ecb0b3823aefd8200413feb865296f6986dc2f756c84","name":"distances.csv","type":"text/csv","lastModified":1617953738113.656,"size":531}] 2c:{"id":"085cc4cc030947ac","slug":"pandemic-running","title":"Pandemic Running","thumbnail":"760b360f0d2c139925da27945260a9a578fd09203b60ab8d57150689efcd5911","access_level":"public","create_time":"$D2021-04-09T07:34:20.063Z","update_time":"$D2021-05-07T08:40:46.117Z","view_time":null,"first_public_time":"$D2021-04-09T13:35:06.516Z","has_unpublished_edits":null,"fork":{"id":"3c31ae9c4462b0e9","slug":"starter/2","title":"Starter","owner":{"id":"4eed1ed0ec8c7a2c","login":"lucguillemot","name":"Luc Guillemot"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4eed1ed0ec8c7a2c","login":"lucguillemot","name":"Luc Guillemot","avatar_url":"https://avatars-next.observableusercontent.com/692f83824eae0715a07f9a04941a73318aad7b915db8ddda53058c392957fc6f","tier":"starter_2024"},"version":179,"publish_version":179,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbce705bc4e76709","login":"lucguillemot","name":"Luc Guillemot","avatar_url":"https://avatars-next.observableusercontent.com/692f83824eae0715a07f9a04941a73318aad7b915db8ddda53058c392957fc6f","tier":null}],"members":[{"type":"individual","id":"dbce705bc4e76709","login":"lucguillemot","name":"Luc Guillemot","avatar_url":"https://avatars-next.observableusercontent.com/692f83824eae0715a07f9a04941a73318aad7b915db8ddda53058c392957fc6f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"2aaf9ec71cbec838","slug":"30-day-chart-challenge-2021","title":"30 Day Chart Challenge 2021","owner":{"id":"4eed1ed0ec8c7a2c","login":"lucguillemot","name":"Luc Guillemot"}},"type":"notebook","body":{"title":"Pandemic Running","cells":[{"id":0,"value":"md`# Pandemic Running\n\nOne of the ways of coping with isolation that worked for me during the pandemic is running. I have run more often in ${highlightedText(\n { background: colorScale(\"2020\"), text: \"2020\" }\n)}, and longer distances, than previous years.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"swatches({ color: colorScale })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margins.left}, ${margins.top})`)\n .selectAll(\"path\")\n .data(byYear)\n .join(\"path\")\n .attr(\"fill\", d => colorScale(d[0]))\n .attr(\"fill-opacity\", .1)\n .attr(\"d\", d => area(d[1]));\n\n svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margins.left}, ${margins.top})`)\n .selectAll(\"path\")\n .data(byYear)\n .join(\"path\")\n .attr(\"stroke\", d => colorScale(d[0]))\n .attr(\"stroke-width\", 2)\n .attr(\"fill\", \"none\")\n .attr(\"d\", d => line(d[1]));\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"attribution({\n source: { label: \"Strava\" },\n day: \"07\",\n category: \"Distribution\",\n prompt: \"Physical\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"area = d3\n .area()\n .curve(d3.curveBasis)\n .x(d => xScale(d.bins))\n .y0(yScale(0))\n .y1(d => yScale(d.n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"line = d3\n .line()\n .x(d => xScale(d.bins))\n .y(d => yScale(d.n))\n .curve(d3.curveBasis)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"colorScale = d3\n .scaleOrdinal()\n .domain(byYear.map(d => d[0]))\n .range([\"#B6AFE7\", \"#AFE4D3\", \"#FFB700\", \"#EBAE86\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(${margins.left}, ${height - margins.bottom})`)\n .call(\n d3\n .axisBottom(xScale)\n .ticks(width / 80)\n .tickSizeOuter(0)\n )\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", bounds.chartWidth)\n .attr(\"y\", margins.bottom - 4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Distance (km)\")\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"xScale = d3\n .scaleLinear()\n .domain(d3.extent(data, d => d.bins))\n .range([0, bounds.chartWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margins.left},${margins.top})`)\n .call(d3.axisLeft(yScale).ticks(10))\n //.call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 3)\n .attr(\"dy\", -6)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Number of runs\")\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"yScale = d3\n .scaleLinear()\n .domain([0, d3.max(data, d => d.n)])\n .range([bounds.chartHeight, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"byYear = d3.groups(data, d => d.year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"data = d3.csvParse(await FileAttachment(\"distances.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`## Visualization Assets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"bounds = ({ margins, \n chartWidth: width - margins.left - margins.right, \n chartHeight: height - margins.top - margins.bottom })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"margins = ({top: 40, right: 20, bottom: 40, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`## Libraries & Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"attribution = ({\n source,\n note,\n day,\n category,\n prompt\n}) => md`

**#30DayChartChallenge** | ${day} | ${category} | ${prompt}

\n ${note ? `

${note}

` : \"\"}\n

**Source**: ${\n source.link ? `[${source.label}](${source.link})` : source.label\n}

**Creator**: [Luc Guillemot](https://lucguillemot.com/)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"highlightedText = ({ background, color, text }) =>\n html` ${text}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"formatPercentage = d3.format(\".1%\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"formatThousands = d3.format(\",\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"