2c:null 2d:["$","title",null,{"children":"(Easier) Interactive Data Visualization in React | Anjana Vakil | Observable"}] 32:T13d5,logos = ({ github: (size) => svg``, twitter: (size) => svg``, observable: (size) => svg`` })33:[] 30:{"id":"9a53ae487c0ba309","slug":"interactive-data-viz-in-react","title":"(Easier) Interactive Data Visualization in React","thumbnail":"d2cd92e469607ec7185915abd11f079c50568c425105e4e2cc2fddf45fcf3536","access_level":"public","create_time":"$D2021-10-13T20:07:03.097Z","update_time":"$D2021-10-22T14:52:09.228Z","view_time":null,"first_public_time":"$D2021-10-22T14:51:11.779Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"8cc6a24956698638","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":"starter_2024"},"version":702,"publish_version":702,"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,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"b424d908f747917a","slug":"talks","title":"Talks","owner":{"id":"8cc6a24956698638","login":"anjana","name":"Anjana Vakil"}},"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"slide.html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"slide.md(\"small\")`## Let's Plot!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"slide.md`Ok, but does it...\n\n## React?\n\n $\"React$ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"slide.md`It can't get any easier than that!\n\n## Or can it??`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"-------\n\n### Appendix\n\nThe cells below power the presentation above!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import { slide, notes, style, keyBindings } from \"@mkfreeman/slides\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"import { preview } from \"@observablehq/plot\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"customStyle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"keyBindings","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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