31: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 `32:[{"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}] 2f:{"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"},{"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":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"},{"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"},{"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`## 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`\n### **What does this data say to you?**\n\n${Inputs.table(sampleJobs)}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"slide.md(\"small\")`### How about now?\n\n${await FileAttachment(\"image.png\").image()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"slide.md`## Data Visualization for 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 Visualization for (busy!) Devs: How?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"slide.html`\n

${logoAndWordmark}

\n`","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":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"},{"id":268,"value":"slide.md`![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":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"},{"id":236,"value":"slide.html`

\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":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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":497,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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 \"@mkfreeman/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"},{"id":424,"value":"import { logoAndWordmark } with {\n svgWidth as combinedSvgWidth,\n svgWidth as combinedGraphicWidth\n} from \"@observablehq/logo\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"import { preview } from \"@observablehq/plot\"","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":438,"value":"svgWidth = 500","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}