24:null 25:["$","title",null,{"children":"Data Visualization First Steps | Anjana Vakil | Observable"}] 2a:T402,slide.md`## Further reading & resources ### How - Observable Plot [cheatsheets](https://observablehq.com/@observablehq/plot-cheatsheets), [intro notebooks](https://observablehq.com/collection/@observablehq/plot), [API documentation](https://github.com/observablehq/plot) & [video tutorial](https://youtu.be/SnLBbbQzK1E) - Frontend Masters [Data Visualization with D3.js](https://frontendmasters.com/learn/d3-js/) path - University of Washington's [Data Visualization Curriculum](https://observablehq.com/collection/@uwdata/visualization-curriculum) - Workshop on [Analyzing Time Series Data](https://observablehq.com/@observablehq/timeseries-workshop-materials?collection=@observablehq/analyzing-time-series-data) - Observable [Events](https://www.meetup.com/observablehq/), [Forum](https://talk.observablehq.com), [Docs](https://observablehq.com/documentation), [Tutorials](https://observablehq.com/tutorials), [Examples](https://observablehq.com/explore) - [Outlier conference](https://www.outlierconf.com/) recordings `2b:[{"id":"23aa8af5893ae63e36350a12e4a56ad222a616ded81b4ad36e009657c2875f9972e154b92948d03c13a116c39117ebafcb35a71f70aceacb7297c6858cefdd41","href":"https://static.observableusercontent.com/files/23aa8af5893ae63e36350a12e4a56ad222a616ded81b4ad36e009657c2875f9972e154b92948d03c13a116c39117ebafcb35a71f70aceacb7297c6858cefdd41","name":"image@1.png","type":"image/png","lastModified":1650309925695.716,"size":5007},{"id":"d6ca67f65c0285b1ba09ac8537a475e41e4d0618b631fcaa8c97fad63248e722e93c861d2da19ae25cfb1dda57d383c41cd3eb7ff59f7724e5bbe11f8dfb4b2a","href":"https://static.observableusercontent.com/files/d6ca67f65c0285b1ba09ac8537a475e41e4d0618b631fcaa8c97fad63248e722e93c861d2da19ae25cfb1dda57d383c41cd3eb7ff59f7724e5bbe11f8dfb4b2a","name":"image.png","type":"image/png","lastModified":1650309925695.716,"size":47438}] 28:{"id":"d4af590e7c2fc87b","slug":"data-visualization-first-steps","title":"Data Visualization First Steps","thumbnail":"8f81ce78cb9620a2b665d1a2e1ce778845edd5f60f49b2972f07cdf32db0c5fe","access_level":"public","create_time":"$D2022-04-18T19:25:25.695Z","update_time":"$D2022-05-11T21:45:34.209Z","view_time":null,"first_public_time":"$D2022-04-19T14:10:22.063Z","fork":{"id":"7073818d1bf89026","slug":"data-viz-for-web-devs","title":"Data Visualization for Web Developers","owner":{"id":"8cc6a24956698638","login":"anjana","name":"Anjana Vakil"}},"stars":41,"starred":false,"owner":{"type":"team","id":"8cc6a24956698638","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":"starter_2024"},"version":663,"publish_version":663,"role":null,"authored":false,"authors":[{"type":"individual","id":"d7d614fa2258860d","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":null}],"members":[{"type":"individual","id":"d7d614fa2258860d","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":39,"collection":{"id":"0e2f95806d2e575c","slug":"data-visualization-first-steps","title":"Data Visualization First Steps","owner":{"id":"8cc6a24956698638","login":"anjana","name":"Anjana Vakil"}},"type":"notebook","body":{"title":"Data Visualization First Steps","cells":[{"id":23,"value":"slide.md`# Data Visualization First Steps\n\n### A [Frontend Masters](https://frontendmasters.com/workshops/data-vis-first-steps/) course\n
\nby [@AnjanaVakil](https://twitter.com/AnjanaVakil)
\nDeveloper Advocate & Observable Ambassador\n\n[observablehq.com/@anjana/data-visualization-first-steps](https://observablehq.com/@anjana/data-visualization-first-steps?collection=@anjana/data-visualization-first-steps)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"slide.md`# What is Data Visualization?\n\nThe process of translating data to graphical representations\n(yawn)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":401,"value":"slide.md`# What is Data Visualization?\n\nA useful component of many web apps (e.g. dashboards)\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":398,"value":"slide.md`# What is Data Visualization?\n\nA fancy skill you can put on your resume ;)\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"slide.md`# What is Data Visualization?\n\nA way to quickly discover meaning & patterns in data...\n\n...that give you useful insights & make you better at your job\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"slide.md`# What is Data Visualization?\n\nA way to quickly discover meaning & patterns in data...\n\n...that gives you useful insights & make you better at your job\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"slide.md`## Looking at data is easy...\n...seeing meaning in it is hard!\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"slide.md`\n### **What does this data say to you?**\n\n${Inputs.table(sampleJobs)}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"slide.md(\"small\")`### How about now?\n\n${await FileAttachment(\"image.png\").image()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"slide.md`## Data Visualization for Developers: Why?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"slide.md`## Feature development:\n\nLooking at usage data informs: \n- What should we build? \n- How should we prioritize use cases? \n- How well is the feature being adopted?\n- How should we iterate on it?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"slide.md`## Performance:\n\nLooking at site & service analytics tells us: \n- How fast are we? \n- How reliable are we? \n- Where should we focus on improving?\n- How did our efforts pay off?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"slide.md`## Code & collaboration:\n\nLooking at code & contribution data helps us understand: \n- How is the codebase organized?\n- How smooth is the development workflow? \n- How productive is the development team?\n- How engaged is our contributor community? \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"slide.md`## Data Visualization for (busy!) Devs: How?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":412,"value":"slide.html`\n

${logoAndWordmark}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":224,"value":"slide.md`## Step 0: Get some data\n\n- Upload a [local file](https://observablehq.com/@observablehq/file-attachments?collection=@observablehq/working-with-data)\n- Connect to a [cloud file](https://observablehq.com/@observablehq/cloud-files?collection=@observablehq/working-with-data)\n- Connect to a [database](https://observablehq.com/@observablehq/databases?collection=@observablehq/working-with-data)\n- Fetch from an [API](https://observablehq.com/@observablehq/introduction-to-data?collection=@observablehq/working-with-data#apis)\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":550,"value":"slide.md`## Step 1: Wrangle your data\n\nReshape raw data into the content & format you need to easily answer the questions you're interested in\n\n**Array.filter()**, **.map()**, **.reduce()** are handy!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":268,"value":"slide.md`![Filter Map Reduce](https://static.observableusercontent.com/files/2f820ed5e9c8ce56f07504c382b6c126805d04edf297aaebf57f4c8c10a28556e185f26ca4a87f024182257cf6d2a8a2b31cf85d81d4fa871626715e0f16eab4)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":225,"value":"slide.md(\"\")`## Step 1: Wrangle your data\n\n[Tidy data](https://observablehq.com/@observablehq/plot-and-tidy-data) is easiest to work with\n\n

Not tidy

Tidy

\n---- | ----\n${table2.view()} | ${table1.view()}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":548,"value":"slide.md`## Step 2: Visualize your data\n\n_Scale_ abstract values from the dataset into concrete graphical values\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":236,"value":"slide.html`

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"slide.md`## JavaScript tools for DataViz\n\n- [D3.js](https://observablehq.com/collection/@d3/learn-d3)\n- [Vega-Lite](https://observablehq.com/@observablehq/vega-lite?collection=@observablehq/observable-for-vega-lite)\n- Data Wrangling: [Arquero](https://observablehq.com/@uwdata/introducing-arquero), [tidy.js](https://observablehq.com/@pbeshai/tidy-js-intro-demo)\n- & [many more](https://cube.dev/blog/dataviz-ecosystem-2021/) to choose from\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":207,"value":"slide.md`\n

\n\n### [observablehq.com/@observablehq/plot](https://observablehq.com/@observablehq/plot)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":509,"value":"slide.md`\nBased on the [grammar of graphics](https://codewords.recurse.com/issues/six/telling-stories-with-data-using-the-grammar-of-graphics)\n${previews(\n [\n {\n path: \"@observablehq/plot-marks\",\n thumbnail:\n \"17e04344c0f0cee103a18bfd0853f6af30baa28f0439d19dc231a473373ab8f5\",\n title: \"Marks\"\n },\n {\n path: \"@observablehq/plot-scales\",\n thumbnail:\n \"fc104fd0099a7333f000901b3d9a38e4b4f8a9e8bac40ffd746aab1cc9f21fa5\",\n title: \"Scales\"\n },\n {\n path: \"@observablehq/plot-transforms\",\n thumbnail:\n \"c7c6bd4e567a9e3081d3c56e19d91ddc56c4591e7d281ab601188c3018a70c5f\",\n title: \"Transforms\"\n },\n {\n path: \"@observablehq/plot-facets\",\n thumbnail:\n \"e58c30cf3f770a5b5b2c1b1cb76ac20b77dc5364c713158e044324c785233f3e\",\n title: \"Facets\"\n }\n ],\n { target: \"_blank\" }\n)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":378,"value":"slide.md`## Step 3: Share your visualization\n\nUsing Plot with:\n- Observable notebooks/embeds\n- Vanilla JS\n- React or other frameworks\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":279,"value":"projects = slide.md`## Let's jump in!\n\nToday's workshop:\n- Intro (done!)\n- [Project: Are tests passing?](https://observablehq.com/@anjana/dvfs-project-test-jobs) - Features & encoding channels\n- [Project: What size devices are users browsing with?](https://observablehq.com/@anjana/dvfs-project-device-sizes) - Aggregating & splitting data to answer the right questions\n- [Project: How fast are API responses?](https://observablehq.com/@anjana/dvfs-project-api-responses) - Interactivity\n- [Using Plot around the web](https://observablehq.com/@anjana/dvfs-using-plot-around-the-web)\n- Takeaways & next steps\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":302,"value":"takeaways = slide.md`## Takeaways\n\nData Visualization can help us web developers understand & improve our:\n - development workflows\n - user interfaces & designs\n - site performance\n - ...\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":306,"value":"slide.md`## Takeaways\n\nWe can wrangle & visualize our data with:\n- JS builtins (e.g. \\`.filter()\\`, \\`.map()\\`)\n- Lightweight visualization libraries like [Observable Plot](https://observablehq.com/@observablehq/plot?collection=@observablehq/plot)\n- Inputs for interactivity\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":311,"value":"slide.md`## Takeaways\n\nWhen creating visualizations we need to think about:\n- filtering & reshaping our data to answer our questions\n- choosing the right type of plot for our objective\n- scaling data values to display values\n- aggregating and/or faceting (or not)\n- using inputs & interactivity to help viewers explore\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"slide.md`## Further reading & resources\n\n### What & Why\n- Why Visualization Helps Developers: [blog post](https://observablehq.com/@observablehq/why-visualization-helps-developers?collection=@observablehq/data-visualization-for-developers) and [talk](https://youtu.be/uVNkPCVnG1k) by Melody Meckfessel\n- [What is Data Visualization?](https://www.tableau.com/learn/articles/data-visualization) intro guide from Tableau\n- [Data Visualization posts](https://netflixtechblog.com/tagged/data-visualization) on Netflix's engineering blog\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":497,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":323,"value":"slide.md`# Thank you!\n\nHuge thanks to: \n
Visnu Pitiyanuvath, Ian Johnson, Lauren Buchman, Mike Bostock, Melody Meckfessel, Mike Freeman, Fil Rivière, Toph Tucker, Jimmy Zhang, Ananya Roy, Duane Barlow & Team Observable\n
Marc Grabanski & Frontend Masters team\n\nTwitter: [@AnjanaVakil](https://twitter.com/AnjanaVakil), Observable: [@anjana](https://observablehq.com/@anjana), Github/CodeSandbox: [@vakila](https://github.com/vakila)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"----------\n### Appendix\n\nThe code below powers the presentation above!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":14,"value":"import { slide, notes, style, keyBindings } from \"@mkfreeman/slides\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"keyBindings","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"import { sampleJobs } from \"@observablehq/github-actions-workflows-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":254,"value":"import { table1, table2 } from \"@uwdata/tidy-data-in-javascript\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":424,"value":"import { logoAndWordmark } with {\n svgWidth as combinedSvgWidth,\n svgWidth as combinedGraphicWidth\n} from \"@observablehq/logo\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":505,"value":"import { preview } from \"@observablehq/plot\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":511,"value":"function previews(notebooks, options) {\n return htl.html`

${notebooks.map(\n (notebook) => preview(notebook, options)\n )}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":438,"value":"svgWidth = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2b","stdlib":"1","titling":"auto"}} 29:"$28:body"