Skip to content

Commit 44b5ad0

Browse files
FilFil
committed
interval aware facets (#14)
1 parent b190419 commit 44b5ad0

File tree

2 files changed

+192
-0
lines changed

2 files changed

+192
-0
lines changed

‎test/output/intervalAwareFacets.html‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
<figure style="max-width: initial;">
2+
<div class="plot-swatches plot-swatches-wrap">
3+
<style>
4+
.plot-swatches {
5+
font-family: system-ui, sans-serif;
6+
font-size: 10px;
7+
margin-bottom: 0.5em;
8+
}
9+
10+
.plot-swatch>svg {
11+
margin-right: 0.5em;
12+
overflow: visible;
13+
}
14+
15+
.plot-swatches-wrap {
16+
display: flex;
17+
align-items: center;
18+
min-height: 33px;
19+
flex-wrap: wrap;
20+
}
21+
22+
.plot-swatches-wrap .plot-swatch {
23+
display: inline-flex;
24+
align-items: center;
25+
margin-right: 1em;
26+
}
27+
</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">
28+
<rect width="100%" height="100%"></rect>
29+
</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">
30+
<rect width="100%" height="100%"></rect>
31+
</svg>male</span>
32+
</div><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="430" viewBox="0 0 640 430" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
33+
<style>
34+
.plot {
35+
display: block;
36+
background: white;
37+
height: auto;
38+
height: intrinsic;
39+
max-width: 100%;
40+
}
41+
42+
.plot text,
43+
.plot tspan {
44+
white-space: pre;
45+
}
46+
</style>
47+
<g aria-label="facet" transform="translate(1,0)">
48+
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
49+
<text y="0.71em" transform="translate(64,400)">1950</text>
50+
</g>
51+
<g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(0,0.5)">
52+
<path transform="translate(40,400)" d="M0,0L-6,0"></path>
53+
<path transform="translate(40,369.1056910569106)" d="M0,0L-6,0"></path>
54+
<path transform="translate(40,338.2113821138211)" d="M0,0L-6,0"></path>
55+
<path transform="translate(40,307.3170731707317)" d="M0,0L-6,0"></path>
56+
<path transform="translate(40,276.4227642276423)" d="M0,0L-6,0"></path>
57+
<path transform="translate(40,245.52845528455285)" d="M0,0L-6,0"></path>
58+
<path transform="translate(40,214.6341463414634)" d="M0,0L-6,0"></path>
59+
<path transform="translate(40,183.739837398374)" d="M0,0L-6,0"></path>
60+
<path transform="translate(40,152.84552845528455)" d="M0,0L-6,0"></path>
61+
<path transform="translate(40,121.95121951219514)" d="M0,0L-6,0"></path>
62+
<path transform="translate(40,91.0569105691057)" d="M0,0L-6,0"></path>
63+
<path transform="translate(40,60.16260162601627)" d="M0,0L-6,0"></path>
64+
<path transform="translate(40,29.268292682926838)" d="M0,0L-6,0"></path>
65+
</g>
66+
<g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
67+
<text y="0.32em" transform="translate(40,400)">0</text>
68+
<text y="0.32em" transform="translate(40,369.1056910569106)">200</text>
69+
<text y="0.32em" transform="translate(40,338.2113821138211)">400</text>
70+
<text y="0.32em" transform="translate(40,307.3170731707317)">600</text>
71+
<text y="0.32em" transform="translate(40,276.4227642276423)">800</text>
72+
<text y="0.32em" transform="translate(40,245.52845528455285)">1,000</text>
73+
<text y="0.32em" transform="translate(40,214.6341463414634)">1,200</text>
74+
<text y="0.32em" transform="translate(40,183.739837398374)">1,400</text>
75+
<text y="0.32em" transform="translate(40,152.84552845528455)">1,600</text>
76+
<text y="0.32em" transform="translate(40,121.95121951219514)">1,800</text>
77+
<text y="0.32em" transform="translate(40,91.0569105691057)">2,000</text>
78+
<text y="0.32em" transform="translate(40,60.16260162601627)">2,200</text>
79+
<text y="0.32em" transform="translate(40,29.268292682926838)">2,400</text>
80+
</g>
81+
<g aria-label="bar">
82+
<rect x="43" width="20" y="399.6910569105691" height="0.30894308943089754" fill="#4e79a7"></rect>
83+
</g>
84+
</g>
85+
<g aria-label="facet" transform="translate(54,0)">
86+
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
87+
<text y="0.71em" transform="translate(64,400)">1955</text>
88+
</g>
89+
<g aria-label="bar">
90+
<rect x="43" width="20" y="399.5365853658536" height="0.46341463414637474" fill="#4e79a7"></rect>
91+
<rect x="65" width="20" y="399.38211382113826" height="0.6178861788617382" fill="#f28e2c"></rect>
92+
</g>
93+
</g>
94+
<g aria-label="facet" transform="translate(107,0)">
95+
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
96+
<text y="0.71em" transform="translate(64,400)">1960</text>
97+
</g>
98+
<g aria-label="bar">
99+
<rect x="43" width="20" y="399.0731707317073" height="0.9268292682926926" fill="#4e79a7"></rect>
100+
<rect x="65" width="20" y="396.2926829268293" height="3.7073170731707137" fill="#f28e2c"></rect>
101+
</g>
102+
</g>
103+
<g aria-label="facet" transform="translate(160,0)">
104+
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
105+
<text y="0.71em" transform="translate(64,400)">1965</text>
106+
</g>
107+
<g aria-label="bar">
108+
<rect x="43" width="20" y="397.5284552845529" height="2.4715447154471235" fill="#4e79a7"></rect>
109+
<rect x="65" width="20" y="395.6747967479675" height="4.325203252032509" fill="#f28e2c"></rect>
110+
</g>
111+
</g>
112+
<g aria-label="facet" transform="translate(213,0)">
113+
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
114+
<text y="0.71em" transform="translate(64,400)">1970</text>
115+
</g>
116+
<g aria-label="bar">
117+
<rect x="43" width="20" y="394.9024390243902" height="5.097560975609781" fill="#4e79a7"></rect>
118+
<rect x="65" width="20" y="391.349593495935" height="8.650406504065018" fill="#f28e2c"></rect>
119+
</g>
120+
</g>
121+
<g aria-label="facet" transform="translate(266,0)">
122+
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
123+
<text y="0.71em" transform="translate(64,400)">1975</text>
124+
</g>
125+
<g aria-label="bar">
126+
<rect x="43" width="20" y="383.4715447154472" height="16.52845528455282" fill="#4e79a7"></rect>
127+
<rect x="65" width="20" y="369.56910569105696" height="30.43089430894304" fill="#f28e2c"></rect>
128+
</g>
129+
</g>
130+
<g aria-label="facet" transform="translate(319,0)">
131+
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
132+
<text y="0.71em" transform="translate(64,400)">1980</text>
133+
</g>
134+
<g aria-label="bar">
135+
<rect x="43" width="20" y="316.12195121951225" height="83.87804878048775" fill="#4e79a7"></rect>
136+
<rect x="65" width="20" y="274.4146341463414" height="125.58536585365857" fill="#f28e2c"></rect>
137+
</g>
138+
</g>
139+
<g aria-label="facet" transform="translate(372,0)">
140+
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
141+
<text y="0.71em" transform="translate(64,400)">1985</text>
142+
</g>
143+
<g aria-label="bar">
144+
<rect x="43" width="20" y="159.7967479674797" height="240.2032520325203" fill="#4e79a7"></rect>
145+
<rect x="65" width="20" y="92.29268292682926" height="307.70731707317077" fill="#f28e2c"></rect>
146+
</g>
147+
</g>
148+
<g aria-label="facet" transform="translate(425,0)">
149+
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
150+
<text y="0.71em" transform="translate(64,400)">1990</text>
151+
</g>
152+
<g aria-label="bar">
153+
<rect x="43" width="20" y="83.02439024390246" height="316.9756097560975" fill="#4e79a7"></rect>
154+
<rect x="65" width="20" y="20" height="380" fill="#f28e2c"></rect>
155+
</g>
156+
</g>
157+
<g aria-label="facet" transform="translate(478,0)">
158+
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
159+
<text y="0.71em" transform="translate(64,400)">1995</text>
160+
</g>
161+
<g aria-label="bar">
162+
<rect x="43" width="20" y="270.8617886178862" height="129.1382113821138" fill="#4e79a7"></rect>
163+
<rect x="65" width="20" y="283.9918699186992" height="116.0081300813008" fill="#f28e2c"></rect>
164+
</g>
165+
</g>
166+
<g aria-label="facet" transform="translate(531,0)">
167+
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
168+
<text y="0.71em" transform="translate(64,400)">2000</text>
169+
</g>
170+
<g aria-label="bar">
171+
<rect x="43" width="20" y="391.9674796747968" height="8.032520325203222" fill="#4e79a7"></rect>
172+
<rect x="65" width="20" y="398.7642276422764" height="1.2357723577235902" fill="#f28e2c"></rect>
173+
</g>
174+
</g>
175+
<g aria-label="fx-axis label" transform="translate(0.5,27.5)">
176+
<text transform="translate(330,400)">date_of_birth</text>
177+
</g>
178+
<g aria-label="y-axis label" text-anchor="start" transform="translate(-36.5,-16.5)">
179+
<text y="0.71em" transform="translate(41,20)">↑ Frequency</text>
180+
</g>
181+
</svg>
182+
</figure>

‎test/plots/interval-aware.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,13 @@ export async function intervalAwareStack() {
2424
marks: [Plot.barY(olympians, {x: "date_of_birth", y: 1})]
2525
});
2626
}
27+
28+
export async function intervalAwareFacets() {
29+
const olympians = await d3.csv<any>("data/athletes.csv", d3.autoType);
30+
return Plot.plot({
31+
fx: {interval: "5 years"},
32+
x: {axis: null},
33+
color: {legend: true},
34+
marks: [Plot.barY(olympians, Plot.groupX({y: "count"}, {fx: "date_of_birth", x: (d) => d.sex[0], fill: "sex"}))]
35+
});
36+
}

0 commit comments

Comments
 (0)