Chart.Examples

Examples of chart construction.

Unit & Hud

unitExample :: ChartSvg

unit example

hudOptionsExample :: ChartSvg

A BlankChart, defaultHudOptions example.

Iconic primitives.

lineExample :: ChartSvg

line example

rectExample :: ChartSvg

rect example

textExample :: ChartSvg

text example

glyphsExample :: ChartSvg

glyphs example

pathExample :: ChartSvg

Compound path example.

Compounds

barExample :: ChartSvg

Bar chart example.

sbarExample :: ChartSvg

Stacked bar chart example.

waveExample :: ChartSvg

wave example

surfaceExample :: ChartSvg

The common way to create a surface chart (or contour chart or heat map) is usually a grid over a function, a process reified in surfacef.

This is also an example of mix and mixes. In this example, colors with the same lightness have been chosen in the gradient and the result should appear a fairly uniform lightness across the surface.

rosenbrock :: Double -> Double -> Point Double -> (Double, Point Double)

function for testing

f(x,y) = (a-x)^2 + b * (y - x^2)^2
       = a^2 - 2ax + x^2 + b * y^2 - b * 2 * y * x^2 + b * x ^ 4
f'x = -2a + 2 * x - b * 4 * y * x + 4 * b * x ^ 3
f'y = 2 * b * y - 2 * b * x^2
f a b (Point x y) = (a^2 - 2ax + x^2 + b * y^2 - b * 2 * y * x^2 + b * x^4, Point (-2a + 2 * x - b * 4 * y * x + 4 * b * x ^ 3), 2 * b * y - 2 * b * x^2)

arcFlagsExample :: ChartSvg

Reproduction of the flag explanation chart in https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

ellipseExample :: ChartAspect -> ChartSvg

ellipse example

Under scaling, angles are not invariant, and this effects the shape of ellipses and thus SVG arc paths. Compare the effect of aspect changes to the axes of this ellipse:

Below is the same ellipse with FixedAspect 2. Points scale exactly, but the original points that represent the end points of the axes are no longer on the new axes of the ellipse.

quadExample :: ChartSvg

quad example

cubicExample :: ChartSvg

cubic example

vennExample :: ChartSvg

venn diagram

arrowExample :: ChartSvg

arrow example

Which happens to be the gradient of the surface example.

dateExample :: ChartSvg

date example

A hud that has date as the x-axis, and time as the y-axis. See placedTimeLabelContinuous.

Colour

gradientExample :: ChartSvg

gradient example

Mixing Colours using the oklch color model.

wheelExample :: ChartSvg

Color wheel displaying palette1 choices

• -

Debugging

debugExample :: ChartSvg -> ChartSvg

Adding reference points and bounding boxes to visualize chart alignment for use in debugging charts.

• -

writeAllExamples :: IO ()

Run this to refresh example SVG's.

writeAllExamplesDark :: IO ()

Version of charts with a dark-friendly hud