29:null 2a:["$","title",null,{"children":"Fur Shades in Zürich | Luc Guillemot | Observable"}] 2f:T7c0,dogPictogram = ``30:[{"id":"12fae4b00585bffc9034a9d2dc3e3127267260041386c5049c7dd8e4c3b4721fa49f1e0fb63f8e0dcce2df8495e9202a750df0a603860a36362a60506a8ab548","href":"https://static.observableusercontent.com/files/12fae4b00585bffc9034a9d2dc3e3127267260041386c5049c7dd8e4c3b4721fa49f1e0fb63f8e0dcce2df8495e9202a750df0a603860a36362a60506a8ab548","name":"dogs@2.csv","type":"text/csv","lastModified":1618125703036.944,"size":365},{"id":"5ab0399b288442a8e520f5e693bff1e8ffddfa393fcf22d24e5437811e3207c073e40b9c81515d02cd56a0e6d35c762e5469b77c3c1b03783b2eb8e3ceb04543","href":"https://static.observableusercontent.com/files/5ab0399b288442a8e520f5e693bff1e8ffddfa393fcf22d24e5437811e3207c073e40b9c81515d02cd56a0e6d35c762e5469b77c3c1b03783b2eb8e3ceb04543","name":"dogs@3.csv","type":"text/csv","lastModified":1618125825182.781,"size":365},{"id":"9bd2331a9ffb392e2d495418894d113143315277a07dbb9a971999aa0ccc84d7be5273f980a124874cd974677e31a3491df524ab890c4a2b473f4e5f80ca3826","href":"https://static.observableusercontent.com/files/9bd2331a9ffb392e2d495418894d113143315277a07dbb9a971999aa0ccc84d7be5273f980a124874cd974677e31a3491df524ab890c4a2b473f4e5f80ca3826","name":"dogs@1.csv","type":"text/csv","lastModified":1617970480929.878,"size":365}] 2d:{"id":"674bdf263091a404","slug":"dog-colors-in-zurich","title":"Fur Shades in Zürich","thumbnail":"05bfdab8bec9d2c4217697b8b439381d893ecbc6ff168ef16ccc9b7f854863b9","access_level":"public","create_time":"$D2021-04-09T11:29:31.465Z","update_time":"$D2021-04-11T07:49:35.567Z","view_time":null,"first_public_time":"$D2021-04-11T07:10:51.756Z","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":342,"publish_version":342,"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":0,"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":"Fur Shades in Zürich","cells":[{"id":0,"value":"md`# Fur Shades in Zürich\nDistribution of fur color in the dog population of Zürich. Areas are about proportional to the number of dogs in zürich in 2020.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"swatches({ color: colorScale })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"html`\n

\n ${data\n .sort((a, b) => d3.ascending(a.order, b.order))\n .map(\n dog => `

.55 ? \"black\" : \"white\"\n }; background: ${dog.color}; border: 1px solid ${darken(dog.color)}\">\n ${d3\n .range(dog.total / 10)\n .map(d => dogPictogram)\n .join('')}\n

`\n )\n .join('')}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"attribution({\n source: {\n label: \"Zürich Open Data - Hundebestand der Stadt Zürich (2020)\",\n link: \"https://data.stadt-zuerich.ch/dataset/sid_stapo_hundebestand\"\n },\n note: 'There are 185 different colors listed in the dataset, colors with less than 100 dogs are categorized under \"Other\".',\n day: \"10\",\n category: \"Distribution\",\n prompt: \"Abstract\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"colorScale = d3\n .scaleOrdinal()\n .domain([\n ...new Set(\n data.sort((a, b) => d3.ascending(a.order, b.order)).map(d => d.main)\n )\n ])\n .range([...new Set(data.map(d => d.color))])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"function darken(color, k = 1) {\n const {l, c, h} = d3.lch(color);\n return d3.lch(l - 18 * k, c, h);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"getTranslucentColor = color => {\n const c = d3.color(color);\n const translucent = `rgba(${c.r}, ${c.g}, ${c.b}, .2)`;\n return translucent;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"md`Icon: [_Dog_ at the Noun project](https://thenounproject.com/search/?q=dog&i=364)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"data = d3.csvParse(await FileAttachment(\"dogs@3.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":false,"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":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":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"