(d) => …

Author: mbostock

docs/features/marks.md

@@ -465,7 +465,7 @@ Plot.dot(sales, {x: "units", y: "fruit"}).plot()
 While a column name such as `"units"` is the most concise way of specifying channel values, values can also be specified as functions for greater flexibility, say to transform data or derive a new column on the fly. Channel functions are invoked for each datum (*d*) in the data and return the corresponding channel value. (This is similar to how D3’s [*selection*.attr](https://github.com/d3/d3-selection/blob/main/README.md#selection_attr) accepts functions, though note that Plot channel functions should return abstract values, not visual values.)
 
 ```js
-Plot.dot(sales, {x: d => d.units * 1000, y: d => d.fruit}).plot()
+Plot.dot(sales, {x: (d) => d.units * 1000, y: (d) => d.fruit}).plot()
 ```
 
 Plot also supports columnar data for greater efficiency with bigger datasets; for example, data can be specified as any array of the appropriate length (or any iterable or value compatible with [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)), and then separate arrays of values can be passed as *options*.
@@ -550,7 +550,7 @@ The color channels (**fill** and **stroke**) are bound to the *color* scale by d
 In addition to functions of data, arrays, and column names, channel values can be specified as an object with a *transform* method; this transform method is passed the mark’s array of data and must return the corresponding array of channel values. (Whereas a channel value specified as a function is invoked repeatedly for each element in the mark’s data, similar to *array*.map, the transform method is invoked only once being passed the entire array of data.) For example, to pass the mark’s data directly to the **x** channel, equivalent to [Plot.identity](./transforms.md#plotidentity):
 
 ```js
-Plot.dot(numbers, {x: {transform: data => data}})
+Plot.dot(numbers, {x: {transform: (data) => data}})
 ```
 
 The **title**, **href**, and **ariaLabel** options can *only* be specified as channels. When these options are specified as a string, the string refers to the name of a column in the mark’s associated data. If you’d like every instance of a particular mark to have the same value, specify the option as a function that returns the desired value, *e.g.* `() => "Hello, world!"`.

docs/features/scales.md

@@ -298,7 +298,7 @@ Plot.plot({
 
 And like position scales, you can apply a *sqrt*, *pow*, *log*, or *symlog* transform; these are often useful when working with non-uniformly distributed data.
 
-<!-- html`${["log", "symlog", "sqrt", "linear"].map(type => html`<div style="position: relative;">
+<!-- html`${["log", "symlog", "sqrt", "linear"].map((type) => html`<div style="position: relative;">
   <div style="position: absolute; color: white; font: bold 13px/33px var(--sans-serif); padding: 0 38px;">${type}</div>${Plot.plot({
   height: 33,
   color: {
@@ -567,7 +567,7 @@ Plot.plot({
   y: {
     grid: true,
     label: `↑ Daily temperature range (°${celsius ? "C" : "F"})`,
-    transform: celsius ? f => (f - 32) * (5 / 9) : undefined // Fahrenheit to Celsius
+    transform: celsius ? (f) => (f - 32) * (5 / 9) : undefined // Fahrenheit to Celsius
   },
   marks: [
     Plot.areaY(sftemp, {x: "date", y1: "low", y2: "high"})
@@ -689,7 +689,7 @@ The *scale*.**transform** option allows you to apply a function to all values be
 Plot.plot({
   y: {
     label: "↑ Temperature (°F)",
-    transform: f => f * 9 / 5 + 32 // convert Celsius to Fahrenheit
+    transform: (f) => f * 9 / 5 + 32 // convert Celsius to Fahrenheit
   },
   marks: …
 })

docs/marks/box.md

@@ -125,15 +125,15 @@ The given *options* are passed through to these underlying marks, with the excep
 ## boxX(*data*, *options*)
 
 ```js
-Plot.boxX(simpsons.map(d => d.imdb_rating))
+Plot.boxX(simpsons.map((d) => d.imdb_rating))
 ```
 
 Returns a horizontal box mark. If the **x** option is not specified, it defaults to the identity function, as when *data* is an array of numbers. If the **y** option is not specified, it defaults to null; if the **y** option is specified, it should represent an ordinal (discrete) value.
 
 ## boxY(*data*, *options*)
 
 ```js
-Plot.boxY(simpsons.map(d => d.imdb_rating))
+Plot.boxY(simpsons.map((d) => d.imdb_rating))
 ```
 
 Returns a vertical box mark. If the **y** option is not specified, it defaults to the identity function, as when *data* is an array of numbers. If the **x** option is not specified, it defaults to null; if the **x** option is specified, it should represent an ordinal (discrete) value.

docs/marks/density.md

@@ -186,18 +186,18 @@ Plot.plot({
   inset: 10,
   color: {legend: true},
   marks: [
-    Plot.density(penguins.filter(d => d.sex), {
-      weight: d => d.sex === "FEMALE" ? 1 - skew : 1 + skew,
+    Plot.density(penguins.filter((d) => d.sex), {
+      weight: (d) => d.sex === "FEMALE" ? 1 - skew : 1 + skew,
       x: "flipper_length_mm",
       y: "culmen_length_mm",
       strokeOpacity: 0.5,
       clip: true
     }),
-    Plot.dot(penguins.filter(d => d.sex), {
+    Plot.dot(penguins.filter((d) => d.sex), {
       x: "flipper_length_mm",
       y: "culmen_length_mm",
       stroke: "sex",
-      strokeOpacity: d => d.sex === "FEMALE" ? 1 - skew : 1 + skew
+      strokeOpacity: (d) => d.sex === "FEMALE" ? 1 - skew : 1 + skew
     }),
     Plot.frame()
   ]

docs/marks/dot.md

@@ -35,7 +35,7 @@ onMounted(() => {
   });
   d3.csv("../data/us-population-state-age.csv", d3.autoType).then((data) => {
     const ages = data.columns.slice(1); // convert wide data to tidy data
-    stateage.value = Object.assign(ages.flatMap(age => data.map((d) => ({state: d.name, age, population: d[age]}))), {ages});
+    stateage.value = Object.assign(ages.flatMap((age) => data.map((d) => ({state: d.name, age, population: d[age]}))), {ages});
   });
 });
 

docs/marks/line.md

@@ -22,14 +22,14 @@ onMounted(() => {
   d3.json("../data/countries-110m.json").then((data) => (world.value = data));
   d3.csv("../data/us-population-state-age.csv", d3.autoType).then((data) => {
     const ages = data.columns.slice(1); // convert wide data to tidy data
-    stateage.value = Object.assign(ages.flatMap(age => data.map((d) => ({state: d.name, age, population: d[age]}))), {ages});
+    stateage.value = Object.assign(ages.flatMap((age) => data.map((d) => ({state: d.name, age, population: d[age]}))), {ages});
   });
   Promise.all([
     d3.csv("../data/amzn.csv", d3.autoType),
     d3.csv("../data/goog.csv", d3.autoType),
     d3.csv("../data/ibm.csv", d3.autoType)
   ]).then((datas) => {
-    stocks.value = d3.zip(["AAPL", "AMZN", "GOOG", "IBM"], [aapl].concat(datas)).flatMap(([Symbol, data]) => data.map(d => ({Symbol, ...d})));
+    stocks.value = d3.zip(["AAPL", "AMZN", "GOOG", "IBM"], [aapl].concat(datas)).flatMap(([Symbol, data]) => data.map((d) => ({Symbol, ...d})));
   });
 });
 
@@ -372,7 +372,7 @@ Returns a new line with the given *data* and *options*. If neither the **x** nor
 ## lineX(*data*, *options*)
 
 ```js
-Plot.lineX(aapl.map(d => d.Close))
+Plot.lineX(aapl.map((d) => d.Close))
 ```
 
 Similar to [line](#line-data-options) except that if the **x** option is not specified, it defaults to the identity function and assumes that *data* = [*x₀*, *x₁*, *x₂*, …]. If the **y** option is not specified, it defaults to [0, 1, 2, …].
@@ -388,7 +388,7 @@ The **interval** option is recommended to “regularize” sampled data; for exa
 ## lineY(*data*, *options*)
 
 ```js
-Plot.lineY(aapl.map(d => d.Close))
+Plot.lineY(aapl.map((d) => d.Close))
 ```
 
 Similar to [line](#line-data-options) except that if the **y** option is not specified, it defaults to the identity function and assumes that *data* = [*y₀*, *y₁*, *y₂*, …]. If the **x** option is not specified, it defaults to [0, 1, 2, …].

docs/marks/tick.md

@@ -11,7 +11,7 @@ const stateage = shallowRef([]);
 onMounted(() => {
   d3.csv("../data/us-population-state-age.csv", d3.autoType).then((data) => {
     const ages = data.columns.slice(1); // convert wide data to tidy data
-    stateage.value = Object.assign(ages.flatMap(age => data.map((d) => ({state: d.name, age, population: d[age]}))), {ages});
+    stateage.value = Object.assign(ages.flatMap((age) => data.map((d) => ({state: d.name, age, population: d[age]}))), {ages});
   });
 });
 

docs/transforms/group.md

@@ -388,19 +388,19 @@ Plot.groupX({y: "sum"}, {x: "species", y: "body_mass_g"})
 You can control whether a channel is computed before or after grouping. If a channel is declared only in *options* (and it is not a special group-eligible channel such as **x**, **y**, **z**, **fill**, or **stroke**), it will be computed after grouping and be passed the grouped data: each datum is the array of input data corresponding to the current group.
 
 ```js
-Plot.groupX({y: "count"}, {x: "species", title: group => group.map(d => d.body_mass_g).join("\n")})
+Plot.groupX({y: "count"}, {x: "species", title: (group) => group.map((d) => d.body_mass_g).join("\n")})
 ```
 
 This is equivalent to declaring the channel only in *outputs*.
 
 ```js
-Plot.groupX({y: "count", title: group => group.map(d => d.body_mass_g).join("\n")}, {x: "species"})
+Plot.groupX({y: "count", title: (group) => group.map((d) => d.body_mass_g).join("\n")}, {x: "species"})
 ```
 
 However, if a channel is declared in both *outputs* and *options*, then the channel in *options* is computed before grouping and can be aggregated using any built-in reducer (or a custom reducer function) during the group transform.
 
 ```js
-Plot.groupX({y: "count", title: masses => masses.join("\n")}, {x: "species", title: "body_mass_g"})
+Plot.groupX({y: "count", title: (masses) => masses.join("\n")}, {x: "species", title: "body_mass_g"})
 ```
 
 If any of **z**, **fill**, or **stroke** is a channel, the first of these channels is considered the *z* dimension and will be used to subdivide groups.

docs/transforms/normalize.md

@@ -15,11 +15,11 @@ onMounted(() => {
     d3.csv("../data/goog.csv", d3.autoType),
     d3.csv("../data/ibm.csv", d3.autoType)
   ]).then((datas) => {
-    stocks.value = d3.zip(["AAPL", "AMZN", "GOOG", "IBM"], datas).flatMap(([Symbol, data]) => data.map(d => ({Symbol, ...d})));
+    stocks.value = d3.zip(["AAPL", "AMZN", "GOOG", "IBM"], datas).flatMap(([Symbol, data]) => data.map((d) => ({Symbol, ...d})));
   });
   d3.csv("../data/us-population-state-age.csv", d3.autoType).then((data) => {
     const ages = data.columns.slice(1); // convert wide data to tidy data
-    stateage.value = Object.assign(ages.flatMap(age => data.map((d) => ({state: d.name, age, population: d[age]}))), {ages});
+    stateage.value = Object.assign(ages.flatMap((age) => data.map((d) => ({state: d.name, age, population: d[age]}))), {ages});
   });
 });
 

docs/transforms/select.md

@@ -13,7 +13,7 @@ onMounted(() => {
     d3.csv("../data/goog.csv", d3.autoType),
     d3.csv("../data/ibm.csv", d3.autoType)
   ]).then((datas) => {
-    stocks.value = d3.zip(["AAPL", "AMZN", "GOOG", "IBM"], [aapl].concat(datas)).flatMap(([Symbol, data]) => data.map(d => ({Symbol, ...d})));
+    stocks.value = d3.zip(["AAPL", "AMZN", "GOOG", "IBM"], [aapl].concat(datas)).flatMap(([Symbol, data]) => data.map((d) => ({Symbol, ...d})));
   });
 });