Hylograph.Unified.Examples

type DataPoint = { category :: String, value :: Number, x :: Number, y :: Number }

type QuarterData = { expenses :: Number, quarter :: String, revenue :: Number }

newStyleCircle :: DataPoint -> Array (Attribute DataPoint)

New-style visualization using Display profunctor

newStyleCircleFormatted :: DataPoint -> Array (Attribute DataPoint)

With more sophisticated formatting

computeGrowth :: forall repr. DataDSL repr => repr (Array Number) -> repr (Array Number)

A computation that works in BOTH spreadsheet and visualization contexts

averageAboveThreshold :: forall repr. DataDSL repr => Number -> repr (Array Number) -> repr Number

Another unified computation: filter and average

computeProfit :: forall repr. DataDSL repr => repr (Array QuarterData) -> repr (Array Number)

Quarterly profit computation

totalProfit :: forall repr. DataDSL repr => repr (Array QuarterData) -> repr Number

Total profit (works in sheet or viz)

percentDisplay :: Display Number String

Percentage display: 0.156 -> "15.6%"

currencyDisplay :: Display Number String

Currency display: 1234.56 -> "$1,234.56"

profitDisplay :: Display Number String

Profit display (with sign): -100 -> "(100)", 100 -> "100"

compactDisplay :: Display Number String

Compact display for large numbers: 1500000 -> "1.5M"

showAsPercent :: Number -> String

Using displays

showAsCurrency :: Number -> String

quarterGrowthDisplay :: Display QuarterData String

Adapt percentage display to work with QuarterData

revenueDisplay :: Display QuarterData String

Adapt to extract different fields

expensesDisplay :: Display QuarterData String

newStyleViz :: Array DataPoint -> Tree DataPoint

A visualization using the new style throughout

myComputation :: forall repr. DataDSL repr => repr (Array Number) -> repr Number

Define computation abstractly

useInViz :: Array Number -> Number

Use in visualization context (via EvalD)

formatLabel :: QuarterData -> String

Example of creating a label with display formatting

formatGrowthLabel :: QuarterData -> String

Or with percentage growth:

simpleJoinExample :: Array DataPoint -> Tree DataPoint

Simple data join

Use joinData for one-shot renders where elements don't update. For dynamic updates, use updateJoin with a keyFn.

joinWithGUPExample :: Array DataPoint -> Tree DataPoint

Join with GUP (General Update Pattern) - enter/update/exit

For dynamic updates, use updateJoin with a keyFn to identify elements. The keyFn extracts a unique string identifier from each datum.

type SceneData = { points :: Array DataPoint, title :: String }

Scene data with nested structure

nestedJoinExample :: SceneData -> Tree SceneData

Nested join with type decomposition

The scene data contains an array of points. nestedJoin extracts the inner array for joining.

Use this for one-shot renders with type decomposition. For dynamic updates with decomposition, use updateNestedJoin.

fullJoinExample :: SceneData -> Tree SceneData

Full join: decomposition + GUP

This is the most powerful combination - handles:

• Type-changing decomposition (SceneData -> Array DataPoint)
• Enter/update/exit behaviors with transitions