31:T462,slide.md`## Further reading & resources ### What & Why - 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 - [What is Data Visualization?](https://www.tableau.com/learn/articles/data-visualization) intro guide from Tableau - [Data Visualization posts](https://netflixtechblog.com/tagged/data-visualization) on Netflix's engineering blog ### How - Observable Plot [documentation](https://observablehq.com/collection/@observablehq/plot) & [video tutorial](https://youtu.be/SnLBbbQzK1E) - University of Washington's [Data Visualization Curriculum](https://observablehq.com/collection/@uwdata/visualization-curriculum) - 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 `32:[{"id":"d6ca67f65c0285b1ba09ac8537a475e41e4d0618b631fcaa8c97fad63248e722e93c861d2da19ae25cfb1dda57d383c41cd3eb7ff59f7724e5bbe11f8dfb4b2a","href":"https://static.observableusercontent.com/files/d6ca67f65c0285b1ba09ac8537a475e41e4d0618b631fcaa8c97fad63248e722e93c861d2da19ae25cfb1dda57d383c41cd3eb7ff59f7724e5bbe11f8dfb4b2a","name":"image.png","type":"image/png","lastModified":1623672896003.242,"size":47438},{"id":"23aa8af5893ae63e36350a12e4a56ad222a616ded81b4ad36e009657c2875f9972e154b92948d03c13a116c39117ebafcb35a71f70aceacb7297c6858cefdd41","href":"https://static.observableusercontent.com/files/23aa8af5893ae63e36350a12e4a56ad222a616ded81b4ad36e009657c2875f9972e154b92948d03c13a116c39117ebafcb35a71f70aceacb7297c6858cefdd41","name":"image@1.png","type":"image/png","lastModified":1623674833702.185,"size":5007},{"id":"ee68813baaf2b63cda0b90958367d403c2351f5336669e0c2c96c7468dcbe04083f6ecc891ddee4b5c368caaa94b8ed31941f317d0b9069da3700f0e46373b8e","href":"https://static.observableusercontent.com/files/ee68813baaf2b63cda0b90958367d403c2351f5336669e0c2c96c7468dcbe04083f6ecc891ddee4b5c368caaa94b8ed31941f317d0b9069da3700f0e46373b8e","name":"image@2.png","type":"image/png","lastModified":1633388996732.588,"size":119153}] 2f:{"title":"Data Visualization for Web Developers","cells":[{"id":23,"value":"slide.md`# Data Visualization for Web Developers\n\n### What? Why? How?\n
\n[@AnjanaVakil](https://twitter.com/AnjanaVakil), Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":51,"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"},{"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"},{"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"},{"id":31,"value":"slide.md(\"small\")`## Looking at data is easy...\n...seeing meaning in it is hard!\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"slide.md(\"small\")`#### **What does this data say to you?**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"Inputs.table(sampleJobs)","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"slide.md(\"small\")`#### How about now?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"FileAttachment(\"image.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"slide.md`## Data Viz for Web Developers: Why?`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":128,"value":"slide.md`## Data Viz for Web Developers: How?`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":268,"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![Filter Map Reduce](https://static.observableusercontent.com/files/2f820ed5e9c8ce56f07504c382b6c126805d04edf297aaebf57f4c8c10a28556e185f26ca4a87f024182257cf6d2a8a2b31cf85d81d4fa871626715e0f16eab4)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":236,"value":"slide.md`## Step 2: Visualize your data\n\n_Scale_ abstract values from the dataset into concrete graphical values\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":207,"value":"slide.md`\n

\n\n### [observablehq.com/@observablehq/plot](https://observablehq.com/@observablehq/plot)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"projects = slide.md`## Let's jump in and make some plots!\n\n- [Project: Are tests passing?](https://observablehq.com/@anjana/project-are-tests-passing) - Features & encoding channels\n- [Project: What size devices are users browsing with?](https://observablehq.com/@anjana/project-what-size-devices-are-users-browsing-with) - Aggregating & separating data to answer the right questions\n- [Project: How fast are API responses?](https://observablehq.com/@anjana/project-how-fast-are-api-responses) - Inputs & interactivity\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"slide.md`## Step 3: Share your visualization\n\n- [Share](https://observablehq.com/@observablehq/personal-sharing?collection=@observablehq/editing-publishing-collaborating) your notebook with specific user(s)\n- [Publish](https://observablehq.com/@observablehq/how-saving-works?collection=@observablehq/editing-publishing-collaborating) your notebook for anyone/everyone\n- [Embed](https://observablehq.com/@observablehq/introduction-to-embedding?collection=@observablehq/editing-publishing-collaborating) cell(s) anywhere on the web (HTML, JS, React)\n- [Link]() to standalone embed\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"slide.html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":302,"value":"takeaways = slide.md`## Takeaways & next steps\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"},{"id":306,"value":"slide.md`## Takeaways & next steps\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- HTML inputs for interactivity\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"slide.md`## Takeaways & next steps\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"},{"id":355,"value":"slide.md`## Takeaways & next steps\n\nTime-series data presents its own special challenges...\n\nLearn more in our a [free workshop Oct 21](https://www.meetup.com/observablehq/events/281119076/)!\n\n $\"Screenshot$ \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"slide.md`# Thank you!\n\nHuge thanks to: \n- Visnu Pitiyanuvath, David Porter, Ian Johnson, Lauren Buchman, Mike Bostock, Melody Meckfessel, Mike Freeman\n- Tara Manicsic & Jamstack Conf team\n\nI'm [@AnjanaVakil](https://twitter.com/AnjanaVakil) on Twitter, [@anjana](https://observablehq.com/@anjana) on Observable\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"----------\n### Appendix\n\nThe code below powers the presentation above!","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"import { slide, notes, style, keyBindings } from \"@visnup/slides\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"style","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"keyBindings","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"import { sampleJobs } from \"@observablehq/github-actions-workflows-api\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"import { table1, table2 } from \"@uwdata/tidy-data-in-javascript\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}