Chart.Examples

Examples of chart construction.

Unit & Hud

unitExample :: ChartOptions

unit example

hudOptionsExample :: ChartOptions

A BlankChart, defaultHudOptions example.

Iconic primitives.

lineExample :: ChartOptions

line example

rectExample :: ChartOptions

rect example

textExample :: ChartOptions

text example

glyphsExample :: ChartOptions

glyphs example

pathExample :: ChartOptions

Compound path example.

Compounds

barExample :: ChartOptions

Bar chart example.

barDataExample :: BarData

Example data for Bar chart

sbarExample :: ChartOptions

Stacked bar chart example.

waveExample :: ChartOptions

wave example

surfaceExample :: ChartOptions

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 :: ChartOptions

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

ellipseExample :: ChartAspect -> ChartOptions

ellipse example

Under scaling, angles are not invariant, and this effects the glyphShape 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 :: ChartOptions

quad example

cubicExample :: ChartOptions

cubic example

vennExample :: ChartOptions

venn diagram

arrowExample :: ChartOptions

arrow example

Which happens to be the gradient of the surface example.

dateExample :: ChartOptions

date example

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

Colour

gradientExample :: ChartOptions

gradient example

Mixing Colours using the oklch color model.

wheelExample :: ChartOptions

Color wheel displaying palette choices

Debugging

debugExample :: ChartOptions -> ChartOptions

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

Compound Charts

compoundExample :: ChartOptions

A merge of two rect charts with different data ranges.

stackExample :: ChartOptions

Usage of stack.

Priority

priorityv1Example :: ChartOptions

priority Version 1 example

priorityv2Example :: ChartOptions

priority Version 2 example

Writing to file

pathChartOptions :: [(FilePath, ChartOptions)]

All the examples and the associated filepaths

writeAllExamples :: IO ()

Run this to refresh example SVG's.

writeAllExamplesDark :: IO ()

Version of charts with a dark-friendly hud