30:[{"id":"aab82c7a3d386f86cc1fb327f45268d344ceaf1c790255cae43487354a45d049f40df21ae9dfc4dbfea7d3d5983327e134688d66e71499dc4665b86438426653","href":"https://static.observableusercontent.com/files/aab82c7a3d386f86cc1fb327f45268d344ceaf1c790255cae43487354a45d049f40df21ae9dfc4dbfea7d3d5983327e134688d66e71499dc4665b86438426653","name":"lockdown-mobility.csv","type":"text/csv","lastModified":1654623337597.839,"size":121004},{"id":"b9d709df0f1e37a3dc6764d20b2985ff2bc1331e24727787a6a29406d9c6b0627ea534ee19ce1d86635ee85667d0806fc586b5d2d4a84cb63bcdf4fd9a80d142","href":"https://static.observableusercontent.com/files/b9d709df0f1e37a3dc6764d20b2985ff2bc1331e24727787a6a29406d9c6b0627ea534ee19ce1d86635ee85667d0806fc586b5d2d4a84cb63bcdf4fd9a80d142","name":"ipos.csv","type":"text/csv","lastModified":1654703981274.359,"size":133494}] 2e:{"title":"Dodge Transform / Observable Plot","cells":[{"id":0,"value":"

Dodge Transform / Observable Plot

Observable Plot › Transforms › Dodge · API

\n\n# Plot: Dodge\n\nGiven a position dimension (either *x* or *y*), the **dodge** transform computes the other position dimension such that dots are packed densely without overlapping. The **dodgeX** transform computes *x* (horizontal position) given *y* (vertical position), while the **dodgeY** transform computes *y* given *x*.","pinned":false,"hidden":false,"mode":"md"},{"id":656,"value":"The dodge transform is commonly used to produce “beeswarm” plots, a way of showing a one-dimensional distribution that preserves the visual identity of individual data points. For example, the dots below represent the weights of cars; the rough shape of the pile gives a sense of the overall distribution (peaking around 2,100 pounds), and you can hover an individual dot to see which car it represents.","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"Plot.plot({\n height: 180,\n marks: [\n Plot.dotX(cars, Plot.dodgeY({x: \"weight (lb)\", title: \"name\", fill: \"currentColor\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":671,"value":"Compare this to a conventional histogram using a [rect mark](/@observablehq/plot-mark).","pinned":false,"hidden":false,"mode":"md"},{"id":667,"value":"Plot.plot({\n height: 180,\n marks: [\n Plot.rectY(cars, Plot.binX({y: \"count\"}, {x: \"weight (lb)\", thresholds: 40})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":866,"value":"Beeswarm plots avoid the occlusion problem of one-dimensional scatterplots.","pinned":false,"hidden":false,"mode":"md"},{"id":860,"value":"Plot.plot({\n marks: [\n Plot.dotX(cars, {x: \"weight (lb)\", title: \"name\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":735,"value":"Unlike a [force-directed beeswarm](/@harrystevens/force-directed-beeswarm), the dodge transform exactly preserves the input position dimension, resulting in a more accurate visualization. Also, the dodge transform tends to be faster than the iterative constraint relaxation used in the force-directed approach. We use Mikola Lysenko’s [interval-tree-1d library](https://github.com/mikolalysenko/interval-tree-1d) for fast intersection testing. (For previous work on accurate beeswarms, see Yuri Vishnevsky’s [“Building a Better Beeswarm”](/@yurivish/building-a-better-beeswarm), James Trimble’s [accurate-beeswarm-plot](https://github.com/jtrim-ons/accurate-beeswarm-plot), and Franck Lebeau’s [d3-beeswarm](https://github.com/Kcnarf/d3-beeswarm).)","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"The **anchor** option specifies the layout baseline: the optimal output position. For the dodgeX transform, the supported anchors are: _left_ (default), _middle_, _right_. For the dodgeY transform, the supported anchors are: _bottom_ (default), _middle_, _top_. When the _middle_ anchor is used, the dots are placed symmetrically around the baseline.","pinned":false,"hidden":false,"mode":"md"},{"id":509,"value":"viewof anchor = Inputs.radio([\"top\", \"middle\", \"bottom\"], {label: \"Anchor\", value: \"middle\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"Plot.plot({\n height: 180,\n marks: [\n Plot.dot(cars, Plot.dodgeY({x: \"weight (lb)\", fill: \"currentColor\", anchor}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"When using dodgeY, you must typically specify the plot’s **height** to create suitable space for the layout. The dodge transform is not currently able to set the height automatically. For dodgeX, the default **width** of 640 is often sufficient, though you may need to adjust it as well depending on your data.","pinned":false,"hidden":false,"mode":"md"},{"id":224,"value":"The dodge transform differs from the [stack transform](/@observablehq/plot-stack) in that the dots do not need the exact same input position to avoid overlap; the dodge transform respects the radius of each dot. Try adjusting the radius below to see the effect.","pinned":false,"hidden":false,"mode":"md"},{"id":842,"value":"viewof r = Inputs.range([0.5, 10], {label: \"Radius (r)\", step: 0.1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":838,"value":"Plot.plot({\n height: 180,\n marks: [\n Plot.dot(cars, Plot.dodgeY({x: \"weight (lb)\", r, fill: \"currentColor\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":849,"value":"The dodge transform also supports a **padding** option (default 1), which specifies the minimum separating distance between dots. Increase it for more breathing room.","pinned":false,"hidden":false,"mode":"md"},{"id":882,"value":"viewof padding = Inputs.range([-1, 5], {label: \"Padding\", value: 2, step: 0.1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"Plot.plot({\n height: 180,\n marks: [\n Plot.dot(cars, Plot.dodgeY({x: \"weight (lb)\", padding, fill: \"currentColor\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"If an *r* input channel is specified, the dodge transform will position circles of varying radius. The chart below shows twenty years of IPO offerings leading up to Facebook’s $104B offering in 2012; each circle is sized proportionally to the associated company’s valuation at IPO. (This data comes from [“The Facebook Offering: How It Compares”](https://archive.nytimes.com/www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html?hp) by Jeremy Ashkenas, Matthew Bloch, Shan Carter, and Amanda Cox.) Facebook’s valuation was nearly four times that of Google, the previous record. The 2000 [dot-com bubble](https://en.wikipedia.org/wiki/Dot-com_bubble) is also visible.","pinned":false,"hidden":false,"mode":"md"},{"id":933,"value":"Plot.plot({\n insetRight: 10,\n height: 400,\n width,\n marks: [\n Plot.dot(\n ipos,\n Plot.dodgeY({\n x: \"date\",\n r: \"rMVOP\",\n title: d => `${d.NAME}\\n${(d.rMVOP / 1e3).toFixed(1)}B`,\n fill: \"currentColor\"\n })\n ),\n Plot.text(\n ipos,\n Plot.dodgeY({\n filter: (d) => d.rMVOP > 5e3,\n x: \"date\",\n r: \"rMVOP\",\n text: d => (d.rMVOP / 1e3).toFixed(),\n fill: \"white\",\n fontWeight: \"bold\"\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":935,"value":"ipos = (await FileAttachment(\"ipos.csv\").csv({typed: true})).filter(d => d.date.getUTCFullYear() >= 1991)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1080,"value":"The above example also demonstrates that the dodge transform can be composed not just with the [dot mark](/@observablehq/plot-dot), but with any mark that supports _x_ and _y_ position. Below, we use the [text mark](/@observablehq/plot-text) instead to show company valuations (in billions).","pinned":false,"hidden":false,"mode":"md"},{"id":1025,"value":"Plot.plot({\n insetRight: 10,\n height: 400,\n width,\n marks: [\n Plot.text(\n ipos,\n Plot.dodgeY({\n x: \"date\",\n text: d => (d.rMVOP / 1e3).toFixed(1),\n title: \"NAME\",\n fontSize: d => Math.min(22, Math.cbrt(d.rMVOP / 1e3) * 6),\n r: \"rMVOP\"\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":701,"value":"The dodge transform places dots sequentially, each time finding the closest position to the baseline that avoids intersection with previously-placed dots. Because this is a [greedy algorithm](https://en.wikipedia.org/wiki/Greedy_algorithm), the resulting layout is highly dependent on the input data order. When the _r_ input channel is specified, dots are sorted by descending radius by default, such that the largest dots are placed closest to the baseline. Without an *r* channel, dots are placed in input order by default.","pinned":false,"hidden":false,"mode":"md"},{"id":1092,"value":"To adjust the dodge layout, use the **sort** and **reverse** option to change the input order. For example, if the **sort** option uses the same column as the _x_ dimension, the dots are arranged in piles leaning right.","pinned":false,"hidden":false,"mode":"md"},{"id":690,"value":"Plot.plot({\n height: 180,\n marks: [\n Plot.dotX(cars, Plot.dodgeY({x: \"weight (lb)\", title: \"name\", fill: \"currentColor\", sort: \"weight (lb)\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":727,"value":"Reversing the sort order produces piles leaning left.","pinned":false,"hidden":false,"mode":"md"},{"id":697,"value":"Plot.plot({\n height: 180,\n marks: [\n Plot.dotX(cars, Plot.dodgeY({x: \"weight (lb)\", title: \"name\", fill: \"currentColor\", sort: \"weight (lb)\", reverse: true}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":731,"value":"To avoid repeating a channel definition, you can also specify a named channel with the **sort** option.","pinned":false,"hidden":false,"mode":"md"},{"id":718,"value":"Plot.plot({\n height: 180,\n marks: [\n Plot.dotX(cars, Plot.dodgeY({x: \"weight (lb)\", title: \"name\", fill: \"currentColor\", sort: {channel: \"x\"}}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1097,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}