Skip to content

Commit d5883c5

Browse files
mbostockFil
mbostock
and
Fil
authored
disable default sort when explicitly ordering (#893)
* disable default sort when explicitly ordering * tests for sort/reverse/shuffle Co-authored-by: Philippe Rivière <[email protected]>
1 parent c129f26 commit d5883c5

File tree

4 files changed

+232
-3
lines changed

4 files changed

+232
-3
lines changed

‎src/transforms/basic.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,19 +46,19 @@ function filterTransform(value) {
4646
}
4747

4848
export function reverse(options) {
49-
return basic(options, reverseTransform);
49+
return {...basic(options, reverseTransform), sort: null};
5050
}
5151

5252
function reverseTransform(data, facets) {
5353
return {data, facets: facets.map(I => I.slice().reverse())};
5454
}
5555

5656
export function shuffle({seed, ...options} = {}) {
57-
return basic(options, sortValue(seed == null ? Math.random : randomLcg(seed)));
57+
return {...basic(options, sortValue(seed == null ? Math.random : randomLcg(seed))), sort: null};
5858
}
5959

6060
export function sort(value, options) {
61-
return basic(options, sortTransform(value));
61+
return {...basic(options, sortTransform(value)), sort: null};
6262
}
6363

6464
function sortTransform(value) {

‎test/output/dotSort.html

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
<span>
2+
<figure style="max-width: initial;"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="300" height="60" viewBox="0 0 300 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3+
<style>
4+
.plot {
5+
display: block;
6+
background: white;
7+
height: auto;
8+
height: intrinsic;
9+
max-width: 100%;
10+
}
11+
12+
.plot text,
13+
.plot tspan {
14+
white-space: pre;
15+
}
16+
</style>
17+
<g aria-label="dot" fill-opacity="0.8" stroke="black" stroke-width="1.5" transform="translate(0.5,0.5)">
18+
<circle cx="88" cy="30" r="60" fill="#f28e2c"></circle>
19+
<circle cx="163" cy="30" r="35" fill="#59a14f"></circle>
20+
<circle cx="63" cy="30" r="30" fill="#4e79a7"></circle>
21+
<circle cx="238" cy="30" r="28" fill="#ff9da7"></circle>
22+
<circle cx="188" cy="30" r="22" fill="#edc949"></circle>
23+
<circle cx="138" cy="30" r="20" fill="#76b7b2"></circle>
24+
<circle cx="113" cy="30" r="20" fill="#e15759"></circle>
25+
<circle cx="213" cy="30" r="20" fill="#af7aa1"></circle>
26+
</g>
27+
</svg>
28+
<figcaption>default sort (r desc)</figcaption>
29+
</figure>
30+
<br>
31+
<figure style="max-width: initial;"><svg class="plot-2" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="300" height="60" viewBox="0 0 300 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
32+
<style>
33+
.plot-2 {
34+
display: block;
35+
background: white;
36+
height: auto;
37+
height: intrinsic;
38+
max-width: 100%;
39+
}
40+
41+
.plot-2 text,
42+
.plot-2 tspan {
43+
white-space: pre;
44+
}
45+
</style>
46+
<g aria-label="dot" fill-opacity="0.8" stroke="black" stroke-width="1.5" transform="translate(0.5,0.5)">
47+
<circle cx="138" cy="30" r="20" fill="#76b7b2"></circle>
48+
<circle cx="113" cy="30" r="20" fill="#e15759"></circle>
49+
<circle cx="213" cy="30" r="20" fill="#af7aa1"></circle>
50+
<circle cx="188" cy="30" r="22" fill="#edc949"></circle>
51+
<circle cx="238" cy="30" r="28" fill="#ff9da7"></circle>
52+
<circle cx="63" cy="30" r="30" fill="#4e79a7"></circle>
53+
<circle cx="163" cy="30" r="35" fill="#59a14f"></circle>
54+
<circle cx="88" cy="30" r="60" fill="#f28e2c"></circle>
55+
</g>
56+
</svg>
57+
<figcaption>sort by r</figcaption>
58+
</figure>
59+
<br>
60+
<figure style="max-width: initial;"><svg class="plot-3" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="300" height="60" viewBox="0 0 300 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
61+
<style>
62+
.plot-3 {
63+
display: block;
64+
background: white;
65+
height: auto;
66+
height: intrinsic;
67+
max-width: 100%;
68+
}
69+
70+
.plot-3 text,
71+
.plot-3 tspan {
72+
white-space: pre;
73+
}
74+
</style>
75+
<g aria-label="dot" fill-opacity="0.8" stroke="black" stroke-width="1.5" transform="translate(0.5,0.5)">
76+
<circle cx="63" cy="30" r="30" fill="#4e79a7"></circle>
77+
<circle cx="88" cy="30" r="60" fill="#f28e2c"></circle>
78+
<circle cx="138" cy="30" r="20" fill="#76b7b2"></circle>
79+
<circle cx="113" cy="30" r="20" fill="#e15759"></circle>
80+
<circle cx="163" cy="30" r="35" fill="#59a14f"></circle>
81+
<circle cx="188" cy="30" r="22" fill="#edc949"></circle>
82+
<circle cx="213" cy="30" r="20" fill="#af7aa1"></circle>
83+
<circle cx="238" cy="30" r="28" fill="#ff9da7"></circle>
84+
</g>
85+
</svg>
86+
<figcaption>null sort</figcaption>
87+
</figure>
88+
<br>
89+
<figure style="max-width: initial;"><svg class="plot-4" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="300" height="60" viewBox="0 0 300 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
90+
<style>
91+
.plot-4 {
92+
display: block;
93+
background: white;
94+
height: auto;
95+
height: intrinsic;
96+
max-width: 100%;
97+
}
98+
99+
.plot-4 text,
100+
.plot-4 tspan {
101+
white-space: pre;
102+
}
103+
</style>
104+
<g aria-label="dot" fill-opacity="0.8" stroke="black" stroke-width="1.5" transform="translate(0.5,0.5)">
105+
<circle cx="238" cy="30" r="28" fill="#ff9da7"></circle>
106+
<circle cx="213" cy="30" r="20" fill="#af7aa1"></circle>
107+
<circle cx="188" cy="30" r="22" fill="#edc949"></circle>
108+
<circle cx="163" cy="30" r="35" fill="#59a14f"></circle>
109+
<circle cx="113" cy="30" r="20" fill="#e15759"></circle>
110+
<circle cx="138" cy="30" r="20" fill="#76b7b2"></circle>
111+
<circle cx="88" cy="30" r="60" fill="#f28e2c"></circle>
112+
<circle cx="63" cy="30" r="30" fill="#4e79a7"></circle>
113+
</g>
114+
</svg>
115+
<figcaption>reverse</figcaption>
116+
</figure>
117+
<br>
118+
<figure style="max-width: initial;"><svg class="plot-5" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="300" height="60" viewBox="0 0 300 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
119+
<style>
120+
.plot-5 {
121+
display: block;
122+
background: white;
123+
height: auto;
124+
height: intrinsic;
125+
max-width: 100%;
126+
}
127+
128+
.plot-5 text,
129+
.plot-5 tspan {
130+
white-space: pre;
131+
}
132+
</style>
133+
<g aria-label="dot" fill-opacity="0.8" stroke="black" stroke-width="1.5" transform="translate(0.5,0.5)">
134+
<circle cx="63" cy="30" r="30" fill="#4e79a7"></circle>
135+
<circle cx="88" cy="30" r="60" fill="#f28e2c"></circle>
136+
<circle cx="113" cy="30" r="20" fill="#e15759"></circle>
137+
<circle cx="138" cy="30" r="20" fill="#76b7b2"></circle>
138+
<circle cx="163" cy="30" r="35" fill="#59a14f"></circle>
139+
<circle cx="188" cy="30" r="22" fill="#edc949"></circle>
140+
<circle cx="213" cy="30" r="20" fill="#af7aa1"></circle>
141+
<circle cx="238" cy="30" r="28" fill="#ff9da7"></circle>
142+
</g>
143+
</svg>
144+
<figcaption>sort by x</figcaption>
145+
</figure>
146+
<br>
147+
<figure style="max-width: initial;"><svg class="plot-6" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="300" height="60" viewBox="0 0 300 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
148+
<style>
149+
.plot-6 {
150+
display: block;
151+
background: white;
152+
height: auto;
153+
height: intrinsic;
154+
max-width: 100%;
155+
}
156+
157+
.plot-6 text,
158+
.plot-6 tspan {
159+
white-space: pre;
160+
}
161+
</style>
162+
<g aria-label="dot" fill-opacity="0.8" stroke="black" stroke-width="1.5" transform="translate(0.5,0.5)">
163+
<circle cx="238" cy="30" r="28" fill="#ff9da7"></circle>
164+
<circle cx="213" cy="30" r="20" fill="#af7aa1"></circle>
165+
<circle cx="188" cy="30" r="22" fill="#edc949"></circle>
166+
<circle cx="163" cy="30" r="35" fill="#59a14f"></circle>
167+
<circle cx="138" cy="30" r="20" fill="#76b7b2"></circle>
168+
<circle cx="113" cy="30" r="20" fill="#e15759"></circle>
169+
<circle cx="88" cy="30" r="60" fill="#f28e2c"></circle>
170+
<circle cx="63" cy="30" r="30" fill="#4e79a7"></circle>
171+
</g>
172+
</svg>
173+
<figcaption>reverse sort by x</figcaption>
174+
</figure>
175+
<br>
176+
<figure style="max-width: initial;"><svg class="plot-7" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="300" height="60" viewBox="0 0 300 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
177+
<style>
178+
.plot-7 {
179+
display: block;
180+
background: white;
181+
height: auto;
182+
height: intrinsic;
183+
max-width: 100%;
184+
}
185+
186+
.plot-7 text,
187+
.plot-7 tspan {
188+
white-space: pre;
189+
}
190+
</style>
191+
<g aria-label="dot" fill-opacity="0.8" stroke="black" stroke-width="1.5" transform="translate(0.5,0.5)">
192+
<circle cx="188" cy="30" r="22" fill="#edc949"></circle>
193+
<circle cx="88" cy="30" r="60" fill="#f28e2c"></circle>
194+
<circle cx="238" cy="30" r="28" fill="#ff9da7"></circle>
195+
<circle cx="113" cy="30" r="20" fill="#e15759"></circle>
196+
<circle cx="63" cy="30" r="30" fill="#4e79a7"></circle>
197+
<circle cx="163" cy="30" r="35" fill="#59a14f"></circle>
198+
<circle cx="213" cy="30" r="20" fill="#af7aa1"></circle>
199+
<circle cx="138" cy="30" r="20" fill="#76b7b2"></circle>
200+
</g>
201+
</svg>
202+
<figcaption>shuffle</figcaption>
203+
</figure>
204+
</span>

‎test/plots/dot-sort.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as Plot from "@observablehq/plot";
2+
import {html} from "htl";
3+
4+
export default async function() {
5+
const x = [..."ABDCEFGH"];
6+
const r = [30, 60, 20, 20, 35, 22, 20, 28];
7+
const options = {x, r, stroke: "black", fill: x, fillOpacity: 0.8};
8+
const p = {width: 300, margin: 50, axis: null, r: {type: "identity"}};
9+
return html`
10+
${Plot.dot(x, options).plot({...p, caption: "default sort (r desc)"})}
11+
<br>
12+
${Plot.dot(x, {...options, sort: r}).plot({...p, caption: "sort by r"})}
13+
<br>
14+
${Plot.dot(x, {...options, sort: null}).plot({...p, caption: "null sort"})}
15+
<br>
16+
${Plot.dot(x, Plot.reverse(options)).plot({...p, caption: "reverse"})}
17+
<br>
18+
${Plot.dot(x, Plot.sort(d => d, options)).plot({...p, caption: "sort by x"})}
19+
<br>
20+
${Plot.dot(x, Plot.reverse(Plot.sort(d => d, options))).plot({...p, caption: "reverse sort by x"})}
21+
<br>
22+
${Plot.dot(x, Plot.shuffle({...options, seed: 42})).plot({...p, caption: "shuffle"})}
23+
`;
24+
}

‎test/plots/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export {default as diamondsCaratPrice} from "./diamonds-carat-price.js";
4747
export {default as diamondsCaratPriceDots} from "./diamonds-carat-price-dots.js";
4848
export {default as diamondsCaratSampling} from "./diamonds-carat-sampling.js";
4949
export {default as documentationLinks} from "./documentation-links.js";
50+
export {default as dotSort} from "./dot-sort.js";
5051
export {default as downloads} from "./downloads.js";
5152
export {default as driving} from "./driving.js";
5253
export {default as empty} from "./empty.js";

0 commit comments

Comments
 (0)