2a:null 2b:["$","title",null,{"children":"30DayChartChallenge 2022 Recap | Tereza Iofciu | Observable"}] 30:Ta2b,stories = [ "I was looking at my house plants.. and got curious how many people have plants.. It turns out that there is only a US survey available", "Bold title, unreliable data. But I did find inspiration on Maya Gans's notebook on how to do work with pictograms. This also came in handy in subsequent days", "I was shocked to find so few days of peace. The main challenge was calculating the proportions.. from days to area", "Ended up manually labeling the gender for 4 wikipedia pages.. cannot recommend.. especially as men in the 1700s had what we would consider women names now", "I still don't really enjoy slope charts.. could not find a way to make it pretty", "The choices for what to show were based on the looks .. trying to avoid stating the obvious, but if I have to.. then it should look interesting", "The data was originally meant for another day, but then I had to keep it for physical and then ran into the problem that it wasn't the obvious distribution data one might use... Beeswarm are cool, I will be recycling this again on the Trees day.", "This was an unexpectedly hard to find dataset, just one little UN Report, though I would have expected it to be on our world in data. Then next challenge was doing triangles.. they are polygons in D3. And then all the text is manually added to the chart by figuring out coordinates", "Idea: Heated debate on twitter on a chart based on export data on how the axes should be. I got curious on how I would plot it. Then I found a really cool notebook on distributions", "I discovered the OEC datasource in the previous chart.. and for experimental went with sunflowers.. Again found a cool notebook on ridgeline plots that was very customizable.. so really tricky to find the right perspective. Thus no labels", "Originally wanted to do the overlap one and then thought it doesn't actually convey information.. so went with the grid (which I had done before for nyc parks). This one got some hate speach on twitter..", "This really destroyed my vibe and style, as I really liked the style I was developing. Had to do lots of research for getting data and somehow decided to do a birthday temperature check. The Idea was then picke up by a journalist in Germany for RND.", "The tricky part here was how to use all these colors and still make it ok for color blind people", "This was really blocking me.. as I am not a fan of 3D charts.. Maxene Graze, one of the observable ambassador give me a good idea on how use a 3D element and vs making it all 3D.. the meeple was the only one I found on thenounproject" ]31:[] 2e:{"id":"49585011e7873145","slug":"30daychartchallenge-2022-recap","title":"30DayChartChallenge 2022 Recap","thumbnail":"ace255071c5e1818ad0bbfaaa6a7dcc480d5ed2948e8778841170f33d87df9d0","access_level":"public","create_time":"$D2022-06-13T12:53:26.048Z","update_time":"$D2022-06-14T16:12:40.715Z","view_time":null,"first_public_time":"$D2022-06-14T15:40:52.807Z","has_unpublished_edits":null,"fork":{"id":"78d7d7896d0d7042","slug":"30daychartchallenge-recap","title":"30DayChartChallenge Recap","owner":{"id":"bcfdd45295e26854","login":"terezaif","name":"Tereza Iofciu"}},"stars":9,"starred":false,"owner":{"type":"team","id":"bcfdd45295e26854","login":"terezaif","name":"Tereza Iofciu","avatar_url":"https://avatars-next.observableusercontent.com/226f3cb624f4054ae9dc13ea08fbbc3e6927e81037fb0558ac27d1b27bc1b384","tier":"starter_2024"},"version":389,"publish_version":389,"role":null,"authored":false,"authors":[{"type":"individual","id":"30151ae41f7fc118","login":"terezaif","name":"Tereza Iofciu","avatar_url":"https://avatars-next.observableusercontent.com/226f3cb624f4054ae9dc13ea08fbbc3e6927e81037fb0558ac27d1b27bc1b384","tier":null}],"members":[{"type":"individual","id":"30151ae41f7fc118","login":"terezaif","name":"Tereza Iofciu","avatar_url":"https://avatars-next.observableusercontent.com/226f3cb624f4054ae9dc13ea08fbbc3e6927e81037fb0558ac27d1b27bc1b384","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"30DayChartChallenge 2022 Recap","cells":[{"id":0,"value":"md`# 30DayChartChallenge 2022 Recap\n\nGallery preview of a collection, and with notebook pagination.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"slide.html`\n

15 Data Stories in April 2022

- 14 June 2022 - Data Umbrella

Tereza Iofciu

\n
\n

Head Coach Data Science at neuefische \n

\n\n

pronouns: she/her \n
Collection\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"slide.html`\n\n $\"30DayChartChallenge\"$ \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"slide.md`# Goal in participating\n\n- Last year: to learn D3.js\n- This year: \n - Learning in public and also getting motivated seeing the community being so active.\n - Develop a simple style based on Wes Anderson colors (after watchign the French Dispatch)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"slide.md`# Why observable?\n\n- an active community \n- inspiration: searching with keywords or browsing can lead to new ideas\n- getting feedback on notebooks, people can easily add suggestions to notebooks\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"animation = md`### 30DayChartChallenge 2022\n\nContributions to the challenge in April 2022.\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"In order to browse through the notebooks, click on next:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"notes.md` \n\n${stories[viz]}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"slide.md`# Take aways\n\n- Limit the number of messages: I went for 1 main plus 1 general\n- Have a bold title that catches the audience attention and holds an answer\n- Be mindful: there's often a tradeoff between pretty data viz and not distorting reality\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"listings = collection.listings.sort((a, b) =>\n d3.ascending(a.publish_time, b.publish_time)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"collection = fetchp(\n \"https://api.observablehq.com/collection/@terezaif/30daychartchallenge2022\"\n).then(function (response) {\n return response.json();\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"style","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"keyBindings","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"import {previews} from '@d3/gallery'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"import {fetchp} from '@tomlarkworthy/fetchp'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"import {renderNotebook} from \"@mootari/typo\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"import { slide, notes, style, keyBindings } from '@visnup/slides'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"