24:null 25:["$","title",null,{"children":"Reflections on 2022's 30 Day Chart Challenge | Priya | Observable"}] 2a:[{"id":"b2e9a845f5c6895bc24bd6f819cb87191bb1ce4f314ccd86df1935859708bfe76fc652fb38244d0e62f49c2cadecc2e4ccee510f69978e39b983bd315625dc6e","href":"https://static.observableusercontent.com/files/b2e9a845f5c6895bc24bd6f819cb87191bb1ce4f314ccd86df1935859708bfe76fc652fb38244d0e62f49c2cadecc2e4ccee510f69978e39b983bd315625dc6e","name":"day4sketches.png","type":"image/png","lastModified":1651494575651.747,"size":222977},{"id":"d06d8f82116a92fdbb5048dad81f283bf5f42b91c3573fe9d50d230836057b147f9c6116850265a6e722ee29a1db02444f043f515b74e4923fbc9a2466405886","href":"https://static.observableusercontent.com/files/d06d8f82116a92fdbb5048dad81f283bf5f42b91c3573fe9d50d230836057b147f9c6116850265a6e722ee29a1db02444f043f515b74e4923fbc9a2466405886","name":"flowersketch.png","type":"image/png","lastModified":1651493900091.262,"size":446439},{"id":"350c2a9f7e03f18991d816cc7e45f93c852d1f44cc2114feab881298cfcb1d4a2e0d18ad6bffaf7436e65bce48e5cb5002296fac05c6305a3dcba5163aa6dce4","href":"https://static.observableusercontent.com/files/350c2a9f7e03f18991d816cc7e45f93c852d1f44cc2114feab881298cfcb1d4a2e0d18ad6bffaf7436e65bce48e5cb5002296fac05c6305a3dcba5163aa6dce4","name":"munsell.png","type":"image/png","lastModified":1651495574990.254,"size":85814},{"id":"e90d2a8226a5ab774da04e689fc404f2a5e96564067b6a27b965fc6e7e1588d3ba9715ce583f0bc83ae2fe2840c78061596fd97b91080b030e20eb73164d4218","href":"https://static.observableusercontent.com/files/e90d2a8226a5ab774da04e689fc404f2a5e96564067b6a27b965fc6e7e1588d3ba9715ce583f0bc83ae2fe2840c78061596fd97b91080b030e20eb73164d4218","name":"30day2022.png","type":"image/png","lastModified":1651497405507.163,"size":697632},{"id":"a8793a839d483fb6185cfe0a32f7c97da6e9c55f4f55d52891ba3e2baf7d006d488ba7aac3e1c4df56b1309fbb9e3b00b1f50cb1c14d1b44a03a728109544248","href":"https://static.observableusercontent.com/files/a8793a839d483fb6185cfe0a32f7c97da6e9c55f4f55d52891ba3e2baf7d006d488ba7aac3e1c4df56b1309fbb9e3b00b1f50cb1c14d1b44a03a728109544248","name":"volcanofake.png","type":"image/png","lastModified":1651497097307.835,"size":67828},{"id":"3269bca3648383234728b4d41f37611fc393e5d471cad4532d1f0a5a3bae10a6d3ec4b1951b1add2ab6db473a998eea6ce7204f51aefbda2e48fb8decb7f9c54","href":"https://static.observableusercontent.com/files/3269bca3648383234728b4d41f37611fc393e5d471cad4532d1f0a5a3bae10a6d3ec4b1951b1add2ab6db473a998eea6ce7204f51aefbda2e48fb8decb7f9c54","name":"AtlasofAmerican Agriculture_1936.jpeg","type":"image/jpeg","lastModified":1651495017852.199,"size":606823}] 28:{"id":"5ba2c1706b664cb3","slug":"reflections-on-2022s-30-day-chart-challenge","title":"Reflections on 2022's 30 Day Chart Challenge","thumbnail":"f617de563f38491348c9d193e95c9c547906862631b8540f12e13bd0053420a3","access_level":"public","create_time":"$D2022-05-02T11:53:11.827Z","update_time":"$D2024-08-30T04:27:15.446Z","view_time":null,"first_public_time":"$D2022-05-02T13:17:13.708Z","fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"55e4f5b506df3eb3","login":"pmisner","name":"Priya","avatar_url":"https://avatars-next.observableusercontent.com/0f5c4cef9ffaa3856416deff8fc4d56f5003aa9547ee21b9be46a17eba103c07","tier":"starter_2024"},"version":259,"publish_version":259,"role":null,"authored":false,"authors":[{"type":"individual","id":"bfd761aeef223349","login":"pmisner","name":"Priya","avatar_url":"https://avatars-next.observableusercontent.com/0f5c4cef9ffaa3856416deff8fc4d56f5003aa9547ee21b9be46a17eba103c07","tier":null}],"members":[{"type":"individual","id":"bfd761aeef223349","login":"pmisner","name":"Priya","avatar_url":"https://avatars-next.observableusercontent.com/0f5c4cef9ffaa3856416deff8fc4d56f5003aa9547ee21b9be46a17eba103c07","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"9c8233b3741da0d0","slug":"2022-thirty-day-chart-challenge","title":"2022 Thirty Day Chart Challenge","owner":{"id":"55e4f5b506df3eb3","login":"pmisner","name":"Priya"}},"type":"notebook","body":{"title":"Reflections on 2022's 30 Day Chart Challenge","cells":[{"id":0,"value":"# Reflections on 2022's 30 Day Chart Challenge","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":252,"value":"

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"This was my second year participating in twitter's #30DayChartChallenge. Last year, my goal was simply to post my charts to the public but this year I really wanted to push myself and build my visualizations with d3 as much as possible. To accomplish this, I created a collection of Observable notebooks helped me keep my work organized, get inspired and prototype visualization for the tight timeline.\n\nWhile I definitely didn't keep up with the daily challenge schedule (I posted #Day11's chart on April 30th 😅), the incredible work I saw produced by everyone who participated kept me both inspired and motivated. I find I operate best under a little bit of peer pressure as well as a box to think outside of, and #30DCC was the perfect platform for that. I loved that this challenge forced me to produce work quickly, not get too hung up on the small details and let me experiment with a variety of styles and subjects over the month. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"To reflect on this challenge, I want to take a deeper dive into the process behind two charts I created, what I learned from them as well as what I wasn't able to get to this year!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"## From a Vibe to A Visualization: Cherry Blossoms","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"Usually when creating a visualization, I start with a dataset and go from there. Since I use the #30DayChartChallenge purely for personal exploration, I sometimes started the process backwards and began with a vision of the chart type I want to create and looked for data to fit into my vision.\n\nFor example, with #Day4's cherry blossom visualization, I really wanted to work with gradients, and use their intensity to convey the passage of time. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"tweet(\"1511711423323422744\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"I had visited the New York botanical gardens at the start of the flowering of the daffodils and really wanted to capture that feeling of spring when the first flower bloom: you see a single flower or two and then it suddenly the blooms pick up speed and suddenly there is an explosion of color. I sketched out my vision in Figma as a starting point","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"In Figma, I sketched out the feeling I wanted to convey and tried to find a dataset for the blooming status of various flowers in New York City. While I was able to find a couple resources describing the period of bloom for various spring flowers, none of them had the level of detail I was looking for. After some more hunting, I found the [National Park Service's website describing the bloom status of cherry blossoms in Washington DC](https://www.nps.gov/subjects/cherryblossom/bloom-watch.htm_). The data was small enough for me to simply read through, so after glancing through it, I made a couple sketches to figure out the design direction I wanted to go in. Once I landed on something I was happy with, I headed over to Observable to start building the chart. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"Almost immediately, I hit a road block- how was I supposed to get the blur effect in the svg that I had mocked up? CSS sure wasn't working. A quick search on observable led me to two great notebooks () that helped me figure out that I needed to use svg filters like feGaussian to achieve the desired effect. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"With my initial technical roadblocks worked through, I made the entire visual along with the x axis using d3 inside Observable but exported the svg to Figma for the styling of the text and legend in the interest of time. If I were to come back and clean this visualization up, I would definitely add in the text and legend programmatically as well as fix the issue with this only working in Chrome!\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"

🌸 Check out the #Day4 Cherry Bloom Calendar notebook here!🌸

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"## A Chart in Parts: State Soils","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"A visualization that followed a slightly more traditional, dataset first approach was my map of state soils of the United States. While scrolling through Pinterest, I stumbled upon the following chart of soil color from the Atlas of American Agriculture of 1936. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"I was immediately hooked and spent significant time falling down the (very very) deep rabbit hole of soil as the some of my text messages to my friends illustrate.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"In my research, I stumbled upon the USDA's usefully named [Official Soil Series Descriptions](https://soilseries.sc.egov.usda.gov/) website of soil with highly detailed information about the properties of various soils and most important to me, detailed the color, texture and depth data for every single state soil type. As I explored this data, the idea of a tile map of the US with each state being represented by their soil became to form in my head. All that was left was the execution.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"To get from the official soil series description to a visualization was a several step process. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"

🟤 Check out the #Day8 State Soil Map here!🟤

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":143,"value":" Step 1: Munsell to RGB Color Space ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":149,"value":" All soil colors were in Munsell color notation- a new concept for me. After a bit of Wikipedia research as well as the dataset provided Rochester Institute of Technology, I knew I needed to convert from Munsell into the rgb color space. \n \n Relying heavily on the Jacob Bus’ fantastic Munsell spin notebook, I wrote a function that took in the hue, value and chroma of the soil and spit out the matching hex code! ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":165,"value":"

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"Step 2: A Failed Attempt at Soil Textures ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"To represent the soil as accurately as possible, I attempted to procedurally generate common soil textures (like clay, sand and silt). I was able to make some progress on this ([check it out here!](https://observablehq.com/@pmisner/day-4-cherry-bloom-calendar?collection=@pmisner/2022-thirty-day-chart-challenge)) but quickly realized this was taking more time than I had availabke. Something to come back and visit!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"Step 3: Tile Map ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"To keep my code clean, I kept my Munsell explorations and calculations in one notebook and use Observable's import feature to access getSoilColor() function into the notebook where I created my state soil map. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":205,"value":"As with the cherry blossom chart, while I created this chart inside Observable, I exported the svg to do final styling in Figma before posting on twitter. I put so much thought and effort into this visualization, so I was incredibly touched and thankful for all the responses and kind words from the twitter community!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":210,"value":"tweet(\"1515289147904299010\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"## Final Thoughts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"Even though I’ve been a very enthusiastic user of Observable, I think over the course of this project was when I really glimpsed the full potential with the platform. Features such as the built in views (like dropdown menus and checkboxes) made it so easy to filter and play with my data. Organizing the various stages of my project into separate notebooks kept my thoughts organized but I loved how easy it was to import functions from one place to another. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":234,"value":"Over the course of the #30DayChartChallenge, I loved getting to experiment with different chart types (voronoi map! pie charts (haha)! 3D Bar Charts!) and trying out things like CSS transforms and Observable's Plot for the first time. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"The one visualization I really wanted to do but couldn't was somehow representing volcanos and their magma + lava content as a pie chart. If anyone know of a dataset around this, please let me know- illustrative pie charts are my weakness 😄","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":229,"value":"A big thank you to my family for being the first people to like my posts basically every time, I see you!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"import { tweet } from \"@mbostock/tweet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2a","stdlib":"1","titling":"auto"}} 29:"$28:body"