2b:null 2c:["$","title",null,{"children":"Data Visualization for React Developers | Anjana Vakil | Observable"}] 31:T413,slide.md`## Further reading & resources - Observable [Tutorials](https://observablehq.com/collection/@observablehq/tutorial): - [Intro to web-based dataviz](https://observablehq.com/@observablehq/workshop-intro-to-data-vis-plot-d3?collection=@observablehq/tutorial) - [Exploratory Data Analysis](https://observablehq.com/@observablehq/eda-workshop-materials?collection=@observablehq/tutorial) - [Analyzing Time Series Data](https://observablehq.com/@observablehq/timeseries-workshop-materials?collection=@observablehq/analyzing-time-series-data) - Shirley Wu's [D3 courses on FrontendMasters](https://frontendmasters.com/teachers/shirley-wu/) - 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), [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":1666000467019.687,"size":5007},{"id":"d6ca67f65c0285b1ba09ac8537a475e41e4d0618b631fcaa8c97fad63248e722e93c861d2da19ae25cfb1dda57d383c41cd3eb7ff59f7724e5bbe11f8dfb4b2a","href":"https://static.observableusercontent.com/files/d6ca67f65c0285b1ba09ac8537a475e41e4d0618b631fcaa8c97fad63248e722e93c861d2da19ae25cfb1dda57d383c41cd3eb7ff59f7724e5bbe11f8dfb4b2a","name":"image.png","type":"image/png","lastModified":1666000467019.687,"size":47438}] 2f:{"id":"2e3360bb89225f0d","slug":"dataviz-for-react-devs","title":"Data Visualization for React Developers","thumbnail":"b7c7c638277aacbcc8b8ed14b907f9cd34eabcf54cc0f18843f53ae26b327277","access_level":"public","create_time":"$D2022-10-17T09:54:27.019Z","update_time":"$D2022-10-19T14:19:50.756Z","view_time":null,"first_public_time":"$D2022-10-19T07:55:31.994Z","fork":{"id":"7073818d1bf89026","slug":"data-viz-for-web-devs","title":"Data Visualization for Web Developers","owner":{"id":"8cc6a24956698638","login":"anjana","name":"Anjana Vakil"}},"stars":2,"starred":false,"owner":{"type":"team","id":"8cc6a24956698638","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":"starter_2024"},"version":827,"publish_version":null,"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":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Data Visualization for React Developers","cells":[{"id":23,"value":"slide.md`# Data Visualization for React Developers\n\n
\nA workshop by [@AnjanaVakil](https://twitter.com/AnjanaVakil)\n
\nReact Advanced London 2022\n\n[github.com/vakila/dataviz-for-react-devs](https://github.com/vakila/dataviz-for-react-devs)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":408,"value":"slide.md`## Welcome!\n\nLet's get to know each other:\n- Name & pronouns\n- Where you're based\n- What brings you here today?\n- What's something random you learned recently?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":411,"value":"slide.md`## Today's plan\n\n- Introduction: What is DataViz?\n- DataViz Libraries & React\n- Observable Plot\n - Features & Channels\n - Faceting & Aggregation\n- D3.js Charts\n - Aggregation\n - Animation\n- Next 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`#### **What does this data say to you?**\n\n${Inputs.table(sampleJobs)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"slide.md`#### How about now?\n\n${await FileAttachment(\"image.png\").image()}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":414,"value":"slide.md`## Two sides of dataviz: \n\n### Exploratory\nInvestigate a dataset to understand & begin analyzing its contents\n\n### Explanatory\nCommunicate a certain analysis to a certain audience, possibly still allowing minor exploration\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"slide.md`## Typical DataViz Process\n\n0) Get some data\n\n1) Wrangle the data\n\n2) Visualize the data\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":224,"value":"slide.md`## Step 0: Get some data\n\n- Read from a file\n- Query from a database\n- Fetch from an API\n- ...\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":455,"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\nThis often involves **filtering**, **reformatting**, or **aggregating** the data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":268,"value":"slide.md`\n\\`.filter()\\` & \\`.map()\\` are your friends!\n![Filter Map Reduce](https://static.observableusercontent.com/files/2f820ed5e9c8ce56f07504c382b6c126805d04edf297aaebf57f4c8c10a28556e185f26ca4a87f024182257cf6d2a8a2b31cf85d81d4fa871626715e0f16eab4)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":458,"value":"slide.md`Plot & D3 also have helpers for aggregating data\n\n\\`Plot.bin()\\`, \\`Plot.group()\\`\n\n\\`d3.rollup()\\`, \\`d3.group()\\`, \\`d3.bin()\\`\n\nWe'll look at some of these later\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":472,"value":"slide.md`## Step 2: Visualize your data\n\nCreate a correspondence between meaningful *features* in the data and graphical *properties* of the visualization\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":236,"value":"slide.md`\n_Scale_ abstract data values into concrete graphical values\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"slide.md`## JavaScript tools for DataViz\n\n\n- [D3.js](https://observablehq.com/collection/@d3/learn-d3)\n-

[Observable Plot](https://observablehq.com/@observablehq/plot)\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":555,"value":"slide.md`## Plot vs. D3\n\nPlot | D3\n--- | ---\nhigh-level | low-level\nquick & easy | super customizable\nsimpler to learn | notoriously difficult\ngreat for exploratory | great for explanatory\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":558,"value":"slide.md`## DataViz vs. React\n
\n $\"React$ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":564,"value":"slide.md`\n- DataViz libraries manipulate the **DOM**\n- React wants to control DOM manipulation\n- Uh oh\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":568,"value":"slide.md`## Delegating DOM manipulation\n\n## [\\`useRef\\`](https://reactjs.org/docs/hooks-reference.html#useref) \n\nTo connect to a [DOM node](https://reactjs.org/docs/refs-and-the-dom.html) where Plot can insert a chart\n\n## [\\`useEffect\\`](https://reactjs.org/docs/hooks-effect.html)\n\nTo render the chart, update when state changes, & clean up\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":571,"value":"slide.md`## The \\`useRef\\` + \\`useEffect\\` Pattern \n\n\\`\\`\\`js\nfunction ChartComponent({stuff, we, need}) {\n const myRef = useRef(); // or useRef(null)\n\n useEffect(() => {\n const chart = createChartElementSomehow(stuff, we, need);\n\n myRef.current.append(chart); // render chart\n return () => chart.remove(); // clean up\n }, [stuff, we, need]);\n\n return (\n

\n );\n}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":580,"value":"slide.md`### *To the codebase!*\n\n[github.com/vakila/dataviz-for-react-devs](https://github.com/vakila/dataviz-for-react-devs)\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":440,"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: null }\n)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":487,"value":"slide.md(\"small\")`## Visualizing data with Plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":491,"value":"data = [\n { letter: \"a\", frequency: 0.08167 },\n { letter: \"b\", frequency: 0.01492 },\n { letter: \"c\", frequency: 0.02782 },\n { letter: \"d\", frequency: 0.04253 },\n { letter: \"e\", frequency: 0.12702 },\n { letter: \"f\", frequency: 0.02228 },\n { letter: \"g\", frequency: 0.02015 },\n { letter: \"h\", frequency: 0.06094 },\n { letter: \"i\", frequency: 0.06966 },\n { letter: \"j\", frequency: 0.00153 },\n { letter: \"k\", frequency: 0.00772 },\n { letter: \"l\", frequency: 0.04025 },\n { letter: \"m\", frequency: 0.02406 },\n { letter: \"n\", frequency: 0.06749 },\n { letter: \"o\", frequency: 0.07507 },\n { letter: \"p\", frequency: 0.01929 },\n { letter: \"q\", frequency: 0.00095 },\n { letter: \"r\", frequency: 0.05987 },\n { letter: \"s\", frequency: 0.06327 },\n { letter: \"t\", frequency: 0.09056 },\n { letter: \"u\", frequency: 0.02758 },\n { letter: \"v\", frequency: 0.00978 },\n { letter: \"w\", frequency: 0.0236 },\n { letter: \"x\", frequency: 0.0015 },\n { letter: \"y\", frequency: 0.01974 },\n { letter: \"z\", frequency: 0.00074 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":493,"value":"Plot.plot({\n marks: [\n Plot.ruleX([1 / 26], { stroke: \"orange\", strokeWidth: 3 }),\n Plot.barX(data, {\n y: \"letter\",\n x: \"frequency\",\n sort: { y: \"x\", reverse: true }\n })\n ],\n y: { grid: true }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":496,"value":"slide.md`## Mapping data to graphics\n
\nPlot uses [**Marks**](https://github.com/observablehq/plot#marks) (\\`bar\\`, \\`rule\\`, \\`line\\`, \\`cell\\`, ...)\n\nto map data features (e.g. \\`\"letter\"\\`, \\`\"frequency\"\\`)\n\nto visual **Channels** (\\`x\\`, \\`y\\`, \\`fill\\`, \\`stroke\\`, \\`opacity\\`, \\`title\\`, ...)\n\nvia **Scales** (\\`x\\`, \\`y\\`, \\`color\\`, ...)\n\n*(see [Marks & Channels](https://observablehq.com/@observablehq/plot-marks) and [Scales](https://observablehq.com/@observablehq/plot-scales?collection=@observablehq/plot) for details)*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":520,"value":"slide.md`\n_Scales_ map an input **domain** to an output **range**\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":540,"value":"slide.md(\"small\")`\n\n\n## Let's Plot!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":543,"value":"Plot.plot({\n marks: [\n Plot.dot(devices, {\n x: \"Width\",\n y: \"Height\",\n fill: \"Device\",\n fillOpacity: \"Sessions\",\n r: ({ Sessions }) => Math.log(Sessions),\n title: ({ Device, Resolution, Sessions }) =>\n [Device, Resolution, Sessions].join(\": \")\n })\n ],\n opacity: { type: \"log\" },\n x: { grid: true, domain: [0, 4200] },\n y: { grid: true, domain: [0, 2600] }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":782,"value":"devices","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":553,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":588,"value":"slide.md`## Facets (aka \"small multiples\")\n\n**Facets** split up a chart to highlight differences between groups\n*(see [Facets](https://observablehq.com/@observablehq/plot-facets?collection=@observablehq/plot) for details)*\n\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":598,"value":"slide.md(\n \"small\"\n)`Add the \\`facet\\` option with \\`data\\` and channel(s) to split on:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":597,"value":"Plot.plot({\n facet: { data: penguins, x: \"species\" },\n marks: [\n Plot.dot(penguins, { x: \"culmen_length_mm\", y: \"culmen_depth_mm\" }),\n Plot.frame()\n ],\n height: width / 3\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":803,"value":"penguins","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":660,"value":"slide.md`## Interactivity\n\nWe can use state variables in the \\`useEffect\\` dependencies to re-draw the chart!\n\nWe'll use this trick in the next exercise\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":623,"value":"slide.md`## Aggregation\n\nHighlights overall trends & summary statistics\n\n\n**Bins** aggregate *continuous* values (e.g. \"Width\")\n\n**Groups** aggregate *categorical* values (e.g. \"Device\")\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":620,"value":"slide.md(\"small\")`## Bins in Plot\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":632,"value":"Plot.plot({\n marks: [\n Plot.rectY(\n // draw rects on the Y axis (vertical)\n penguins,\n Plot.binX(\n // create bins on the X axis\n { y: \"mean\" }, // outputs: aggregation metric\n { x: \"body_mass_g\", y: \"flipper_length_mm\" } // inputs: binning value, value to be aggregated\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":640,"value":"slide.md(\"small\")`## Groups in Plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":643,"value":"Plot.plot({\n marks: [\n Plot.barY(\n // draw bars on the Y axis (vertical)\n penguins,\n Plot.groupX(\n // create groups along the X axis\n { y: \"mean\" }, // outputs: aggregation metric\n { x: \"species\", y: \"flipper_length_mm\" } // inputs: grouping value, value to aggregate\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":664,"value":"slide.md`## From Plot to D3\n\n

\n\n[D3js.org](https://d3js.org)\n\n[Learn D3](https://observablehq.com/collection/@d3/learn-d3)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":683,"value":"slide.md`D3 can do *amazing* things (see the [D3 Gallery](https://observablehq.com/@d3/gallery))\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":670,"value":"slide.md`D3 has a *huge* [API](https://github.com/d3/d3/blob/main/API.md) (image by [Shirley Wu](https://observablehq.com/@sxywu/2-select-existing-petal-s-and-bind-movie-data?collection=@sxywu/introduction-to-d3-js#cell-16))\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":691,"value":"slide.md`...Enter [D3 Charts](https://observablehq.com/@d3/charts?collection=@d3/charts) to help us out!\n\n${previews([\n {\n path: \"@d3/force-directed-graph?collection=@d3/charts\",\n thumbnail:\n \"daca6197a1592e5582e904387074d40ce144606eb639222eb9306ce38ba32623\",\n title: \"Force-directed graph\",\n author: \"D3\"\n },\n {\n path: \"@d3/sankey-diagram?collection=@d3/charts\",\n thumbnail:\n \"3074afcf13f0dfa574415acc4e293ba58d6da310e2f1a6d68aff493b9607ba1b\",\n title: \"Sankey diagram\",\n author: \"D3\"\n },\n\n {\n path: \"@d3/treemap?collection=@d3/charts\",\n thumbnail:\n \"278516556172557a945111e81e0996b1e461364bc1402c57e412a33597d2f014\",\n title: \"Treemap\",\n author: \"D3\"\n },\n\n {\n path: \"@d3/choropleth?collection=@d3/charts\",\n thumbnail:\n \"a9a0524cc739add09079120ca80f8f640eca51aa69a31b0cc9712aacca14d0a8\",\n title: \"Choropleth\",\n author: \"D3\"\n }\n])}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":701,"value":"slide.md`Let's try out a couple: \n\n${previews([\n {\n path: \"@d3/bubble-chart?collection=@d3/charts\",\n thumbnail:\n \"ca4f7b52273224989f1ecec193f6c9a1b11b85456d2ad78efcf6a54267839b78\",\n title: \"Bubble chart\",\n author: \"D3\"\n },\n {\n path: \"@d3/bar-chart-transitions?collection=@d3/charts\",\n thumbnail:\n \"0e8f394a9b90622bf4b422d264f3a199a0d9ec3a4c414b2e6f33788681cc486f\",\n title: \"Bar chart transitions\",\n author: \"D3\"\n }\n])}\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":695,"value":"slide.md(\"small\")`## Aggregating in D3\n\n\\`d3.group()\\` splits up a dataset using a grouping function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":708,"value":"d3.group(devices, (d) => d.Device)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":715,"value":"slide.md(\n \"small\"\n)`\\`d3.rollup()\\` groups and then aggregates using a reducer function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":720,"value":"rolled = d3.rollup(\n devices,\n (v) => ({\n count: v.length,\n sum: d3.sum(v, (d) => d.Users),\n device: v[0].Device\n }),\n (d) => d.Device\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":819,"value":"d3.map(rolled, (d) => d)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":821,"value":"Array.from(rolled.values())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":723,"value":"slide.md(\n \"small\"\n)`Aggregations like \\`d3.sum()\\` or \\`d3.mean()\\` are useful for this`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":726,"value":"d3.rollup(\n devices,\n (v) => d3.mean(v, (d) => d.Width),\n (d) => d.Device\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":728,"value":"slide.md`## Animating charts\n\nD3 has powerful mechanisms for animated chart *transitions* via [selections & joins](https://observablehq.com/@d3/learn-d3-joins?collection=@d3/learn-d3)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":733,"value":"slide.md`Some D3 Charts expose a convenient \\`.update()\\` method that implements these transitions for us\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":741,"value":"slide.md`In our React app, we can call \\`.update()\\` to transition the chart based on a state change\n\nTo avoid re-drawing the whole chart (ruining the animation), we can use a different \\`useEffect()\\` for updates\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":302,"value":"takeaways = slide.md`## Takeaways & next steps\n\nData Visualization can help us:\n - explore datasets visually to investigate contents\n - explain data visually to communicate analysis\n - more easily derive meaning from our data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":306,"value":"slide.md`## Takeaways & next steps\n\nWe can visualize data in React with:\n- High-level visualization libraries like [Observable Plot](https://observablehq.com/@observablehq/plot?collection=@observablehq/plot)\n- Low-level visualization libraries like [D3](https://d3js.org)\n- Delegating DOM manipulation via \\`useRef\\` & \\`useEffect\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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- scaling data values to display values\n- aggregating and/or faceting to highlight trends\n- using interactivity to help viewers explore\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":323,"value":"slide.md`# Thank you!\n\nHuge thanks to: \nMike Bostock, Ian Johnson, Visnu Pitiyanuvath, Fil Rivière, Toph Tucker, Jimmy Zhang, Ananya Roy, Duane Barlow, Mike Freeman & Team Observable\n\nI'm [@AnjanaVakil](https://twitter.com/AnjanaVakil) on Twitter, [@anjana](https://observablehq.com/@anjana) on Observable\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":498,"value":"customStyle = html``","pinned":true,"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":528,"value":"import { devicesFinished as devices } from \"@anjana/dvfs-project-device-sizes\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":604,"value":"import { penguins } from \"@observablehq/plot-facets\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":444,"value":"import { preview } from \"@observablehq/plot\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":442,"value":"function previews(notebooks, options) {\n return htl.html`

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

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"