30:Tc43,## 1. Let's start with a little poem
### Welcome to the Plot party! > Hi, I welcome you! My name is Plot.
> I like to cook and party a lot!
> Don't be shy and come to my house,
> open your browser and get your keyboard and mouse.
> > To come to my party, do me a favor
> bring with you the data in your very own flavor
> Two more things I ask you to seriously consider
> otherwise my cake might taste for you too bitter
> > First make sure your data is properly typed
> we don't want your zip code to be linearly hyped
> For each of your columns I offer a surprise
> colors and the position -you won't trust your eyes-
> are magically set to apparently look good
> if you prefer any other, just change it, you could
> > Like always in life you should know what you're after
> are you looking for insights or just for some laughter?
> The second thing I want you to know when you come:
> Do you look at a sequence, a pair or a sum?
> For a sequence, ![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/line.png) `Plot.line()` and ![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/area.png) `Plot.area()` will do
> for pairs of your objects, ![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/link.png) `Plot.link()` is for you
> > If you want the sum, count or even the mean
> the type of a column is crucial as you've already seen
> no matter your aggregation if you are grouping values for some strings
> I have ![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/barX.png) `Plot.bar()` for you so you can group by your things
> If you want the same things, but have numbers at hand
> ![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/rectX.png) `Plot.rect()` is your choice, to get the result you have planned > > Even if you come to my party and look for a friend
> or a long-term relationship to walk out hand in hand
> if the relationship you are seeking is so very undefined
> I have ![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/cell.png) `Plot.cell()` for you this will be nicely aligned
> but again, the type is important, just categories are expected
> for seeking relationships of any type, ![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/dot.png) `Plot.dot()` is perfected
> > It's 2am by now, Mike and Fil are still cooking,
> they released a new version with great features - all good-looking
> Now you can leave there your mark even if it's your own function
> or sorting made easy if you stop by the new junction
> The upgrade of strokeWidth, the new scales and transform options
> are just a few of the many new adoptions
> > And even early in the morning when I am grabbing my own phone
> marks can cope with intervals and scales can handle unknown
> scales have been very much extended and can be inspected
> you can pass them along to be very well-connected
> Come to my party, I promise to give my very best
> you can create and have fun, always feel welcome to be my guest!
31:T69b,Plot.plot({ height: 400, width: 600, marginTop: 40, marginLeft: 100, marginRight: 60, style: { fontSize: 12 }, x: { // axis: null, ticks: 0, label: "flexibility →" }, y: { // axis: null, ticks: 0, label: "↑ ease of use" }, color: { type: "identity" }, marks: [ Plot.ruleX([0]), Plot.ruleY([0]), Plot.text( [ { x: 0, y: 0.8, quadrant: "intuitive" }, { x: 0, y: 0.2, quadrant: "hard to learn" }, { x: 0.2, y: -0.05, quadrant: "limited" }, { x: 0.8, y: -0.05, quadrant: "powerful" } ], { x: "x", y: "y", text: "quadrant", dx: -10, textAnchor: "end", fontSize: 12 } ), Plot.areaX( [ { x: 0, y: 1 }, { x: 0.1, y: 0.9 }, { x: 0.7, y: 0.7 }, { x: 0.9, y: 0.1 }, { x: 1, y: 0 } ], { x: "x", y: "y", curve: "cardinal", fill: "lightgrey", fillOpacity: 0.5 } ), Plot.dot(dots, { x: "x", y: "y", stroke: (d) => (d.vis === "Plot" ? "steelblue" : "grey") }), Plot.text(dots, { x: (d) => (d.vis === "Plot" || d.vis === "d3.js" ? d.x - 0.1 : d.x), y: (d) => d.vis === "ggplot2" ? d.y - 0.02 : d.vis === "vega-lite" ? d.y + 0.02 : d.y, text: "vis", dx: 10, textAnchor: "start", fill: (d) => (d.vis === "Plot" ? "steelblue" : "grey") }), Plot.line( [ { x: 0.6, y: 0.7 }, { x: 0.8, y: 0.1 } ], { x: "x", y: "y", stroke: "steelblue", strokeDasharray: 4 } ) ] })32:T804, There are plenty of tools that offer data visualization capabilities to explore your data. The space of these tools is restricted by the tradeoff between ease of use and flexibility. In the diagram above, the grey area is covering these conflicting contraints. On the one hand, you have tools like Excel which have a huge user base because of its ease of use and thus also the speed to create a visualization. But point and click tools offer a fixed set of functionality and flexibility. You might end up wanting to make some changes which the tool does not support. On the other side of the spectrum, you have d3.js or even the pure web technologies which the modern browsers support. They are incredibly powerful, but it takes a significant time to learn and apply their fine granular nuts and bolts. Plot resides in between, trying to provide the sweet spot with the right level of abstraction, like [vega-lite](https://vega.github.io/vega-lite/) or [ggplot2](https://ggplot2.tidyverse.org/) all of which implement [Leland Wilkinson's](https://en.wikipedia.org/wiki/Leland_Wilkinson) Grammar of Graphics. Vega-lite's approach is to provide a declarative specification via a JSON file and as such being portable across many programming languages. Ggplot2 resides in the R ecosystem and can be combined with R Shiny to provide user interaction. Plot's approach is also to infer meaningful defaults for quick results but giving the user the option to update any decision about visual mappings. Being the new kid on the block, Plot is not offering yet all options you might know from vega lite or ggplot2, but Plot’s functionality is expanding very rapidly.
> **Plot has a focus on composability and extensibility and resides in javascript land and as a result can be extended or combined with d3.js, CSS or any javascript functionality.
The natural combination of Plot with the reactivity of Observable gives Plot another 💪superpower dimension which greatly resonates with the iterative nature of visual explorations.**

33:Tacc,### 👉How to start using Plot in 3 steps #### 1) On your mark >Start with the template ~~~js Plot.plot({ marks: [ // enter your marks here ] }) ~~~ >and enter the visual elements - called _[marks](https://github.com/observablehq/plot#marks)_ - you want to display: >![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/dot.png) ➜ [Plot.dot()](https://github.com/observablehq/plot#dot)
![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/text.png) ➜ [Plot.text()](https://github.com/observablehq/plot#text)
![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/link.png) ➜ [Plot.link()](https://github.com/observablehq/plot#link)
![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/cell.png) ➜ [Plot.cell()](https://github.com/observablehq/plot#cell)
![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/line.png) ➜ [Plot.line()](https://github.com/observablehq/plot#line)
![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/area.png) ➜ [Plot.area()](https://github.com/observablehq/plot#area)
![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/barX.png) ➜ [Plot.bar()](https://github.com/observablehq/plot#bar)
![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/rectX.png) ➜ [Plot.rect()](https://github.com/observablehq/plot#rect)
![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/tickX.png) ➜ [Plot.tick()](https://github.com/observablehq/plot#tick)
![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/ruleX.png) ➜ [Plot.rule()](https://github.com/observablehq/plot#rule)
![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/frame.png) ➜ [Plot.frame()](https://github.com/observablehq/plot#frame) #### 2) Get set > Provide your data and which columns to map to visual elements ~~~js ... marks: [ // e.g. you want to visualize your data with little circles: Plot.dot(yourData, {x: "column1", y: "column2"}) ] ... ~~~ > The columns (_column1_ and _column2_) in the example above are just the names of your columns in your data set. Visual elements (like _x_ and _y_ in the example above) which you can refer to your data are called [channels](https://github.com/observablehq/plot#marks). #### 3) Go! >Visualize your data, enjoy, take a deep breath and then adjust the options to fit your application! > >There are a lot of options you can adjust! Some of them are specific to a mark, others are global and apply to the whole plot. There are many [transforms](https://github.com/observablehq/plot#transforms) you can choose from to in order to get the data in (the right) shape! You just iterate and quickly arrive at your desired visualization! 34:Taee,This mapping is called a **scale**. So if you specify a column of your data to be *x*, a scale is computed to define the mapping. In general, you will have more than one mark, with each mark having a potentially different column assigned to *x*. Then Plot will compute a single scale for *x* by looking at all columns! There are marks which have an extent (like ![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/barX.png) `Plot.bar()`, ![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/rectX.png) `Plot.rect()`, ![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/area.png) `Plot.area()`) and therefore are specified by providing *x1* and *x2* instead of *x*. These channels also share the same scale. So what can be confusing at first, is the fact that > *x* has been used as a key of the mark specific options to specify a channel via its corresponding column. Now the scale which is computed in Plot's magic backyard is also called *x*. As you will see in a second, you refer to the global option *x* to customize the default x scale. Correspondingly, a scale called *y* is computed to determine the *y*, *y1* or *y2* positions of the corresponding channels. There are 5 🖐 + 2 ✌️ central scales: | channel | corresponding scale | |-----------------------------|---------| | x, x1, x2 | x | | y, y1, y2 | y | | r | r | | fill, stroke | color | | fillOpacity, strokeOpacity | opacity | There is *r* mapping the *r* channel of ![](https://cdn.jsdelivr.net/gh/EE2dev/plotAPI/icons/marks/dot.png) `Plot.dot()` to the corresponding radius of the circle. The *color* scale determines the color of both the channels *fill* and *stroke*. And *opacity* determines the *fillOpacity* and the *strokeOpacity*. Note that the *color* scale maps the channel, which are numbers, strings, or any data onto colors, so the range is an array of colors. For the color scale, the user can also specify a **scheme** (like 'cool' 😎 or 'rainbow' 🌈) which is a convenient reference to a corresponding color range. (Continuous color schemes use the interval [0, 1] as range to internally derive the corresponding color) I said 5 🖐 + 2 ✌️ scales: there are also the 'meta'-scales *fx* and *fy*. In case you use facets (small multiples of the same visualization for different data segments), the arrangement of these visualizations are also layed out based on scales. So these scales are not used for positioning individual visual elements for each row. Instead these scales are used for mapping a whole little chart to its position! The *fx* scale determines the horizontal position of the facets, where the *fy* scale computes the vertical position.35:T6ac,Transforms can be confusing at the beginning 😨. For the common *bin* and *group* transform you can use the following function to reveal what is happening: ```js import { summarize } from '@ee2dev/plot-party' ``` Whenever you see a Plot with a *bin* or *group* transform and wonder what is going on, you can use this function to describe the resulting binning/grouping. It helps you understand if the same transform applied to different marks is what you want.
The function *summarize()* has four parameters: - *data* ➜ your data - *transform* ➜ the transform as a string, e.g. '*binX*' or '*group*' - *outputs* ➜ the first argument (object) when you call the transform - *options* ➜ the second argument (object) when you call the transform E.g. for the plot:
... *Plot.rect( ${textcolor('athletes', {background: d3.schemeTableau10[0], padding: "0"})},
Plot.${textcolor('bin', {background: d3.schemeTableau10[1], padding: "0"})}(${textcolor('{ fillOpacity: "count" }', {background: d3.schemeTableau10[2], padding: "0"})}, ${textcolor('{ x: "weight", y: "height", fill: "sex" }', {background: d3.schemeTableau10[3], padding: "0"})}))...* you would call *summarize()* as follows: *summarize({
   data: ${textcolor('athletes', {background: d3.schemeTableau10[0], padding: "0"})},
   transform: '${textcolor('bin', {background: d3.schemeTableau10[1], padding: "0"})}',
   outputs: ${textcolor('{ fillOpacity: "count" }', {background: d3.schemeTableau10[2], padding: "0"})},
   options: ${textcolor('{ x: "weight", y: "height", fill: "sex" }', {background: d3.schemeTableau10[3], padding: "0"})}
})*36:T73d,There are many great examples how to use Plot, e.g. https://observablehq.com/@observablehq/plot is a great way to start! But let's create a special scatterplot which you cannot create so easily with other visualization tools - the n-dimensional scatterplot! 🥁 The idea is the following: We want to visualize an arbitrary number of quantitative attributes as a scatterplot. There are many known ways to reduce an n-dimensional data set to 2 dimensions which you can visualize (e.g. [UMAP](https://umap-learn.readthedocs.io/en/latest/), [t-SNE](https://en.wikipedia.org/wiki/T-distributed_stochastic_neighbor_embedding) or [PCA](https://en.wikipedia.org/wiki/Principal_component_analysis)). But we have something else in mind. A scatterplot typically uses two positional dimensions x and y since they are perperdicular/ 90 degrees apart and as a result any point (=row) can be unambiguously traced back to its x and y coordinates (=columns). What we will do is to relax 🛀 this requirement and allow certain ambiguity. To map more columns to positions, we will simply map one column to x and another column to y and any other column we will spread on axes which we distribute within the 90 degrees between x and y. Thus each row will be visualized as a point (x,y) which will be determined by summing up the x and y fraction of each dimension. Here are the steps we take to visualize our n-dimensional scatterplot: - Find all quantitative columns in our dataset - For each of these quantitative columns normalize the values - Determine our axes by the number of quantitative columns, going from 0 degrees to 90 degrees - Compute x and y for each row by summing up the x and y fractions of each dimension Below the scatterplot we plot the angle of each axis. Now move the slider to reduce the angles and see 😱😃 how the scatterplot changes!37:T6c7,allSchemes = new Map([ ["Blues (sequential, single-hue)", "blues"], ["Greens (sequential, single-hue)", "greens"], ["Greys (sequential, single-hue)", "greys"], ["Purples (sequential, single-hue)", "purples"], ["Reds (sequential, single-hue)", "reds"], ["Oranges (sequential, single-hue)", "oranges"], ["Turbo (sequential, multi-hue)", "turbo"], ["Viridis (sequential, multi-hue)", "viridis"], ["Magma (sequential, multi-hue)", "magma"], ["Inferno (sequential, multi-hue)", "inferno"], ["Plasma (sequential, multi-hue)", "plasma"], ["Cividis (sequential, multi-hue)", "cividis"], ["Cubehelix (sequential, multi-hue)", "cubehelix"], ["Warm (sequential, multi-hue)", "warm"], ["Cool (sequential, multi-hue)", "cool"], ["BuGn (sequential, multi-hue)", "bugn"], ["BuPu (sequential, multi-hue)", "bupu"], ["GnBu (sequential, multi-hue)", "gnbu"], ["OrRd (sequential, multi-hue)", "orrd"], ["PuBuGn (sequential, multi-hue)", "pubugn"], ["PuBu (sequential, multi-hue)", "pubu"], ["PuRd (sequential, multi-hue)", "purd"], ["RdPu (sequential, multi-hue)", "rdpu"], ["YlGnBu (sequential, multi-hue)", "ylgnbu"], ["YlGn (sequential, multi-hue)", "ylgn"], ["YlOrBr (sequential, multi-hue)", "ylorbr"], ["YlOrRd (sequential, multi-hue)", "ylorrd"], ["BrBG (diverging)", "brbg"], ["PRGn (diverging)", "prgn"], ["PiYG (diverging)", "piyg"], ["PuOr (diverging)", "puor"], ["RdBu (diverging)", "rdbu"], ["RdGy (diverging)", "rdgy"], ["RdYlBu (diverging)", "rdylbu"], ["RdYlGn (diverging)", "rdylgn"], ["Spectral (diverging)", "spectral"], ["BuRd (diverging)", "burd"], ["BuYlRd (diverging)", "buylrd"], ["Rainbow (cyclical)", "rainbow"], ["Sinebow (cylical)", "sinebow"] ])38:T5f9,function explain_binX(data, outputs, options) { const obj = spot(data, Plot.binX(outputs, options)); const n = obj.data.length; const x1Min = nice(d3.min(obj.x1)); const x1Max = nice(d3.max(obj.x1)); const x2Min = nice(d3.min(obj.x2)); const x2Max = nice(d3.max(obj.x2)); const xMin = nice(d3.min(obj.x)); const xMax = nice(d3.max(obj.x)); const yMin = nice(d3.min(obj.y ? obj.y : obj.y2)); const yMax = nice(d3.max(obj.y ? obj.y : obj.y2)); const n2 = [...new Set(obj.x1)].length; let channels = []; if (options.hasOwnProperty("z")) { channels.push("z"); } if (options.hasOwnProperty("fill")) { channels.push("fill"); } if (options.hasOwnProperty("stroke")) { channels.push("stroke"); } channels.x = options.x && !outputs.x; channels.y = options.y && !outputs.y; let str = md`#### Explaining the ${textcolor( "Plot.binX()", d3.schemeTableau10[1] )} transform: >> *The binX transform results in data with ${n} rows (bins).
The number of bins is determined
by discretizing the channel **x** into intervals*
${ channels.length > 0 ? "*subdivided by channel " + "__" + channels[0] + "__" + "*" : "" }${channels.y ? ", *__y__*" : ""} Each row contains - **x1** and **x2**: ${n2} distinct intervals [**x1**, **x2**] going from [${x1Min}, ${x2Min}] ... to [${x1Max}, ${x2Max}] - **x**: the midpoint of each interval, going from ${xMin} ... to ${xMax} - **y**: the height of each bin, going from ${yMin} ... to ${yMax} `; return str; }39:T5d6,function explain_binY(data, outputs, options) { const obj = spot(data, Plot.binY(outputs, options)); const n = obj.data.length; const y1Min = nice(d3.min(obj.y1)); const y1Max = nice(d3.max(obj.y1)); const y2Min = nice(d3.min(obj.y2)); const y2Max = nice(d3.max(obj.y2)); const xMin = nice(d3.min(obj.x)); const xMax = nice(d3.max(obj.x)); const yMin = nice(d3.min(obj.y)); const yMax = nice(d3.max(obj.y)); const n2 = [...new Set(obj.y1)].length; let channels = []; if (options.hasOwnProperty("z")) { channels.push("z"); } if (options.hasOwnProperty("fill")) { channels.push("fill"); } if (options.hasOwnProperty("stroke")) { channels.push("stroke"); } channels.x = options.x && !outputs.x; channels.y = options.y && !outputs.y; let str = md`#### Explaining the ${textcolor( "Plot.binY()", d3.schemeTableau10[2] )} transform: >> *The binY transform results in data with ${n} rows (bins).
The number of bins is determined
by discretizing the channel **y** into intervals*
${ channels.length > 0 ? "*subdivided by channel " + "__" + channels[0] + "__" + "*" : "" }${channels.x ? ", *__x__*" : ""} Each row contains - **y1** and **y2**: ${n2} distinct intervals [**y1**, **y2**] going from [${y1Min}, ${y2Min}] ... to [${y1Max}, ${y2Max}] - **y**: the midpoint of each interval, going from ${yMin} ... to ${yMax} - **x**: the width of each bin, going from ${xMin} ... to ${xMax} `; return str; }3a:T705,function explain_bin(data, outputs, options) { const obj = spot(data, Plot.bin(outputs, options)); const n = obj.data.length; const x1Min = nice(d3.min(obj.x1)); const x1Max = nice(d3.max(obj.x1)); const x2Min = nice(d3.min(obj.x2)); const x2Max = nice(d3.max(obj.x2)); const y1Min = nice(d3.min(obj.y1)); const y1Max = nice(d3.max(obj.y1)); const y2Min = nice(d3.min(obj.y2)); const y2Max = nice(d3.max(obj.y2)); const xMin = nice(d3.min(obj.x)); const xMax = nice(d3.max(obj.x)); const yMin = nice(d3.min(obj.y)); const yMax = nice(d3.max(obj.y)); const n2 = [...new Set(obj.x1)].length; const n3 = [...new Set(obj.y1)].length; let channels = []; if (options.hasOwnProperty("z")) { channels.push("z"); } if (options.hasOwnProperty("fill")) { channels.push("fill"); } if (options.hasOwnProperty("stroke")) { channels.push("stroke"); } channels.x = options.x && !outputs.x; channels.y = options.y && !outputs.y; let str = md`#### Explaining the ${textcolor( "Plot.bin()", d3.schemeTableau10[3] )} transform: >> *The bin transform results in data with ${n} rows (bins).
The number of bins is determined
by discretizing the channels **x** and **y** into intervals*
${ channels.length > 0 ? "*subdivided by channel " + "__" + channels[0] + "__" + "*" : "" } Each row contains - **x1** and **x2**: ${n2} distinct intervals [**x1**, **x2**] going from [${x1Min}, ${x2Min}] ... to [${x1Max}, ${x2Max}] - **x**: the midpoint of each interval, going from ${xMin} ... to ${xMax} - **y1** and **y2**: ${n3} distinct intervals [**y1**, **y2**] going from [${y1Min}, ${y2Min}] ... to [${y1Max}, ${y2Max}] - **y**: the midpoint of each interval, going from ${yMin} ... to ${yMax} `; return str; }3b:T495,function explain_groupX(data, outputs, options) { const obj = spot(data, Plot.groupX(outputs, options)); const n = obj.data.length; const xMin = nice(d3.min(obj.x)); const xMax = nice(d3.max(obj.x)); const yMin = nice(d3.min(obj.y)); const yMax = nice(d3.max(obj.y)); const n2 = [...new Set(obj.x)].length; let channels = []; if (options.hasOwnProperty("z")) { channels.push("z"); } if (options.hasOwnProperty("fill")) { channels.push("fill"); } if (options.hasOwnProperty("stroke")) { channels.push("stroke"); } channels.x = options.x && !outputs.x; channels.y = options.y && !outputs.y; let str = md`#### Explaining the ${textcolor( "Plot.groupX()", d3.schemeTableau10[4] )} transform: >> *The groupX transform results in data with ${n} rows (bins).
The number of groups/ categories is determined
by the channel __x__*
${ channels.length > 0 ? "*subdivided by channel " + "__" + channels[0] + "__" + "*" : "" } Each row contains - **x**: ${n2} distinct groups, going from ${xMin} ... to ${xMax} - **y**: the height of each group, going from ${yMin} ... to ${yMax} `; return str; }3c:T494,function explain_groupY(data, outputs, options) { const obj = spot(data, Plot.groupY(outputs, options)); const n = obj.data.length; const xMin = nice(d3.min(obj.x)); const xMax = nice(d3.max(obj.x)); const yMin = nice(d3.min(obj.y)); const yMax = nice(d3.max(obj.y)); const n2 = [...new Set(obj.y)].length; let channels = []; if (options.hasOwnProperty("z")) { channels.push("z"); } if (options.hasOwnProperty("fill")) { channels.push("fill"); } if (options.hasOwnProperty("stroke")) { channels.push("stroke"); } channels.x = options.x && !outputs.x; channels.y = options.y && !outputs.y; let str = md`#### Explaining the ${textcolor( "Plot.groupY()", d3.schemeTableau10[5] )} transform: >> *The groupY transform results in data with ${n} rows (bins).
The number of groups/ categories is determined
by the channel __y__*
${ channels.length > 0 ? "*subdivided by channel " + "__" + channels[0] + "__" + "*" : "" } Each row contains - **y**: ${n2} distinct groups, going from ${yMin} ... to ${yMax} - **x**: the width of each group, going from ${xMin} ... to ${xMax} `; return str; }3d:T4c0,function explain_group(data, outputs, options) { const obj = spot(data, Plot.group(outputs, options)); const n = obj.data.length; const xMin = nice(d3.min(obj.x)); const xMax = nice(d3.max(obj.x)); const yMin = nice(d3.min(obj.y)); const yMax = nice(d3.max(obj.y)); const n2 = [...new Set(obj.x)].length; const n3 = [...new Set(obj.y)].length; let channels = []; if (options.hasOwnProperty("z")) { channels.push("z"); } if (options.hasOwnProperty("fill")) { channels.push("fill"); } if (options.hasOwnProperty("stroke")) { channels.push("stroke"); } channels.x = options.x && !outputs.x; channels.y = options.y && !outputs.y; let str = md`#### Explaining the ${textcolor( "Plot.group()", d3.schemeTableau10[7] )} transform: >> *The group transform results in data with ${n} rows (bins).
The number of groups/ categories is determined
by the channels __x__, __y__*
${ channels.length > 0 ? "*subdivided by channel " + "__" + channels[0] + "__" + "*" : "" } Each row contains - **x**: ${n2} distinct groups, going from ${xMin} ... to ${xMax} - **y**: ${n3} distinct groups, going from ${yMin} ... to ${yMax} `; return str; }3e:[{"id":"46ba542ffb6e4d8bea0aa16eeed1c863e3096bd34d067d218fcde01c63d63fada7b37da233d6a8d4a8d111815fab0ece2ed1de1eb2aad78167a634d864f8a698","href":"https://static.observableusercontent.com/files/46ba542ffb6e4d8bea0aa16eeed1c863e3096bd34d067d218fcde01c63d63fada7b37da233d6a8d4a8d111815fab0ece2ed1de1eb2aad78167a634d864f8a698","name":"plot1.png","type":"image/png","lastModified":1630531830707.854,"size":3679},{"id":"4056ca831f805d359fc824f99e39ccb3cad07d3fd60c295253727d68ce0ea8ec01f8569d26817369fa13fe6887258d91e29c9d5dfb577419e6b4e1e08f233778","href":"https://static.observableusercontent.com/files/4056ca831f805d359fc824f99e39ccb3cad07d3fd60c295253727d68ce0ea8ec01f8569d26817369fa13fe6887258d91e29c9d5dfb577419e6b4e1e08f233778","name":"plot2.png","type":"image/png","lastModified":1630531830707.507,"size":17776},{"id":"1f1d601ebf1cd382d7100b1b8224524041ab86ef78bc40a069c705b5a0f317302748b10598966462ca0abfa11ea6d70ddac14af01c06fcb1954b32839b0fa42d","href":"https://static.observableusercontent.com/files/1f1d601ebf1cd382d7100b1b8224524041ab86ef78bc40a069c705b5a0f317302748b10598966462ca0abfa11ea6d70ddac14af01c06fcb1954b32839b0fa42d","name":"plot3.png","type":"image/png","lastModified":1630531830729.296,"size":4719}] 2e:{"title":"Plot party! 🥳🎉","cells":[{"id":0,"value":"# Plot party! 🥳🎉\n\nPlot v0.2 has been released in August 2021, and just a month later we are already at v0.2.7. \nSo it's time to throw a little Plot party!","pinned":false,"hidden":false,"mode":"md"},{"id":444,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":556,"value":"## 2. A gentle introduction to Plot","pinned":false,"hidden":false,"mode":"md"},{"id":188,"value":"### 2.1 What's so special about Plot?\n","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"### 2.2 The basic concepts - the plot behind Plot🧐\n","pinned":false,"hidden":false,"mode":"md"},{"id":258,"value":"### 👉Choose your data to be visualized\n\nThere are many ways to get your data into Observable, the important thing is to make sure that the data is properly typed! Remember, many default decisions are driven by the types.\n\nTo load data into a notebook, see https://observablehq.com/@observablehq/getting-data-into-a-notebook or if you just want to import some local data - you might want to use [✨this template](https://observablehq.com/@ee2dev/template-for-exploring-a-data-set)!","pinned":false,"hidden":false,"mode":"md"},{"id":244,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":235,"value":"### 👉Using Plot in Observable\nIn Observable, Plot is included as standard library so you don't need to require or import anything. Even better, with two clicks you get the template just described handed to you instantly! ","pinned":false,"hidden":false,"mode":"md"},{"id":275,"value":"#### 1) Click on the following icon on the right hand side to open the snippets pane","pinned":false,"hidden":false,"mode":"md"},{"id":269,"value":"FileAttachment(\"plot1.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"#### 2) Select the plot chart you want to create ...","pinned":false,"hidden":false,"mode":"md"},{"id":293,"value":"FileAttachment(\"plot2.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"#### ... et voilà! You get a cell with the code snippet in it","pinned":false,"hidden":false,"mode":"md"},{"id":297,"value":"FileAttachment(\"plot3.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"How 😎cool is that?","pinned":false,"hidden":false,"mode":"md"},{"id":343,"value":"### 👉Scales - the secret sauce","pinned":false,"hidden":false,"mode":"md"},{"id":481,"value":"When you create a channel, e.g. by assigning a column to x or to y in the options object, a lot of things happen under hood. A *mapping* is computed to determine how data ends up at a certain *x* or *y* position. For that, three ingredients need to be figured out:\n\n- the interval of values you want to plot - called **domain** - specifying the data space. The interval of the domain is set to start from the minimum and to end with the maximum of your column values\n \n- the interval of pixels you use for plotting the values - called **range** - specifying the screen space to be used. This is determined by the width (for *x*) or height (for *y*) reduced by the margin in case you create one plot\n\n- the function how we map from the domain onto the range - called **type**. This is typically a linear mapping by default\n","pinned":false,"hidden":false,"mode":"md"},{"id":499,"value":"domain \\xrightarrow{type} range","pinned":false,"hidden":false,"mode":"tex"},{"id":506,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":346,"value":"### 👉Customizing - make it your Plot!","pinned":false,"hidden":false,"mode":"md"},{"id":597,"value":"Let's load some data!\n\nWe will use data with one row per country and the columns are country, region, population, population change, median age, area and some more... \n\nThe original sources are: \n- https://en.wikipedia.org/wiki/List_of_countries_by_population_(United_Nations)\n- https://www.worldometers.info/world-population/population-by-country/","pinned":false,"hidden":false,"mode":"md"},{"id":646,"value":"initialData = await d3.csv(\n \"https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/test/data/countries.csv\",\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"countries = {\n return initialData.map((d) => ({\n country: d.country,\n region: d.region,\n population_20: d.population_2020,\n population_19: d.population_2019,\n pop_change_20: d.population_change_2020 / 100,\n pop_change_19: d.population_change_2019 / 100,\n density: d.density,\n area: d.area,\n migrants_net: d.migrants_net,\n fert_rate: d.fert_rate,\n age_median: d.age_median,\n pop_urban_perc: d.pop_urban_perc,\n world_share: d.world_share\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"As mentioned above, it is important to make sure the types are correct, so here we have used d3.autotype and in addition made some adjustments. It is always good to check if the types are correct, for example with \n\n~~~\n Inputs.table()\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":615,"value":"Inputs.table(countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"That looks fine, let's make a scatter plot. Let's have the size of the population on the x axis, the fertility rate (= average number of children per woman) on the y axis. The radius of each country is set to reflect its area and the color its region (= roughly continent)...","pinned":false,"hidden":false,"mode":"md"},{"id":624,"value":"Plot.plot({\n marks: [\n Plot.dot(countries, {\n x: \"population_20\",\n y: \"fert_rate\",\n r: \"area\",\n fill: \"region\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":631,"value":"Let's say we don't like the default radius and we want the radius to go from 1 to 20...\n\n.. No problem, we know the radius is governed by the r scale. So let's just change the range of the r scale! We also set the title option of the mark, so we can hover over the circles and have a tooltip. ","pinned":false,"hidden":false,"mode":"md"},{"id":636,"value":"Plot.plot({\n r: { range: [1, 20] },\n marks: [\n Plot.dot(countries, {\n x: \"population_20\",\n y: \"fert_rate\",\n r: \"area\",\n fill: \"region\",\n title: (d) => {\n let title = \"\";\n for (let key of Object.keys(d)) {\n title += `${key}: ${\n typeof d[key] === \"number\" ? d3.format(\".2f\")(d[key]) : d[key]\n } \\n`;\n }\n return title;\n }\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":685,"value":"Now let's add the axis lines, we will do that with the *line* option of the *x* and *y* scales.","pinned":false,"hidden":false,"mode":"md"},{"id":697,"value":"Plot.plot({\n x: {\n line: true\n },\n y: {\n line: true\n },\n r: { range: [1, 20] },\n marks: [\n Plot.dot(countries, {\n x: \"population_20\",\n y: \"fert_rate\",\n r: \"area\",\n fill: \"region\",\n title: (d) => {\n let title = \"\";\n for (let key of Object.keys(d)) {\n title += `${key}: ${\n typeof d[key] === \"number\" ? d3.format(\".2f\")(d[key]) : d[key]\n } \\n`;\n }\n return title;\n }\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":699,"value":"Now let's make use of the great combo of Plot with observable 💪:
To change the color of the fill option, we have to address the color scale. With observable, we can easily expose the schemes to the user. Observable will update the color accordingly! ","pinned":false,"hidden":false,"mode":"md"},{"id":714,"value":"viewof myscheme = Inputs.select(allSchemes, {\n label: \"Pick a color scheme:\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"Plot.plot({\n x: {\n line: true\n },\n y: {\n line: true\n },\n r: { range: [1, 20] },\n color: {\n scheme: myscheme\n },\n marks: [\n Plot.dot(countries, {\n x: \"population_20\",\n y: \"fert_rate\",\n r: \"area\",\n fill: \"region\",\n title: (d) => {\n let title = \"\";\n for (let key of Object.keys(d)) {\n title += `${key}: ${\n typeof d[key] === \"number\" ? d3.format(\".2f\")(d[key]) : d[key]\n } \\n`;\n }\n return title;\n }\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":739,"value":"So far we have learned some scales in action! The description above that scales are mappings are actually just part of the story. E.g. the positional scales *x* and *y* actually have a lot more to offer to also customize the corresponding axis - some of the options are exposed here: 🎬 ","pinned":false,"hidden":false,"mode":"md"},{"id":767,"value":"viewof so = view`\n

Some options for customizing the x scale

${[\n \"...\",\n {\n type: Inputs.select([\"linear\", \"pow\", \"sqrt\", \"log\", \"symlog\"], {\n label: \"type:\"\n }),\n line: Inputs.toggle({ label: \"line:\", value: true }),\n reverse: Inputs.toggle({ label: \"reverse:\" }),\n grid: Inputs.toggle({ label: \"grid:\" }),\n ticks: Inputs.range([0, 30], {\n value: 5,\n step: 1,\n label: \"ticks:\"\n }),\n tickSize: Inputs.range([0, 30], {\n value: 6,\n step: 1,\n label: \"tickSize:\"\n }),\n tickRotate: Inputs.range([0, 360], {\n value: 0,\n step: 1,\n label: \"tickRotate:\"\n }),\n tickFormat: Inputs.text({\n placeholder: \".e.g.:'.2s'\",\n value: \"\",\n label: \"tickFormat:\"\n }),\n labelAnchor: Inputs.select([\"right\", \"left\", \"center\"], {\n label: \"labelAnchor:\"\n }),\n labelOffset: Inputs.range([0, 50], {\n value: 30,\n step: 1,\n label: \"labelOffset:\"\n })\n }\n]}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"Plot.plot({\n marginBottom: 50,\n x: {\n type: so.type,\n line: so.line,\n exponent: so.type === \"pow\" ? 2 : 1,\n reverse: so.reverse,\n grid: so.grid,\n ticks: so.ticks,\n tickSize: so.tickSize,\n tickRotate: so.tickRotate,\n tickFormat: so.tickFormat,\n labelAnchor: so.labelAnchor,\n labelOffset: so.labelOffset\n },\n y: {\n line: true\n },\n r: { range: [1, 20] },\n color: {\n scheme: myscheme\n },\n marks: [\n Plot.dot(countries, {\n x: \"population_20\",\n y: \"fert_rate\",\n r: \"area\",\n fill: \"region\",\n title: (d) => {\n let title = \"\";\n for (let key of Object.keys(d)) {\n title += `${key}: ${\n typeof d[key] === \"number\" ? d3.format(\".2f\")(d[key]) : d[key]\n } \\n`;\n }\n return title;\n }\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1531,"value":"With Plot 0.2.5 you can now even expose a scale programmatically as follows (see also [here](https://observablehq.com/@observablehq/whats-new-in-observable-plot-0-2-7)):","pinned":false,"hidden":false,"mode":"md"},{"id":1539,"value":"Plot.dot(countries, {\n x: \"population_20\",\n y: \"fert_rate\",\n r: \"area\",\n fill: \"region\"\n})\n .plot()\n .scale(\"color\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":546,"value":"### 👉Transforms - make your data fit!","pinned":false,"hidden":false,"mode":"md"},{"id":563,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":1674,"value":"###
💡 Plot.binX()","pinned":false,"hidden":false,"mode":"md"},{"id":1640,"value":"Plot.rectY(\n d3.range(0, 100),\n Plot.binX({ y: \"count\" }, { fill: (d) => d % 2 })\n).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1641,"value":"summarize({\n data: d3.range(0, 100),\n transform: \"binX\",\n outputs: { y: \"count\" },\n options: { fill: (d) => d % 2 }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1772,"value":"###
💡 Plot.binY()","pinned":false,"hidden":false,"mode":"md"},{"id":1084,"value":"Plot.rectX(athletes, Plot.binY({ x: \"count\" }, { y: \"weight\" })).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1661,"value":"summarize({\n data: athletes,\n transform: \"binY\",\n outputs: { x: \"count\" },\n options: { y: \"weight\" }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1773,"value":"###
💡 Plot.bin()","pinned":false,"hidden":false,"mode":"md"},{"id":1685,"value":"Plot.rect(\n athletes,\n Plot.bin(\n { fillOpacity: \"count\" },\n { x: \"weight\", y: \"height\", fill: \"sex\", inset: 0 }\n )\n).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1689,"value":"summarize({\n data: athletes,\n transform: \"bin\",\n outputs: { fillOpacity: \"count\" },\n options: { x: \"weight\", y: \"height\", fill: \"sex\", inset: 0 }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1775,"value":"###
💡 Plot.groupX()","pinned":false,"hidden":false,"mode":"md"},{"id":1695,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.barY(penguins, Plot.groupX({ y: \"count\" }, { x: \"species\" })),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1697,"value":"summarize({\n data: penguins,\n transform: \"groupX\",\n outputs: { y: \"count\" },\n options: { x: \"species\" }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1777,"value":"###
💡 Plot.groupY()","pinned":false,"hidden":false,"mode":"md"},{"id":927,"value":"Plot.plot({\n marginLeft: 70,\n x: {\n grid: true\n },\n marks: [\n Plot.barX(\n penguins,\n Plot.groupY({ x: \"count\" }, { y: \"species\", fill: \"island\" })\n ),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1706,"value":"summarize({\n data: penguins,\n transform: \"groupY\",\n outputs: { x: \"count\" },\n options: { y: \"species\", fill: \"island\" }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1779,"value":"###
💡 Plot.groupZ()","pinned":false,"hidden":false,"mode":"md"},{"id":1712,"value":"Plot.plot({\n x: {\n percent: true\n },\n marks: [\n Plot.barX(\n penguins,\n Plot.stackX(Plot.groupZ({ x: \"proportion\" }, { fill: \"sex\" }))\n ),\n Plot.ruleX([0, 1])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1714,"value":"summarize({\n data: penguins,\n transform: \"groupZ\",\n outputs: { x: \"proportion\" },\n options: { fill: \"sex\" }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1781,"value":"###
💡 Plot.group()","pinned":false,"hidden":false,"mode":"md"},{"id":1719,"value":"Plot.plot({\n padding: 0,\n y: {\n tickFormat: Plot.formatMonth()\n },\n color: {\n scheme: \"BuRd\"\n },\n marks: [\n Plot.cell(\n seattle,\n Plot.group(\n { fill: \"max\" },\n {\n x: (d) => d.date.getUTCDate(),\n y: (d) => d.date.getUTCMonth(),\n fill: \"temp_max\",\n inset: 0.5\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1724,"value":"summarize({\n data: seattle,\n transform: \"group\",\n outputs: { fill: \"max\" },\n options: {\n x: (d) => d.date.getUTCDate(),\n y: (d) => d.date.getUTCMonth(),\n fill: \"temp_max\",\n inset: 0.5\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"##
3. Bonus section - The n-dimensional scatterPlot 🖐","pinned":false,"hidden":false,"mode":"md"},{"id":326,"value":"$36","pinned":false,"hidden":false,"mode":"md"},{"id":341,"value":"viewof alpha = Inputs.range([1, 90], {\n step: 1,\n value: 90,\n label: \"degrees separating the most distant dimensions\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"html`${plotDots}${plotLinks}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"**Happy Plotting!**\n\n- official Plot documentation: https://github.com/observablehq/plot\n- visualization of the Plot API by me: https://ee2dev.github.io/plot/","pinned":false,"hidden":false,"mode":"md"},{"id":317,"value":"

\n### Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":367,"value":"#### overview chart","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"dots = [\n { x: 0.1, y: 0.8, vis: \"Excel\" },\n { x: 0.8, y: 0.1, vis: \"d3.js\" },\n { x: 0.9, y: 0.05, vis: \"web technologies\" },\n { x: 0.6, y: 0.7, vis: \"Plot\" },\n { x: 0.65, y: 0.7, vis: \"vega-lite\" },\n { x: 0.65, y: 0.71, vis: \"ggplot2\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"#### customizing","pinned":false,"hidden":false,"mode":"md"},{"id":719,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"#### transforms","pinned":false,"hidden":false,"mode":"md"},{"id":887,"value":"import { athletes } from \"@observablehq/plot-bin\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"import { penguins, seattle } from \"@observablehq/plot-group\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1624,"value":"function summarize(_) {\n switch (_.transform) {\n case \"binX\":\n return explain_binX(_.data, _.outputs, _.options);\n break;\n case \"binY\":\n return explain_binY(_.data, _.outputs, _.options);\n break;\n case \"bin\":\n return explain_bin(_.data, _.outputs, _.options);\n break;\n case \"groupX\":\n return explain_groupX(_.data, _.outputs, _.options);\n break;\n case \"groupY\":\n return explain_groupY(_.data, _.outputs, _.options);\n break;\n case \"groupZ\":\n return explain_groupZ(_.data, _.outputs, _.options);\n break;\n case \"group\":\n return explain_group(_.data, _.outputs, _.options);\n break;\n default:\n return md`😞 Unfortunately, I cannot explain this transform,
you can fork and teach me how to explain it!\n\nCurrently, I can summarize the following transforms:\n- 'binX'\n- 'binY'\n- 'bin'\n- 'groupX'\n- 'groupY'\n- 'groupZ'\n- 'group'\n`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":877,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1609,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":916,"value":"function explain_groupZ(data, outputs, options) {\n const obj = spot(data, Plot.groupZ(outputs, options));\n const n = obj.data.length;\n const n2 = n;\n\n let channels = [];\n if (options.hasOwnProperty(\"z\")) {\n channels.push(\"z\");\n }\n if (options.hasOwnProperty(\"fill\")) {\n channels.push(\"fill\");\n }\n if (options.hasOwnProperty(\"stroke\")) {\n channels.push(\"stroke\");\n }\n channels.x = options.x && !outputs.x;\n channels.y = options.y && !outputs.y;\n\n let str = md`#### Explaining the ${textcolor(\n \"Plot.groupZ()\",\n d3.schemeTableau10[6]\n )} transform:\n>> *The groupZ transform results in data with ${n} rows (bins).
\nThe number of groups/ categories is determined
\nby the channel*\n${channels.length > 0 ? \"*__\" + channels[0] + \"__\" + \"*\" : \"\"}\n`;\n return str;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"function nice(x) {\n return typeof x === \"date\" ? Plot.formatIsoDate(x) : x;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"#### scatterplot","pinned":false,"hidden":false,"mode":"md"},{"id":377,"value":"plotDots = Plot.plot({\n x: {\n ticks: 0 // axis is not shown\n },\n y: {\n ticks: 0 // axis is not shown\n },\n r: {\n range: [1, 15]\n },\n inset: 14,\n marks: [\n Plot.dot(data1_new, {\n x: \"x_new\",\n y: \"y_new\",\n r: \"area\",\n fill: \"region\",\n title: (d) => {\n let title = \"\";\n for (let key of Object.keys(d)) {\n title += `${key}: ${\n typeof d[key] === \"number\" ? d3.format(\".2f\")(d[key]) : d[key]\n } \\n`;\n }\n return title;\n }\n }),\n Plot.frame()\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"plotLinks = Plot.plot({\n width,\n height: 100,\n facet: {\n data: data_link,\n x: \"key\"\n },\n x: {\n domain: [-1, 1]\n },\n y: {\n domain: [-1, 1]\n },\n fx: {\n label: null,\n domain: Object.keys(data_num[0])\n },\n marks: [\n Plot.link(data_link, {\n x1: \"x1\",\n y1: \"y1\",\n x2: \"x2\",\n y2: \"y2\"\n }),\n Plot.dot(data_link, {\n x: \"x1\",\n y: \"y1\"\n }),\n Plot.frame()\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"function getQuantitativeColumns(_data) {\n // determine quantitative columns just based on first row\n let ar = [];\n let numCol = [];\n for (let key in _data[0]) {\n if (typeof _data[0][key] === \"number\") {\n numCol.push(key);\n }\n }\n ar = getColumns(_data, ...numCol);\n return ar;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"function getColumns(_data, ...keys) {\n return _data.map((d) => pick(d, ...keys));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"pick = (obj, ...keys) =>\n Object.fromEntries(\n keys.filter((key) => key in obj).map((key) => [key, obj[key]])\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"function getNewXY(_data, _numColumns = _data) {\n // determine quantitative columns just based on first row\n let ar = [];\n let x_new;\n let y_new;\n let keys = Object.keys(_numColumns[0]);\n ar = _data.map((d) => {\n x_new = 0;\n y_new = 0;\n keys.forEach((key, i) => {\n x_new =\n x_new +\n Math.cos((((i / (keys.length - 1)) * alpha) / 100) * 2 * Math.PI) *\n d[key];\n y_new =\n y_new +\n Math.sin((((i / (keys.length - 1)) * alpha) / 100) * 2 * Math.PI) *\n d[key];\n });\n return { ...d, x_new, y_new };\n });\n return ar;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"function normalizeColumns(_data, _numColumns = _data) {\n // determine quantitative columns just based on first row\n let ar = [];\n let keys = Object.keys(_numColumns[0]);\n let scale = {};\n let obj = {};\n\n for (const key of keys) {\n scale[key] = d3.scaleLinear().domain(d3.extent(_data, (d) => d[key]));\n }\n for (const row of _data) {\n obj = { ...row };\n for (const key of keys) {\n obj[key] = scale[key](row[key]);\n }\n ar.push(obj);\n }\n return ar;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"data_link = getLinkData(Object.keys(data_num[0]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"function getLinkData(_numKeys) {\n let ar = [];\n let obj;\n let keys = _numKeys;\n keys.forEach((key, i) => {\n obj = {};\n obj.key = key;\n obj.x1 = 0;\n obj.y1 = 0;\n obj.x2 = Math.cos((((i / (keys.length - 1)) * alpha) / 360) * 2 * Math.PI);\n obj.y2 = Math.sin((((i / (keys.length - 1)) * alpha) / 360) * 2 * Math.PI);\n ar.push(obj);\n });\n return ar;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"data1_new = getNewXY(normalizeColumns(countries, data1_columns), data1_columns)","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"data_num = normalizeColumns(getQuantitativeColumns(countries))","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"data1_columns = getQuantitativeColumns(countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"#### misc","pinned":false,"hidden":false,"mode":"md"},{"id":435,"value":"import { toc } from \"@mbostock/toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"import { textcolor } from \"@observablehq/text-color-annotations-in-markdown\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":823,"value":"import { spot } from \"@enjalot/plot-spot\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}