31:T13d5,logos = ({ github: (size) => svg``, twitter: (size) => svg``, observable: (size) => svg`` })32:[] 2f:{"title":"(Easier) Interactive Data Visualization in React","cells":[{"id":19,"value":"slide.md`# (Easier) Interactive Data Visualization in React\n\nwith Observable Plot\n\n### [@AnjanaVakil](https://twitter.com/anjanavakil)\nDeveloper/Advocate, [Observable](https://observablehq.com)\n\n[observablehq.com/@anjana/interactive-data-viz-in-react](https://observablehq.com/@anjana/easier-interactive-data-visualization-in-react)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"slide.md(\"bullets\")`## Data Visualization is...\n\n- A way to quickly discover meanings & patterns in data\n- A useful component of many web apps (eg dashboards)\n- A fancy skill to put on your resume 😉\n- Hard? 😫\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"slide.html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"slide.html`\n\n $\"Observable$ \n\n

observablehq.com/@observablehq/plot

github.com/observablehq/plot

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"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"},{"id":624,"value":"slide.md(\"small\")`## Let's Plot!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"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"},{"id":213,"value":"Plot.plot({\n marks: [\n Plot.ruleY([1 / 26], { stroke: \"orange\", strokeWidth: 3 }),\n Plot.barY(data, {\n x: \"letter\",\n y: \"frequency\",\n sort: { x: \"y\", reverse: true }\n })\n ],\n y: { grid: true }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":300,"value":"slide.md`Ok, but does it...\n\n## React?\n\n $\"React$ `","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"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"},{"id":34,"value":"slide.md`## To the [CodeSandbox](https://codesandbox.io/s/observable-plot-in-react-demo-7kwdi?file=/src/App.js)!\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"slide.md`It can't get any easier than that!\n\n## Or can it??`","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"slide.md`## [Embedding](https://observablehq.com/@observablehq/introduction-to-embedding?collection=@observablehq/embedding-notebooks) Observable cells\n\nCopy iframe or React component, get reactivity for free!\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"slide.md`## Functions for configurable [D3 Charts](https://observablehq.com/@d3/charts)\n[Many types](https://observablehq.com/collection/@d3/charts) to choose from!\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"slide.md(\"bullets\")`## Recap\n\n- **Plot** gives you high-level convenience without sacrificing customizability\n- **Declarative** APIs are great for reactive applications\n- **useRef** & **useEffect** are your friends for DOM manipulation\n- Use configurable **D3 Charts** functions with same pattern\n- Observable notebooks can be **embedded** in React too\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"slide.md(\"nobullets\")`## Further reading\n- [Plot Tutorial](https://observablehq.com/@observablehq/plot?collection=@observablehq/plot) on Observable\n- [@observablehq/plot](https://github.com/observablehq/plot) on Github\n- [Hands-on DataViz with Plot](https://youtu.be/SnLBbbQzK1E) & more on [YouTube](https://www.youtube.com/ObservableHQ)\n- [Telling stories with data using the grammar of graphics](https://codewords.recurse.com/issues/six/telling-stories-with-data-using-the-grammar-of-graphics) by Liz Sander\n- Observable Embedding [docs](https://observablehq.com/@observablehq/introduction-to-embedding) and [examples](https://github.com/observablehq/examples)\n- [D3 Charts](https://observablehq.com/@d3/charts) documentation & [collection](https://observablehq.com/collection/@d3/charts)\n- [Learn D3](https://observablehq.com/@d3/learn-d3?collection=@d3/learn-d3) if you need to go low-level!\n- [React + D3.js](https://wattenberger.com/blog/react-and-d3) by Amelia Wattenberger\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"slide.md(\"nobullets\")`## Thank you!\n\nMike Bostock, Visnu Pitiyanuvath, Fil Rivière, Toph Tucker, Jimmy Zhang, Ananya Roy, Duane Barlow, Mike Freeman & Team Observable\n\nDaria Shabala & React Advanced London\n\n----\n${contact()}\n[observablehq.com/@anjana/interactive-data-viz-in-react](https://observablehq.com/@anjana/easier-interactive-data-visualization-in-react)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"-------\n\n### Appendix\n\nThe cells below power the presentation above!","pinned":false,"hidden":false,"mode":"md"},{"id":697,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"import { slide, notes, style, keyBindings } from \"@mkfreeman/slides\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"import { preview } from \"@observablehq/plot\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"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":14,"value":"style","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"customStyle = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"keyBindings","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"contact = () => md`\n

\n${logos.twitter(\"1.5em\")} [@AnjanaVakil](https://twitter.com/anjanavakil)\n

\n${logos.github(\"1.5em\")} [@vakila](https://github.com/vakila)\n

\n${logos.observable(\"1.5em\")} [@anjana](https://observablehq.com/@)\n

\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}