Explore the primitives
A shape for every story.
Eighteen starting points for your next visualisation. Every chart is SVG, built with Foldkit Viz.
All datasets are illustrative. Map boundaries: Natural Earth via world-atlas.
NEW / INTERACTIVE
Try it. Read it. Make it yours.
Shape a line, regroup a distribution, inspect a scatter plot, compose bars, weight words or explore retained datasets. Read the code as you experiment, then take the working example into your own project.
01 / Network
Connections
See how six groups connect. A chord layout turns a matrix of relationships into arcs and ribbons.
@opsydyn/foldkit-viz/shape/chordExplore the source 02 / Flow
Where it flows
Follow a journey from source to destination. A Sankey layout makes the size of each flow visible.
@opsydyn/foldkit-viz/shape/sankeyExplore the source 03 / Scatter
See relationships
Map two dimensions with linear scales. Colour reveals groups; each point retains its own coordinates.
@opsydyn/foldkit-viz/math/scaleExplore the source 04 / Geographic
Place matters
Project geographic features into SVG paths. This regional map of Europe uses illustrative colour bands, not country statistics.
@opsydyn/foldkit-viz/shape/geoExplore the source 05 / Line
Choose your curve
The same points, a different character. Compare smooth, straight and stepped interpolation.
@opsydyn/foldkit-viz/shape/lineExplore the source 06 / Histogram
Find the distribution
Bin two sets of values into equal intervals. Overlapping distributions reveal patterns that averages can hide.
@opsydyn/foldkit-viz/math/binExplore the source 07 / Bars
Compare the parts
Nested band scales compare several series within each category. Try grouped and stacked bars in either orientation.
Try the live example →@opsydyn/foldkit-viz/chart/barsExplore the source 08 / Bars
Build the total
Stack series to show composition. Each rectangle retains its datum, category and series identity.
Try the live example →@opsydyn/foldkit-viz/chart/barsExplore the source 09 / Area
Follow the volume
An area path connects values to a baseline, showing how a quantity changes across an interval.
@opsydyn/foldkit-viz/shape/areaExplore the source 10 / Stack
Find the rhythm
A centred stack reveals the changing contribution of multiple series.
@opsydyn/foldkit-viz/shape/stackExplore the source 11 / Composition
Parts of a whole
A pie layout supplies angles; arc geometry gives each slice its shape.
@opsydyn/foldkit-viz/shape/pieExplore the source 12 / Radial
Compare profiles
Radial lines compare illustrative profiles across six dimensions.
@opsydyn/foldkit-viz/shape/lineRadialExplore the source 13 / Matrix
Spot the intensity
A grid maps two categories to position and a third value to colour.
@opsydyn/foldkit-viz/math/scaleExplore the source 14 / Hierarchy
Divide the space
A squarified treemap gives each leaf space in proportion to its value.
@opsydyn/foldkit-viz/hierarchyExplore the source 15 / Hierarchy
Gather the groups
Packed circles reveal the relative size of leaves in a hierarchy.
@opsydyn/foldkit-viz/hierarchyExplore the source 16 / Hierarchy
Trace the branches
A tidy tree positions related nodes; SVG links make the structure visible.
@opsydyn/foldkit-viz/hierarchyExplore the source 17 / Statistics
Read the spread
Quartiles, medians and whiskers describe the shape of each distribution.
@opsydyn/foldkit-viz/math/statsExplore the source 18 / Statistics
See the density
Kernel density estimation reveals where observations cluster within a distribution.
@opsydyn/foldkit-viz/math/statsExplore the source