31:[] 2f:{"title":"30DayChartChallenge Recap","cells":[{"id":0,"value":"md`# 30DayChartChallenge Recap\n\nGallery preview of a collection, and with notebook pagination.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"keyBindings","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"\nslide.html`\n

30 Data stories from April

Tereza Iofciu

\n
\n

Head Coach Data Science at neuefische \n

\n\n

Presented at ByteAdventures

pronouns: she/her \n
content warning: ⚠️ politics\n
Slides\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"slide.html`\n\n $\"0DayChartChallenge\"$ \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"animation = md`### 30DayChartChallenge\n\nContributions to the challenge in April 2021.\n\n${previews(listings.map(d => {\n return {\n path: \"@\"+d.creator.login+\"/\"+d.slug,\n thumbnail: d.thumbnail,\n title: d.title,\n author: d.creator.login\n }\n})\n \n )}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"In order to browse through the notebooks, click on next:","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"viewof viz = Inputs.button([\n [\"Reset\", value => 0],\n [\"Previous\", value => (value - 1)%listings.length],\n [\"Next\", value => (value + 1)%listings.length],\n], {value: 0, label: \"Visualization\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"{\n await visibility();\n const s = html`

${await renderNotebook(\"@terezaif/\"+listings[viz].slug)}`;\n yield s;\n // Focus triggers spellcheck (at least in Chrome).\n //setTimeout(() => {s.focus(), setTimeout(() => s.blur(), 0)}, 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"slide.md`# What is next?\n\n- More charts, starting the challenge at weekly level\n- TidyTuesday\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"## Getting the data\n\nThis is a collection browser, for each collection the json metadata containst information about the notebooks, title, author and thumbnails. You can get that from the Json api view and you need the CORS proxy in order to access it from your notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":115,"value":"listings = collection.listings","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"md`To get the metadata of your collection, create the api uri like https://api.observablehq.com/collection/@terezaif/30daychartchallenge`","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"collection = fetchp(\"https://api.observablehq.com/collection/@terezaif/30daychartchallenge\")\n .then(function(response){\n return response.json();\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"// some extra styling to make it my own\n// I personally use the built-in serif fonts on Observable, but Roboto is popular...\n\nhtml``","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"style","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"import {previews} from '@d3/gallery'","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"import {fetchp} from '@tomlarkworthy/fetchp'","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"import {renderNotebook} from \"@mootari/typo\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"import { slide, notes, style, keyBindings } from '@visnup/slides'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}