31:T8a5e,svg` `32:T8a5e,svg` `33:T8a5e,svg` `34:T8a5e,svg` `35:T8a5e,svg` `36:T8a5e,svg` `37:[] 2f:{"title":"P5 Process Proposal","cells":[{"id":0,"value":"md`# P5 Process Proposal`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`\nHere are some notes on my process of prototyping a data visualization within Observable.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"md`\nThis is meant to be informative, not prescriptive!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`---\n# 1. Point`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"md`\nTo start our journey, we want to **point** ourselves in the right direction. It's tempting to jump right in and start looking at the data and coding, but it's easy to charge off in the wrong direction.\n\nWe actually have a benefit here: our beginner's mind. You can't un-see a visualization once you've seen it.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`\nTo focus ourselves, let's answer one question:\n## **What is the main goal of this visualization?**\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`---\n# 2. Process`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`\nNext up, we want to **process** any available data. What datasets are available and will they answer our question?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`\nOnce we've scrounged up a dataset, we'll want to look at:\n- what metrics does it include?\n- what type of metrics are these? (categorical, ordinal, continuous...)\n- how many of the values are empty or unuseable? Does it need a processing step?\n- what does the distribution of these metrics look like?\n- what metrics correlate with each other?\n\nThis inquiry is done with our main question in the back of our minds - can we answer it with this dataset?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"md`If helpful, fork an exploration stub to dig in:\n- Flat datasets: https://observablehq.com/@wattenberger/exploration-flat\n- Hierarchical datasets: https://observablehq.com/@wattenberger/exploration-hierarchical`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`\nI plan on these being _living_ stubs and building them out as I use them. Please fork and make them your own!\n\nRemember:\n- your process is an evolving thing\n- generalize where you can\n- don't do things from scratch more than thrice\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`## Quick brainstorming sketches`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`\nOnce we feel comfortable with our dataset, sketch out a few visualization directions to explore. Ideally, use pencil & paper to keep things loose and prevent from pursuing ideas that are \"easier to code\". These should be very _low fidelity_ - don't depend on the data having a certain structure.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`---\n# 3. Prototype`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`\nLet's dig in! This is where we get to coding.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"md`\nChoose one of those visualization ideas and code it up in your Exploration notebook. Keep in mind that things should be _loose_:\n- prototypes are rough\n- you're making these charts to answer a question for _yourself_\n- you can always refactor later\n- exploratory viz vs explanatory viz\n\nSome shortcuts here:\n- play with values using inputs\nhttps://observablehq.com/collection/@observablehq/libraries\n- curate a set of utility functions that help with manipulating data\n- curate a set of utility functions that help with drawing charts\nhttps://observablehq.com/@wattenberger/chart-utility-functions\n- grab an existing chart\n- pull in charts _within_ another chart, using the native \\`.append()\\` method\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"scales = {\n const wrapper = d3.create(\"div\")\n \n const scales = [\"interpolatePuBu\", \"interpolateRdYlGn\", \"interpolateViridis\", \"interpolateTurbo\"]\n \n scales.forEach(colorScale => {\n const element = legend({\n color: d3.scaleSequential(d3[colorScale])\n .domain([0, 1]),\n title: colorScale,\n width: 500,\n })\n wrapper.node().append(element)\n })\n \n return wrapper.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"md`` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"md`## Getting feedback`","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"md`\nSince data visualization is all about _communicating data_, it's crucial to get feedback from naive eyes before we're too far along. Early & often.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"md`## Repeat!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"md`\nWhile you're waiting on feedback, step back and see if you can view the visualization with a newcomer's eyes. I guarantee there are things that could use some clarification.\n\nAnd once the round of feedback is done, repeat this step! Either update the visualization or start a fresh one. We're prototyping here, so don't be afraid to get a little crazy!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"md`\nThere are a few Observable features that are super helpful here:\n- version history, with _Published_ annotations\n- Forking notebooks\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`---\n# 4. Polish`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`\nOnce we've decided on a visual format, it's time to **polish**.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"md`\nWe have a few options here:\n\n- If we're happy staying in Observable, wonderful! Just keep polishing, maybe moving to an isolated notebook.\n\n- If we're looking for a static visual, download the chart as a **png** or **svg**.\n\n- If we want to export just our chart, we can polish in Observable then either **Download code** or import it using the Observable Runtime: https://github.com/observablehq/runtime.\n\n- Otherwise, we can re-create our chart in our code environment of choice. Depending on how complex your visualization is, this might take a bit, which is why we're exporting _before_ polishing! Ideally, this is fairly quick, since we have a clear direction of where we're going, and the code reference.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"md`---\n# 5. Profit`","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"md`🤷‍♀️`","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"d3 = require(\"d3@5\", \"d3-delaunay@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}