Skip to content

Commit

Permalink
interval aware facets (#14)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Fil
Fil committed May 1, 2023
1 parent b190419 commit 44b5ad0
Show file tree
Hide file tree
Showing 2 changed files with 192 additions and 0 deletions.
182 changes: 182 additions & 0 deletions test/output/intervalAwareFacets.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
<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>
</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">
<style>
.plot {
display: block;
background: white;
height: auto;
height: intrinsic;
max-width: 100%;
}

.plot text,
.plot tspan {
white-space: pre;
}
</style>
<g aria-label="facet" transform="translate(1,0)">
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
<text y="0.71em" transform="translate(64,400)">1950</text>
</g>
<g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(0,0.5)">
<path transform="translate(40,400)" d="M0,0L-6,0"></path>
<path transform="translate(40,369.1056910569106)" d="M0,0L-6,0"></path>
<path transform="translate(40,338.2113821138211)" d="M0,0L-6,0"></path>
<path transform="translate(40,307.3170731707317)" d="M0,0L-6,0"></path>
<path transform="translate(40,276.4227642276423)" d="M0,0L-6,0"></path>
<path transform="translate(40,245.52845528455285)" d="M0,0L-6,0"></path>
<path transform="translate(40,214.6341463414634)" d="M0,0L-6,0"></path>
<path transform="translate(40,183.739837398374)" d="M0,0L-6,0"></path>
<path transform="translate(40,152.84552845528455)" d="M0,0L-6,0"></path>
<path transform="translate(40,121.95121951219514)" d="M0,0L-6,0"></path>
<path transform="translate(40,91.0569105691057)" d="M0,0L-6,0"></path>
<path transform="translate(40,60.16260162601627)" d="M0,0L-6,0"></path>
<path transform="translate(40,29.268292682926838)" 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,400)">0</text>
<text y="0.32em" transform="translate(40,369.1056910569106)">200</text>
<text y="0.32em" transform="translate(40,338.2113821138211)">400</text>
<text y="0.32em" transform="translate(40,307.3170731707317)">600</text>
<text y="0.32em" transform="translate(40,276.4227642276423)">800</text>
<text y="0.32em" transform="translate(40,245.52845528455285)">1,000</text>
<text y="0.32em" transform="translate(40,214.6341463414634)">1,200</text>
<text y="0.32em" transform="translate(40,183.739837398374)">1,400</text>
<text y="0.32em" transform="translate(40,152.84552845528455)">1,600</text>
<text y="0.32em" transform="translate(40,121.95121951219514)">1,800</text>
<text y="0.32em" transform="translate(40,91.0569105691057)">2,000</text>
<text y="0.32em" transform="translate(40,60.16260162601627)">2,200</text>
<text y="0.32em" transform="translate(40,29.268292682926838)">2,400</text>
</g>
<g aria-label="bar">
<rect x="43" width="20" y="399.6910569105691" height="0.30894308943089754" fill="#4e79a7"></rect>
</g>
</g>
<g aria-label="facet" transform="translate(54,0)">
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
<text y="0.71em" transform="translate(64,400)">1955</text>
</g>
<g aria-label="bar">
<rect x="43" width="20" y="399.5365853658536" height="0.46341463414637474" fill="#4e79a7"></rect>
<rect x="65" width="20" y="399.38211382113826" height="0.6178861788617382" fill="#f28e2c"></rect>
</g>
</g>
<g aria-label="facet" transform="translate(107,0)">
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
<text y="0.71em" transform="translate(64,400)">1960</text>
</g>
<g aria-label="bar">
<rect x="43" width="20" y="399.0731707317073" height="0.9268292682926926" fill="#4e79a7"></rect>
<rect x="65" width="20" y="396.2926829268293" height="3.7073170731707137" fill="#f28e2c"></rect>
</g>
</g>
<g aria-label="facet" transform="translate(160,0)">
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
<text y="0.71em" transform="translate(64,400)">1965</text>
</g>
<g aria-label="bar">
<rect x="43" width="20" y="397.5284552845529" height="2.4715447154471235" fill="#4e79a7"></rect>
<rect x="65" width="20" y="395.6747967479675" height="4.325203252032509" fill="#f28e2c"></rect>
</g>
</g>
<g aria-label="facet" transform="translate(213,0)">
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
<text y="0.71em" transform="translate(64,400)">1970</text>
</g>
<g aria-label="bar">
<rect x="43" width="20" y="394.9024390243902" height="5.097560975609781" fill="#4e79a7"></rect>
<rect x="65" width="20" y="391.349593495935" height="8.650406504065018" fill="#f28e2c"></rect>
</g>
</g>
<g aria-label="facet" transform="translate(266,0)">
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
<text y="0.71em" transform="translate(64,400)">1975</text>
</g>
<g aria-label="bar">
<rect x="43" width="20" y="383.4715447154472" height="16.52845528455282" fill="#4e79a7"></rect>
<rect x="65" width="20" y="369.56910569105696" height="30.43089430894304" fill="#f28e2c"></rect>
</g>
</g>
<g aria-label="facet" transform="translate(319,0)">
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
<text y="0.71em" transform="translate(64,400)">1980</text>
</g>
<g aria-label="bar">
<rect x="43" width="20" y="316.12195121951225" height="83.87804878048775" fill="#4e79a7"></rect>
<rect x="65" width="20" y="274.4146341463414" height="125.58536585365857" fill="#f28e2c"></rect>
</g>
</g>
<g aria-label="facet" transform="translate(372,0)">
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
<text y="0.71em" transform="translate(64,400)">1985</text>
</g>
<g aria-label="bar">
<rect x="43" width="20" y="159.7967479674797" height="240.2032520325203" fill="#4e79a7"></rect>
<rect x="65" width="20" y="92.29268292682926" height="307.70731707317077" fill="#f28e2c"></rect>
</g>
</g>
<g aria-label="facet" transform="translate(425,0)">
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
<text y="0.71em" transform="translate(64,400)">1990</text>
</g>
<g aria-label="bar">
<rect x="43" width="20" y="83.02439024390246" height="316.9756097560975" fill="#4e79a7"></rect>
<rect x="65" width="20" y="20" height="380" fill="#f28e2c"></rect>
</g>
</g>
<g aria-label="facet" transform="translate(478,0)">
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
<text y="0.71em" transform="translate(64,400)">1995</text>
</g>
<g aria-label="bar">
<rect x="43" width="20" y="270.8617886178862" height="129.1382113821138" fill="#4e79a7"></rect>
<rect x="65" width="20" y="283.9918699186992" height="116.0081300813008" fill="#f28e2c"></rect>
</g>
</g>
<g aria-label="facet" transform="translate(531,0)">
<g aria-label="fx-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
<text y="0.71em" transform="translate(64,400)">2000</text>
</g>
<g aria-label="bar">
<rect x="43" width="20" y="391.9674796747968" height="8.032520325203222" fill="#4e79a7"></rect>
<rect x="65" width="20" y="398.7642276422764" height="1.2357723577235902" fill="#f28e2c"></rect>
</g>
</g>
<g aria-label="fx-axis label" transform="translate(0.5,27.5)">
<text transform="translate(330,400)">date_of_birth</text>
</g>
<g aria-label="y-axis label" text-anchor="start" transform="translate(-36.5,-16.5)">
<text y="0.71em" transform="translate(41,20)">↑ Frequency</text>
</g>
</svg>
</figure>
10 changes: 10 additions & 0 deletions test/plots/interval-aware.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,13 @@ export async function intervalAwareStack() {
marks: [Plot.barY(olympians, {x: "date_of_birth", y: 1})]
});
}

export async function intervalAwareFacets() {
const olympians = await d3.csv<any>("data/athletes.csv", d3.autoType);
return Plot.plot({
fx: {interval: "5 years"},
x: {axis: null},
color: {legend: true},
marks: [Plot.barY(olympians, Plot.groupX({y: "count"}, {fx: "date_of_birth", x: (d) => d.sex[0], fill: "sex"}))]
});
}

0 comments on commit 44b5ad0

Please sign in to comment.