2f:Tcd2,| Purpose |`ggplot2`|`Observable Plot`| | -------| --------- | ---------- | |Initialize the plot

Specify geom or mark
From which dataset?
Variable mappings
Mark color
Mark shape
Mark opacity (constant)
Mark size (constant)

Reveal legend

Axis labels

Add gridlines | `ggplot()`  ` + `

  `geom_point``(``penguins``,`
    `aes(x = flipper_length_mm,`
           `y = body_mass_g,`
           `color = species,`
           `shape = species``),`
    `alpha = 0.7,`
    `size = 4`
    `) +`

  `# N/A: legends revealed by default`
    `+`
  `labs(x = "Flipper length (mm)",`
             `y = "Body mass (g)")`

  `# N/A: gridlines added by default`| `Plot.plot``({`

  `marks: [`
      `Plot.dot``(``penguins``,`
         `{x: "flipper_length_mm",`
          `y: "body_mass_g",`
          `fill: "species",`
          `symbol: "species"`
          `opacity: 0.7`
          `r: 4``})`
      `]`

  `symbol: {legend: true},`

  `x: {label: "Flipper length (mm)"},`
  `y: {label: "Body mass (g)"},`

  `grid: true`

`})`30:T6a6, **A note before you start:** Just like there are different ways to write ggplot2 code, there are different ways to write Plot code. Some places you will see the _mark_ specified first followed by the plot initialization (left example below), and other places you will see the plot initialized first, with the mark specified within (right example below. Throughout this notebook, we use Style 2, which is preferred when combining marks or building highly customized plots. | Style 1 | | Style 2 (used throughout this notebook) | | ------ | ------ | ----------- | | `Plot.dot(penguins,`
                         `{x: "flipper_length_mm",`
                           `y: "body_mass_g"}`
                  `).plot()`| | `Plot.plot({`
        `marks: [`
                `Plot.dot({x: "flipper_length_mm",`
                                     `y: "body_mass_g"})`
                        `]`
`})`31:T5f4,## Major elements Many graph-building elements you're familiar with in ggplot2 have similar counterparts in Plot - several of the big ones are shown side-by-side below: | Function | ggplot2 | Observable Plot | | ----------- | --------------- | | What graph type / shape are you creating? | [geoms](https://ggplot2.tidyverse.org/reference/#geoms) | [Marks](https://observablehq.com/@observablehq/plot-cheatsheets-marks) | | What variables are you plotting? | [Variable mappings](https://ggplot2.tidyverse.org/reference/aes.html) | [Data bindings](https://observablehq.com/@observablehq/plot-marks?collection=@observablehq/plot) | | Customize colors and styling | [Aesthetic values](https://ggplot2.tidyverse.org/reference/aes.html) | [Colors](https://github.com/observablehq/plot/blob/main/README.md#marks) & [styling marks](https://github.com/observablehq/plot/blob/main/README.md#marks) | | Customize scales for aesthetics / axes | [Scales](https://ggplot2-book.org/scales-guides.html) | [Scales](https://observablehq.com/@observablehq/plot-cheatsheets-scales?collection=@observablehq/plot-cheatsheets) | | Split a plot into separate panels| [Facet](https://ggplot2-book.org/facet.html) | [Facets](https://observablehq.com/@observablehq/plot-facets?collection=@observablehq/plot) | | Add labels & legends | `labs`, `theme` | [Plot legend](https://observablehq.com/@observablehq/plot-legends?collection=@observablehq/plot) | Below, these ggplot2 and Plot counterparts are described and compared in a bit more detail.32:T5fe,## From _geoms_ to _marks_ In ggplot2, **geometric objects** (geoms) are "the fundamental building blocks of ggplot2" ([ref](https://ggplot2-book.org/individual-geoms.html)) and are often associated with named plot types. Combined with information about x- and y-values (variable mappings), these geoms will produce a plot with a shape at (or connecting, e.g. in the case of a line graph) coordinates in the data. For example, `geom_point`, when provided with x- and y- values, creates a plot with a point at each x-y coordinate to make a scatterplot. In Observable Plot, **marks** similarly determine the *shapes* that make up your plot (e.g. points, lines, bars, etc.), with their position bound to data values. Common geoms (in ggplot2) and marks (in Plot) include: | Plot type | ggplot2 | Plot | | ----------- | --------------- | ---------| | Scatterplot | `geom_point` | `Plot.dot` | | Line graph | `geom_line` | `Plot.line` | | Bar / column graph | `geom_bar`, `geom_col` | `Plot.barX`, `Plot.barY` | | Boxplot | `geom_boxplot` | `Plot.boxX`, `Plot.boxY`| **Note:** There are some _named plot types_ that exist as out-of-the-box geoms in ggplot2, that require combinations of a *mark* and a transform to create in Plot. One example is a histogram. In ggplot2, `geom_histogram` automatically creates bins, counts observations in each bin, and produces a histogram: `ggplot(data = penguins) +`
`geom_histogram(aes(x = flipper_length_mm))`33:T8d4,## From _variable mappings_ to _data bindings_ When we make a plot, the position and/or size of the plot shapes (e.g. points, bars) is connected to *data values*. Connecting data values to visual properties is often referred to as *aesthetic mapping* in `ggplot2`, and *data binding* in `Plot`: "To make a plot, we bind columns of data to visual properties of marks" (from [Plot: Marks and channels](https://observablehq.com/@observablehq/plot-marks)). The **bold text** in the side-by-side examples below are where variable values (in this case, `flipper_length_mm` and `body_mass_g`) are mapped (bound) to plot aesthetics. In this example, the values for `flipper_length_mm` and `body_mass_g` are bound to the x- and y- axis scales, respectively. | `ggplot2` | Observable `Plot` | | ----------- | --------------- | | `ggplot() +`
   `geom_point(data = penguins,`
                          `aes(x = flipper_length_mm,`
                                      `y = body_mass_g)`
                          )|`Plot.plot({`
   `marks: [`
      `Plot.dot(penguins,`
                                  `{x: "flipper_length_mm",`
                                    `y: "body_mass_g"}``)`
                  `]`
       `})`| 34:T58c,In addition to binding data to plot positions as shown above, we can also bind data to other visual properties, like mark color or size. Let's compare a ggplot2 and Plot example that binds data to position (x and y scale) _and_ a color scale. **First, in `ggplot2`.** Here, `color = species` maps species onto point color. In other words, each distinct group in the "species" column of the penguins data will be bound to a different color: `ggplot() +`
    `geom_point(data = penguins,`
                            `aes(x = flipper_length_mm,`
                                    `y = body_mass_g`
                                    `color = species)`
                                    `)`35:T446,## Scales Scales serve the same purpose in ggplot2 and Plot: to map data values to aesthetic values like mark position, color, or size. Here, we'll compare three (of many) ways that scales are used in ggplot2 and Plot visualizations: limits, scale transforms, and color scales. 36:T458,### _Axis limits_ We can use scales to customize the limits of plot axes, for example to reduce or expand the x- or y-axis range. We'll consider a specific case where we adjust the x-axis range for a continuous quantitative variable. **In ggplot2:** `scale_x_continuous(limits = c(low, high))` `ggplot() +`
    `geom_point(data = penguins,`
                            `aes(x = flipper_length_mm,`
                                    `y = body_mass_g)`
                                    `) + `
    `scale_x_continuous(limits = c(150, 250))` 37:T51c,### _Color scales_ In the examples above, we adjusted positional scales with limits and a transform. We can similarly customize the color scale. In the examples below, the palette of values bound to the data is updated to "viridis". **Color scale update in ggplot2:** `ggplot() +`
    `geom_point(data = penguins,`
                            `aes(x = flipper_length_mm,`
                                    `y = body_mass_g,`
                                    `color = body_mass_g)`
                                    `) + `
    `scale_color_viridis_c()`38:T4ab,Faceting splits a data visualization into multiple panels based on one or more faceting variables. In the examples below, histograms of penguin flipper length are faceted by species. **Faceting in ggplot2:** Faceting in ggplot2 is commonly done using [`facet_wrap`](https://ggplot2.tidyverse.org/reference/facet_wrap.html) or [`facet_grid`](https://ggplot2.tidyverse.org/reference/facet_grid.html). In the example below, a histogram of penguin flipper lengths is split into separate panels based on the different unique groups within the species column (Adelie, Chinstrap, and Gentoo). `ggplot() +`
    `geom_histogram(data = penguins,`
                                    `aes(x = flipper_length_mm)`
                                    `) + `
    `facet_wrap(~ species)`39:[{"id":"c30f109eb711fe1c0498661c1c7b0beccfe67bf4954a95b613219eae9c938a66ae9543056739db4da9a2d320de813ea85f8f29f25af2c0f74ccc6e37955de731","href":"https://static.observableusercontent.com/files/c30f109eb711fe1c0498661c1c7b0beccfe67bf4954a95b613219eae9c938a66ae9543056739db4da9a2d320de813ea85f8f29f25af2c0f74ccc6e37955de731","name":"facet_wrap.png","type":"image/png","lastModified":1707177961541.893,"size":141044},{"id":"71b7f7529e3f3344eb5b477e217e3fc8aea1c903c866f8a9afdf13021c25d8543934b3074ecef4a9a203463ed2bcaab053416135cda77a040432eae5d0a808c5","href":"https://static.observableusercontent.com/files/71b7f7529e3f3344eb5b477e217e3fc8aea1c903c866f8a9afdf13021c25d8543934b3074ecef4a9a203463ed2bcaab053416135cda77a040432eae5d0a808c5","name":"scale_color_viridis.png","type":"image/png","lastModified":1707177961541.893,"size":268162},{"id":"8bf247a3931f39f3461a74da1b5e7be8b382826b4b2cc75eeb62df0823ac85447ee48a2f46a7f412803311bed58f4d3fb8f273b5dbd395aba795f77d89b348d6","href":"https://static.observableusercontent.com/files/8bf247a3931f39f3461a74da1b5e7be8b382826b4b2cc75eeb62df0823ac85447ee48a2f46a7f412803311bed58f4d3fb8f273b5dbd395aba795f77d89b348d6","name":"axis_limits.png","type":"image/png","lastModified":1707177961541.893,"size":193865},{"id":"77d87b2487d3b0f3559ef7d2d765355164c513509e693b7bdb32ff5bd1b121524c2628474f1696386b322046282c426178f8ef376a765b33006779cfda3052d1","href":"https://static.observableusercontent.com/files/77d87b2487d3b0f3559ef7d2d765355164c513509e693b7bdb32ff5bd1b121524c2628474f1696386b322046282c426178f8ef376a765b33006779cfda3052d1","name":"scale_x_reverse.png","type":"image/png","lastModified":1707177961541.893,"size":236066},{"id":"eb0fecb761253f9a0337eb185ffa1707e020c171867c635b89dd82a16b64ee2df8987209ac44c1b97437080e7365cecb6f8083b47e8340f32fc9ed42c72c3148","href":"https://static.observableusercontent.com/files/eb0fecb761253f9a0337eb185ffa1707e020c171867c635b89dd82a16b64ee2df8987209ac44c1b97437080e7365cecb6f8083b47e8340f32fc9ed42c72c3148","name":"penguin_scatterplot_color.png","type":"image/png","lastModified":1707177961541.893,"size":264033},{"id":"52f11ec0775f49b3ad0845106810b0003f39a1c74145b26f510c44a4430b823318371aa109d530454250c1e88de935aacff464e808d8af8e39e56a9cf3a34b2b","href":"https://static.observableusercontent.com/files/52f11ec0775f49b3ad0845106810b0003f39a1c74145b26f510c44a4430b823318371aa109d530454250c1e88de935aacff464e808d8af8e39e56a9cf3a34b2b","name":"penguin_flipper_histogram.png","type":"image/png","lastModified":1707177961541.893,"size":88994}] 2d:{"title":"Plot from ggplot2","cells":[{"id":0,"value":"# Plot from ggplot2","pinned":false,"hidden":false,"mode":"md"},{"id":418,"value":"toc(\"h2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1014,"value":"## Quick compare: Side-by-side code highlighting\n\nIf you're already comfortable working in ggplot2, one way to learn [Observable Plot](https://observablehq.com/@observablehq/plot) is to explore how your existing knowledge of ggplot maps nicely onto Plot code. **Hover over any text in the comparison table below** to highlight like-elements in ggplot2 and Plot. For more thorough comparisons and examples, continue on to the next sections.","pinned":false,"hidden":false,"mode":"md"},{"id":1003,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":1041,"value":"Here is the live version of the Plot example code shown above: ","pinned":false,"hidden":false,"mode":"md"},{"id":1039,"value":"Plot.plot({\n\n marks: [\n Plot.dot(penguins,\n {x: \"flipper_length_mm\",\n y: \"body_mass_g\",\n fill: \"species\",\n symbol: \"species\",\n opacity: 0.7,\n r: 4\n })\n ],\n\n symbol: {legend: true},\n facet: {data: penguins, x: \"island\"},\n // color: {legend: true}, // Legend is redundant if already covered by symbol legend!\n \n x: {label: \"Flipper length (mm)\"},\n y: {label: \"Body mass (g)\"},\n\n grid: true\n\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1058,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":814,"value":"## Introduction\n\nJavaScript offers an exciting way to build interactive data visualizations in the language of the web, but learning a new tool for data visualization can be daunting. For R users already working in ggplot2, [Observable Plot](https://observablehq.com/@observablehq/plot) offers a tool for creating customizable & interactive visualizations in JavaScript that builds closely on existing ggplot2 knowledge.\n \nObservable Plot employs a “layered grammar of graphics inspired by Vega-Lite, ggplot2, Wilkinson’s Grammar of Graphics, and Bertin’s Semiology of Graphics,” so building visualizations layer-by-layer in `Plot` feels similar to in ggplot2. Here, we directly compare Plot and ggplot2 elements and examples to support ggplot2 users who want to get started with data visualization in JavaScript – a big step toward web-ready, fully customizable interactive plots.\n","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":363,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":366,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":130,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":166,"value":"penguin_flipper_histogram = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"In comparison, a histogram in Plot is created by combining `Plot.rect` with [`Plot.bin`](https://observablehq.com/@observablehq/plot-bin), which \"groups quantitative data—continuous measurements such as heights, weights, or temperatures—into discrete bins\" that are then aggregated based on an operation (in this case, \"count\"). ","pinned":false,"hidden":false,"mode":"md"},{"id":698,"value":"Plot.plot({\n marks: [\n Plot.rectY(penguins, \n Plot.binX({y: \"count\"},\n {x: \"flipper_length_mm\"}))\n ]\n})\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":253,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":357,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":350,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":332,"value":"penguin_scatterplot_color = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"**Now, in Plot:**","pinned":false,"hidden":false,"mode":"md"},{"id":642,"value":"Plot.plot({\n marks: [\n Plot.dot(penguins, \n {x: \"flipper_length_mm\",\n y: \"body_mass_g\",\n fill: \"species\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"A few notable differences: \n\n1. ggplot2 shows the legend automatically for variables mapped to aesthetics like color and size (see the legend to the right of the ggplot2 example above). In contrast, legends are *hidden* by default in Plot, and must be revealed (e.g. by adding `color: {legend: true}`). See the Labels and Legends section below.\n2. In ggplot2, colors are defined by a [**color** and **fill**](https://ggplot2.tidyverse.org/reference/aes_colour_fill_alpha.html). In Plot, the analogous aesthetics are **stroke** (for lines and shape outlines) and **fill** (for interior fill color), respectively.","pinned":false,"hidden":false,"mode":"md"},{"id":359,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":353,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":385,"value":"$36","pinned":false,"hidden":false,"mode":"md"},{"id":455,"value":"axis_limits = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"**In Plot:** `{x: {domain: [low, high]}}`","pinned":false,"hidden":false,"mode":"md"},{"id":447,"value":"Plot.plot({\n x: {domain: [150, 250]},\n marks: [\n Plot.dot(penguins,\n {x: \"flipper_length_mm\", \n y: \"body_mass_g\"}\n )\n ] \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"### _Scale transforms_\n\nWe can also _transform_ scales. The examples below transform the linear x-axis scale by reversing it. \n\n**Reverse scale in ggplot2:**\n\n`ggplot() +`
\n    `geom_point(data = penguins,`
\n                            `aes(x = flipper_length_mm,`
\n                                    `y = body_mass_g)`
\n                                    `) + `
    `scale_x_reverse()`\n","pinned":false,"hidden":false,"mode":"md"},{"id":468,"value":"scale_x_reverse = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"**Reverse scale in Observable Plot:**","pinned":false,"hidden":false,"mode":"md"},{"id":477,"value":"Plot.plot({\n x: {reverse: true},\n marks: [\n Plot.dot(penguins,\n {x: \"flipper_length_mm\", \n y: \"body_mass_g\"}\n )\n ] \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":387,"value":"$37","pinned":false,"hidden":false,"mode":"md"},{"id":490,"value":"scale_color_viridis = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"**Color scale update in Plot:**","pinned":false,"hidden":false,"mode":"md"},{"id":497,"value":"Plot.plot({\n color: {scheme: \"viridis\"},\n marks: [\n Plot.dot(penguins,\n {x: \"flipper_length_mm\",\n y: \"body_mass_g\",\n fill: \"body_mass_g\"})\n ] \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":503,"value":"And so much more customization is possible with scales. Learn more about scales in [`ggplot2`](https://ggplot2-book.org/scales-guides.html) and [`Plot`](https://observablehq.com/@observablehq/plot-scales). ","pinned":false,"hidden":false,"mode":"md"},{"id":403,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":401,"value":"## Faceting","pinned":false,"hidden":false,"mode":"md"},{"id":409,"value":"$38","pinned":false,"hidden":false,"mode":"md"},{"id":532,"value":"facet_wrap = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"**Faceting in Plot:**\n\nWe can similarly add a `facet: {}` option in Plot, as shown below. Note that the ggplot2 and Plot versions look quite different, due to differing bin numbers. You can update the `thresholds` value (number of bins) in the code below to update the histogram. ","pinned":false,"hidden":false,"mode":"md"},{"id":551,"value":"Plot.plot({\n facet: {data: penguins, x: \"species\"},\n marks: [\n Plot.rectY(penguins, \n Plot.binX( \n {y: \"count\"}, \n {x: \"flipper_length_mm\",\n thresholds: 12}) \n )\n ] \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":599,"value":"Learn more in the [Plot facets](https://observablehq.com/@observablehq/plot-facets) notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":407,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":788,"value":"## Labels & Legends\n\n### Labels\nIn ggplot2, the most straightforward way to add labels (including axis labels, titles, subtitles, and captions) is using [`labs`](https://ggplot2.tidyverse.org/reference/labs.html). In Plot, x- and y-axis labels are updated as follows: ","pinned":false,"hidden":false,"mode":"md"},{"id":791,"value":"Plot.plot({\n x: {label: \"Flipper length (mm)\"},\n y: {label: \"Body mass (g)\"},\n marks: [\n Plot.dot(penguins, \n {x: \"flipper_length_mm\", \n y: \"body_mass_g\", \n fill: \"species\"}\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"\n### Legends\nLegends are automatically added in ggplot2 when variables are mapped to non-positional scales (e.g. size, color). In Plot, legends are not added by default - they must be added as layers within the Plot code. In the example below, a legend is added for a variable mapped to a color aesthetic (here, species):","pinned":false,"hidden":false,"mode":"md"},{"id":802,"value":"Plot.plot({\n color: {legend: true},\n marks: [\n Plot.dot(penguins,\n {x: \"flipper_length_mm\",\n y: \"body_mass_g\",\n fill: \"species\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":816,"value":"## Putting together the pieces\n\nThis example combines the elements described above, and adds a few more, to create a data visualization in Plot. ","pinned":false,"hidden":false,"mode":"md"},{"id":819,"value":"Plot.plot({\n color: {legend: true, scheme: \"dark2\"},\n x: {label: \"Penguin body mass (grams)\"},\n y: {label: \"Count\"},\n marks: [\n Plot.rectY(penguins, \n Plot.binX( \n {y: \"count\"}, \n {x: \"body_mass_g\",\n thresholds: 30, // Updates bin number for histogram\n fill: \"species\"}))\n ] \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":723,"value":"## Interactivity teaser\n\nOne of the most exciting things about working in Observable Plot is the short path from static graphs to interactive data visualizations. \n\nFirst, we create a slider widget using `Inputs.range()`. Let's break down what's happening here: \n\n- `viewof` creates an element that \"directly controls a value in the notebook\". Learn more in the [Introduction to views](https://observablehq.com/@observablehq/views).\n- `sizeInput` names the widget output, so it can be referred to later on (in our Plot)\n- `Inputs.range()` creates a value range widget. Learn about other [Observable Inputs](https://observablehq.com/@observablehq/inputs)\n- `d3.extent()` here will determine the minimum and maximum values of `body_mass_g` in the `penguins` dataset, and those become the endpoints of the slider\n- `label` creates the slider title (or prompt)\n- `step` determines the slider increments","pinned":false,"hidden":false,"mode":"md"},{"id":861,"value":"viewof sizeInput = Inputs.range(d3.extent(penguins, d => d.body_mass_g), \n {label: \"Choose minimum penguin mass (g):\", \n step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":854,"value":"Plot.plot({\n marks: [\n Plot.tickY(penguins, \n {x: \"species\", \n y: \"body_mass_g\",\n filter: d => d.body_mass_g > sizeInput, // Filter to only include observations where body mass exceeds the value of the sizeInput slider! \n stroke: \"species\"}\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":703,"value":"## More resources\n\n- [Plot Cheatsheets](https://observablehq.com/collection/@observablehq/plot-cheatsheets)\n- [Observable Plot](https://observablehq.com/@observablehq/plot) by Mike Bostock\n- [Plot Examples](https://observablehq.com/@observablehq/plot-exploration-penguins) (with penguins!) by Ian Johnson – includes examples and practice tasks with hints & solutions\n- [Plot Overview for matplotlib users](https://observablehq.com/@observablehq/plot-overview-for-matplotlib-users) by Ayodele Odubela\n- [Plot for D3 users](https://observablehq.com/@observablehq/plot-for-d3-users) by Toph Tucker\n- [Plot & Vega-Lite](https://observablehq.com/@observablehq/plot-vega-lite) by Ian Johnson\n","pinned":false,"hidden":false,"mode":"md"},{"id":1023,"value":"### Credit\n\nThe interactive hover highlighting in the top table was made possible by @Fil, who created and shared this [Co-highlight notebook](https://observablehq.com/@observablehq/co-highlight).","pinned":false,"hidden":false,"mode":"md"},{"id":1018,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":413,"value":"import {toc} from \"@mbostock/toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"function activate(...sources) {\n const coh = d3.selectAll(sources).selectAll(\".coh\");\n const colors = d3\n .scaleOrdinal(d3.schemePastel2)\n .domain(\n new Set(\n Array.from(coh, (e) => e.className.replace(/\\bcoh\\b/g, \"\").trim())\n )\n );\n\n coh.on(\"pointerenter\", (e) => {\n const m = d3.select(e.currentTarget);\n const c = m\n .attr(\"class\")\n .replace(/\\bcoh\\b/g, \"\")\n .trim();\n coh\n .style(\"background\", null)\n .filter(`.${c}`)\n .style(\"background\", colors(c));\n });\n d3.selectAll(sources).on(\"pointerleave\", () => coh.style(\"background\", null));\n\n // returns the color scale so we can create a legend & more\n return colors;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"activate(b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1011,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}