This is a re-implementation of this neat small mutliple example using d3fc components.
Some notable things ...
forked from ColinEberhardt's block: Small multiples
xxxxxxxxxx
<meta charset='utf-8'>
<script src="https://unpkg.com/d3@4.6.0"></script>
<script src="https://unpkg.com/d3fc@12.1.0"></script>
<style>
body {
font: 14px sans-serif;
}
g text {
font-size: 10px;
}
#chart {
display: flex;
}
#chart > div {
flex: 5;
height: 300px;
}
@media (min-width: 768px) {
#chart > div {
height: 500px;
}
body {
font: 16px sans-serif;
}
g text {
font-size: 12px;
}
}
#chart>div:not(:first-child) .y-axis,
#chart>div:not(:first-child) .y-axis-label {
opacity: 0;
}
/* Some slighlty hacky looking CSS - I'll look into this! */
.y-axis {
width: 1em !important;
}
.x-axis, .chart-label {
margin-left: 2em !important;
}
.area {
fill: #badcfe;
}
.annotation-line line, .line {
fill: none;
stroke: #8ba5be;
stroke-width: 1.5px;
}
.point {
fill: white;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<div id='chart'></div>
<script src="small-multiple.js"></script>
https://unpkg.com/d3@4.6.0
https://unpkg.com/d3fc@12.1.0