Skip to content

Commit

Permalink
Empty bins fall back on the first element of their group (observableh…
Browse files Browse the repository at this point in the history 
…q#1837)

* Empty bins fall back on the first element of their group for z, stroke and fill

closes observablehq#1775

* test edge case

---------

Co-authored-by: Mike Bostock <mbostock@gmail.com>
  • Loading branch information
@Fil @mbostock @chaichontat
2 people authored and chaichontat committed Jan 14, 2024
1 parent a5ef931 commit b70755c
Show file tree
Hide file tree
Showing 7 changed files with 467 additions and 3 deletions.
6 changes: 3 additions & 3 deletions src/transforms/bin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,9 +184,9 @@ function binn(
groupFacet.push(i++);
groupData.push(reduceData.reduceIndex(b, data, extent));
if (K) GK.push(k);
if (Z) GZ.push(G === Z ? f : Z[b[0]]);
if (F) GF.push(G === F ? f : F[b[0]]);
if (S) GS.push(G === S ? f : S[b[0]]);
if (Z) GZ.push(G === Z ? f : Z[(b.length > 0 ? b : g)[0]]);
if (F) GF.push(G === F ? f : F[(b.length > 0 ? b : g)[0]]);
if (S) GS.push(G === S ? f : S[(b.length > 0 ? b : g)[0]]);
if (BX1) BX1.push(extent.x1), BX2.push(extent.x2);
if (BY1) BY1.push(extent.y1), BY2.push(extent.y2);
for (const o of outputs) o.reduce(b, extent);
Expand Down
183 changes: 183 additions & 0 deletions test/output/binFillFirstEmpty.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
<figure class="plot-d6a7b5-figure" style="max-width: initial;">
<div class="plot-swatches plot-swatches-wrap">
<style>
.plot-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}

.plot-swatch>svg {
margin-right: 0.5em;
overflow: visible;
}

.plot-swatches-wrap {
display: flex;
align-items: center;
min-height: 33px;
flex-wrap: wrap;
}

.plot-swatches-wrap .plot-swatch {
display: inline-flex;
align-items: center;
margin-right: 1em;
}
</style><span class="plot-swatch"><svg width="15" height="15" fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>FEMALE</span><span class="plot-swatch"><svg width="15" height="15" fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>MALE</span><span class="plot-swatch"><svg width="15" height="15" fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>null</span>
</div><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.plot {
display: block;
background: white;
height: auto;
height: intrinsic;
max-width: 100%;
}

.plot text,
.plot tspan {
white-space: pre;
}
</style>
<g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(0,0.5)">
<path transform="translate(40,370)" d="M0,0L-6,0"></path>
<path transform="translate(40,345)" d="M0,0L-6,0"></path>
<path transform="translate(40,320)" d="M0,0L-6,0"></path>
<path transform="translate(40,295)" d="M0,0L-6,0"></path>
<path transform="translate(40,270)" d="M0,0L-6,0"></path>
<path transform="translate(40,244.99999999999997)" d="M0,0L-6,0"></path>
<path transform="translate(40,220)" d="M0,0L-6,0"></path>
<path transform="translate(40,195)" d="M0,0L-6,0"></path>
<path transform="translate(40,170)" d="M0,0L-6,0"></path>
<path transform="translate(40,145)" d="M0,0L-6,0"></path>
<path transform="translate(40,120)" d="M0,0L-6,0"></path>
<path transform="translate(40,95)" d="M0,0L-6,0"></path>
<path transform="translate(40,70.00000000000001)" d="M0,0L-6,0"></path>
<path transform="translate(40,44.999999999999986)" d="M0,0L-6,0"></path>
<path transform="translate(40,20)" d="M0,0L-6,0"></path>
</g>
<g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
<text y="0.32em" transform="translate(40,370)">0</text>
<text y="0.32em" transform="translate(40,345)">1</text>
<text y="0.32em" transform="translate(40,320)">2</text>
<text y="0.32em" transform="translate(40,295)">3</text>
<text y="0.32em" transform="translate(40,270)">4</text>
<text y="0.32em" transform="translate(40,244.99999999999997)">5</text>
<text y="0.32em" transform="translate(40,220)">6</text>
<text y="0.32em" transform="translate(40,195)">7</text>
<text y="0.32em" transform="translate(40,170)">8</text>
<text y="0.32em" transform="translate(40,145)">9</text>
<text y="0.32em" transform="translate(40,120)">10</text>
<text y="0.32em" transform="translate(40,95)">11</text>
<text y="0.32em" transform="translate(40,70.00000000000001)">12</text>
<text y="0.32em" transform="translate(40,44.999999999999986)">13</text>
<text y="0.32em" transform="translate(40,20)">14</text>
</g>
<g aria-label="y-axis label" text-anchor="start" transform="translate(-36.5,-16.5)">
<text y="0.71em" transform="translate(40,20)">↑ Frequency</text>
</g>
<g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)">
<path transform="translate(87.67123287671232,370)" d="M0,0L0,6"></path>
<path transform="translate(167.12328767123287,370)" d="M0,0L0,6"></path>
<path transform="translate(246.5753424657534,370)" d="M0,0L0,6"></path>
<path transform="translate(326.027397260274,370)" d="M0,0L0,6"></path>
<path transform="translate(405.4794520547945,370)" d="M0,0L0,6"></path>
<path transform="translate(484.93150684931504,370)" d="M0,0L0,6"></path>
<path transform="translate(564.3835616438356,370)" d="M0,0L0,6"></path>
</g>
<g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
<text y="0.71em" transform="translate(87.67123287671232,370)">3,000</text>
<text y="0.71em" transform="translate(167.12328767123287,370)">3,500</text>
<text y="0.71em" transform="translate(246.5753424657534,370)">4,000</text>
<text y="0.71em" transform="translate(326.027397260274,370)">4,500</text>
<text y="0.71em" transform="translate(405.4794520547945,370)">5,000</text>
<text y="0.71em" transform="translate(484.93150684931504,370)">5,500</text>
<text y="0.71em" transform="translate(564.3835616438356,370)">6,000</text>
</g>
<g aria-label="x-axis label" text-anchor="end" transform="translate(17.5,27.5)">
<text transform="translate(620,370)">body_mass_g →</text>
</g>
<g aria-label="rect">
<rect x="41" y="344.5" width="6.945205479452056" height="26" fill="#4e79a7"></rect>
<rect x="48.945205479452056" y="369.5" width="6.945205479452056" height="1" fill="#f28e2c"></rect>
<rect x="56.89041095890411" y="369.5" width="6.945205479452056" height="1" fill="#f28e2c"></rect>
<rect x="64.83561643835617" y="319.5" width="6.945205479452056" height="51" fill="#4e79a7"></rect>
<rect x="72.78082191780823" y="244.49999999999997" width="6.945205479452056" height="126.00000000000003" fill="#4e79a7"></rect>
<rect x="80.72602739726028" y="344.5" width="6.945205479452042" height="26" fill="#e15759"></rect>
<rect x="88.67123287671232" y="319.5" width="6.945205479452056" height="51" fill="#4e79a7"></rect>
<rect x="96.61643835616438" y="244.49999999999997" width="6.945205479452056" height="126.00000000000003" fill="#4e79a7"></rect>
<rect x="104.56164383561644" y="344.5" width="6.945205479452056" height="26" fill="#4e79a7"></rect>
<rect x="112.5068493150685" y="219.5" width="6.945205479452056" height="151" fill="#4e79a7"></rect>
<rect x="120.45205479452055" y="244.49999999999997" width="6.945205479452042" height="126.00000000000003" fill="#4e79a7"></rect>
<rect x="128.3972602739726" y="219.5" width="6.945205479452056" height="151" fill="#4e79a7"></rect>
<rect x="136.34246575342465" y="94.5" width="6.945205479452056" height="276" fill="#e15759"></rect>
<rect x="144.2876712328767" y="244.49999999999997" width="6.945205479452056" height="126.00000000000003" fill="#4e79a7"></rect>
<rect x="152.23287671232876" y="119.5" width="6.945205479452056" height="251" fill="#4e79a7"></rect>
<rect x="160.17808219178082" y="94.5" width="6.945205479452056" height="276" fill="#4e79a7"></rect>
<rect x="168.12328767123287" y="144.5" width="6.945205479452056" height="226" fill="#4e79a7"></rect>
<rect x="176.06849315068493" y="119.5" width="6.945205479452056" height="251" fill="#f28e2c"></rect>
<rect x="184.013698630137" y="169.5" width="6.945205479452056" height="201" fill="#4e79a7"></rect>
<rect x="191.95890410958904" y="169.5" width="6.945205479452056" height="201" fill="#f28e2c"></rect>
<rect x="199.9041095890411" y="19.5" width="6.945205479452028" height="351" fill="#e15759"></rect>
<rect x="207.84931506849313" y="144.5" width="6.945205479452056" height="226" fill="#f28e2c"></rect>
<rect x="215.79452054794518" y="44.499999999999986" width="6.945205479452056" height="326" fill="#4e79a7"></rect>
<rect x="223.73972602739724" y="319.5" width="6.945205479452056" height="51" fill="#f28e2c"></rect>
<rect x="231.6849315068493" y="119.5" width="6.945205479452056" height="251" fill="#f28e2c"></rect>
<rect x="239.63013698630135" y="94.5" width="6.945205479452056" height="276" fill="#f28e2c"></rect>
<rect x="247.5753424657534" y="244.49999999999997" width="6.945205479452056" height="126.00000000000003" fill="#f28e2c"></rect>
<rect x="255.52054794520546" y="194.5" width="6.945205479452056" height="176" fill="#f28e2c"></rect>
<rect x="263.4657534246575" y="244.49999999999997" width="6.945205479452056" height="126.00000000000003" fill="#f28e2c"></rect>
<rect x="271.4109589041096" y="219.5" width="6.945205479452056" height="151" fill="#f28e2c"></rect>
<rect x="279.35616438356163" y="244.49999999999997" width="6.945205479452056" height="126.00000000000003" fill="#f28e2c"></rect>
<rect x="287.3013698630137" y="219.5" width="6.945205479452056" height="151" fill="#e15759"></rect>
<rect x="295.24657534246575" y="169.5" width="6.945205479452056" height="201" fill="#f28e2c"></rect>
<rect x="303.1917808219178" y="294.5" width="6.945205479452056" height="76" fill="#f28e2c"></rect>
<rect x="311.13698630136986" y="169.5" width="6.9452054794519995" height="201" fill="#f28e2c"></rect>
<rect x="319.08219178082186" y="219.5" width="6.945205479452113" height="151" fill="#f28e2c"></rect>
<rect x="327.027397260274" y="294.5" width="6.945205479452056" height="76" fill="#f28e2c"></rect>
<rect x="334.972602739726" y="294.5" width="6.945205479452056" height="76" fill="#f28e2c"></rect>
<rect x="342.9178082191781" y="194.5" width="6.945205479452056" height="176" fill="#f28e2c"></rect>
<rect x="350.86301369863014" y="219.5" width="6.945205479452056" height="151" fill="#f28e2c"></rect>
<rect x="358.8082191780822" y="144.5" width="6.945205479452056" height="226" fill="#f28e2c"></rect>
<rect x="366.75342465753425" y="219.5" width="6.9452054794519995" height="151" fill="#f28e2c"></rect>
<rect x="374.69863013698625" y="294.5" width="6.945205479452113" height="76" fill="#f28e2c"></rect>
<rect x="382.64383561643837" y="194.5" width="6.9452054794519995" height="176" fill="#4e79a7"></rect>
<rect x="390.58904109589037" y="269.5" width="6.945205479452113" height="101" fill="#4e79a7"></rect>
<rect x="398.5342465753425" y="294.5" width="6.9452054794519995" height="76" fill="#4e79a7"></rect>
<rect x="406.4794520547945" y="219.5" width="6.945205479452113" height="151" fill="#4e79a7"></rect>
<rect x="414.4246575342466" y="294.5" width="6.9452054794519995" height="76" fill="#f28e2c"></rect>
<rect x="422.3698630136986" y="294.5" width="6.945205479452113" height="76" fill="#f28e2c"></rect>
<rect x="430.3150684931507" y="319.5" width="6.9452054794519995" height="51" fill="#f28e2c"></rect>
<rect x="438.2602739726027" y="269.5" width="6.945205479452113" height="101" fill="#f28e2c"></rect>
<rect x="446.2054794520548" y="294.5" width="6.9452054794519995" height="76" fill="#f28e2c"></rect>
<rect x="454.1506849315068" y="269.5" width="6.945205479452056" height="101" fill="#f28e2c"></rect>
<rect x="462.0958904109589" y="294.5" width="6.945205479452056" height="76" fill="#f28e2c"></rect>
<rect x="470.04109589041093" y="244.49999999999997" width="6.945205479452113" height="126.00000000000003" fill="#f28e2c"></rect>
<rect x="477.98630136986304" y="344.5" width="6.9452054794519995" height="26" fill="#f28e2c"></rect>
<rect x="485.93150684931504" y="244.49999999999997" width="6.945205479452056" height="126.00000000000003" fill="#f28e2c"></rect>
<rect x="493.8767123287671" y="219.5" width="6.945205479452056" height="151" fill="#f28e2c"></rect>
<rect x="501.82191780821915" y="319.5" width="6.945205479452113" height="51" fill="#f28e2c"></rect>
<rect x="509.76712328767127" y="294.5" width="6.9452054794519995" height="76" fill="#f28e2c"></rect>
<rect x="517.7123287671233" y="244.49999999999997" width="6.94520547945217" height="126.00000000000003" fill="#f28e2c"></rect>
<rect x="525.6575342465754" y="344.5" width="6.945205479451943" height="26" fill="#f28e2c"></rect>
<rect x="533.6027397260274" y="319.5" width="6.945205479452056" height="51" fill="#f28e2c"></rect>
<rect x="541.5479452054794" y="294.5" width="6.945205479452056" height="76" fill="#f28e2c"></rect>
<rect x="549.4931506849315" y="369.5" width="6.945205479452056" height="1" fill="#f28e2c"></rect>
<rect x="557.4383561643835" y="319.5" width="6.945205479452056" height="51" fill="#f28e2c"></rect>
<rect x="565.3835616438356" y="319.5" width="6.945205479452056" height="51" fill="#f28e2c"></rect>
<rect x="573.3287671232877" y="344.5" width="6.945205479452056" height="26" fill="#f28e2c"></rect>
<rect x="581.2739726027397" y="369.5" width="6.94520547945217" height="1" fill="#f28e2c"></rect>
<rect x="589.2191780821919" y="369.5" width="6.945205479451829" height="1" fill="#f28e2c"></rect>
<rect x="597.1643835616437" y="369.5" width="6.94520547945217" height="1" fill="#f28e2c"></rect>
<rect x="605.1095890410959" y="369.5" width="6.945205479452056" height="1" fill="#f28e2c"></rect>
<rect x="613.054794520548" y="344.5" width="6.945205479452056" height="26" fill="#f28e2c"></rect>
</g>
</svg>
</figure>
105 changes: 105 additions & 0 deletions test/output/integerIntervalArea.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<figure class="plot-d6a7b5-figure" style="max-width: initial;">
<div class="plot-swatches plot-swatches-wrap">
<style>
.plot-swatches {
font-family: system-ui, sans-serif;
font-size: 10px;
margin-bottom: 0.5em;
}

.plot-swatch>svg {
margin-right: 0.5em;
overflow: visible;
}

.plot-swatches-wrap {
display: flex;
align-items: center;
min-height: 33px;
flex-wrap: wrap;
}

.plot-swatches-wrap .plot-swatch {
display: inline-flex;
align-items: center;
margin-right: 1em;
}
</style><span class="plot-swatch"><svg width="15" height="15" fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>a</span><span class="plot-swatch"><svg width="15" height="15" fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"></rect>
</svg>b</span>
</div><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.plot {
display: block;
background: white;
height: auto;
height: intrinsic;
max-width: 100%;
}

.plot text,
.plot tspan {
white-space: pre;
}
</style>
<g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(0,0.5)">
<path transform="translate(40,370)" d="M0,0L-6,0"></path>
<path transform="translate(40,326.25)" d="M0,0L-6,0"></path>
<path transform="translate(40,282.5)" d="M0,0L-6,0"></path>
<path transform="translate(40,238.75)" d="M0,0L-6,0"></path>
<path transform="translate(40,195)" d="M0,0L-6,0"></path>
<path transform="translate(40,151.25)" d="M0,0L-6,0"></path>
<path transform="translate(40,107.5)" d="M0,0L-6,0"></path>
<path transform="translate(40,63.75)" d="M0,0L-6,0"></path>
<path transform="translate(40,20)" d="M0,0L-6,0"></path>
</g>
<g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
<text y="0.32em" transform="translate(40,370)">0</text>
<text y="0.32em" transform="translate(40,326.25)">2</text>
<text y="0.32em" transform="translate(40,282.5)">4</text>
<text y="0.32em" transform="translate(40,238.75)">6</text>
<text y="0.32em" transform="translate(40,195)">8</text>
<text y="0.32em" transform="translate(40,151.25)">10</text>
<text y="0.32em" transform="translate(40,107.5)">12</text>
<text y="0.32em" transform="translate(40,63.75)">14</text>
<text y="0.32em" transform="translate(40,20)">16</text>
</g>
<g aria-label="y-axis label" text-anchor="start" transform="translate(-36.5,-16.5)">
<text y="0.71em" transform="translate(40,20)">↑ y</text>
</g>
<g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)">
<path transform="translate(69,370)" d="M0,0L0,6"></path>
<path transform="translate(127,370)" d="M0,0L0,6"></path>
<path transform="translate(185,370)" d="M0,0L0,6"></path>
<path transform="translate(243,370)" d="M0,0L0,6"></path>
<path transform="translate(301,370)" d="M0,0L0,6"></path>
<path transform="translate(359,370)" d="M0,0L0,6"></path>
<path transform="translate(417,370)" d="M0,0L0,6"></path>
<path transform="translate(475,370)" d="M0,0L0,6"></path>
<path transform="translate(533,370)" d="M0,0L0,6"></path>
<path transform="translate(591,370)" d="M0,0L0,6"></path>
</g>
<g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
<text y="0.71em" transform="translate(69,370)">3</text>
<text y="0.71em" transform="translate(127,370)">4</text>
<text y="0.71em" transform="translate(185,370)">5</text>
<text y="0.71em" transform="translate(243,370)">6</text>
<text y="0.71em" transform="translate(301,370)">7</text>
<text y="0.71em" transform="translate(359,370)">8</text>
<text y="0.71em" transform="translate(417,370)">9</text>
<text y="0.71em" transform="translate(475,370)">10</text>
<text y="0.71em" transform="translate(533,370)">11</text>
<text y="0.71em" transform="translate(591,370)">12</text>
</g>
<g aria-label="x-axis label" text-anchor="end" transform="translate(17.5,27.5)">
<text transform="translate(620,370)">x →</text>
</g>
<g aria-label="area" fill-opacity="0.7" stroke-width="2" stroke-linejoin="round" stroke-linecap="round">
<path fill="#4e79a7" stroke="#4e79a7" d="M40,260.625L330,216.875L620,370L620,370L330,370L40,370Z"></path>
<path fill="#f28e2c" stroke="#f28e2c" d="M40,260.625L330,20L620,282.5L620,370L330,216.875L40,260.625Z"></path>
</g>
<g aria-label="tip" fill="white" stroke="currentColor" pointer-events="none" text-anchor="start" transform="translate(0.5,0.5)"></g>
</svg>
</figure>
Loading

0 comments on commit b70755c

Please sign in to comment.