Small multiples
This example demonstrates small multiples by rendering five separate line charts, one for each month, showing sales trends across the years 2011 to 2015. Each chart displays an area, line, and point series created with d3fc series components, alongside an average annotation line. The charts are generated using the d3fc chartSvgCartesian component, which is applied to each group of data via a data-join. The y-axis is hidden on all but the first chart using CSS, and the chart height adapts to screen width through a media query.
AI-generated descriptionThis is a re-implementation of this neat small mutliple example using d3fc components.
Some notable things ...
- The area, line and point series renderers remove some of the basic SVG rendering logic.
- The cartesian chart component is being rendered via a data-join to create the small multiples. Because the chart uses a mixture of SVG and DOM, we can hide the y axis for repeated charts using CSS.
- The responsive behaviour where the chart height is reduced for narrower screens uses a simple media query. This is made possible because the chart components uses the underlying d3fc element API which handles redrawing svg / canvas elements when their size changes.
forked from <a href='http://bl.ocks.org/ColinEberhardt/'>ColinEberhardt</a>'s block: <a href='http://bl.ocks.org/ColinEberhardt/dea5ae59475675e87d765b3a4a8dc057'>Small multiples</a>