purescript-hylograph-selection

Type-safe D3 selection and attribute library for PureScript.

A declarative, type-safe approach to D3.js visualization in PureScript. Instead of imperative D3 method chaining, you build a tree AST that describes your visualization, then interpret it to render.

spago install hylograph-selection

Build visualizations as data structures using HATS:

import Hylograph.AST as A
import Hylograph.Expr.Friendly (attr, num, text)
import Hylograph.Internal.Selection.Types (ElementType(..))

myViz :: A.Tree Unit
myViz =
  A.named SVG "chart"
    [ attr "width" $ num 400.0
    , attr "height" $ num 300.0
    ]
    `A.withChild`
      A.elem Circle
        [ attr "cx" $ num 200.0
        , attr "cy" $ num 150.0
        , attr "r" $ num 50.0
        , attr "fill" $ text "steelblue"
        ]

D3-style enter/update/exit with type safety:

A.joinData "circles" "circle" myData $ \d ->
  A.elem Circle
    [ fnAttr "cx" (_.x)
    , fnAttr "cy" (_.y)
    , fnAttr "r" (_.radius)
    ]

• D3 Interpreter - Renders to DOM via D3.js
• English Interpreter - Describes the tree in plain English
• Mermaid Interpreter - Generates Mermaid diagrams
• SemiQuine Interpreter - Generates PureScript code

• Hylograph.AST - Tree AST types and constructors
• Hylograph.HATS - HATS DSL helpers
• Hylograph.Render - Rendering utilities

• Hylograph.Expr.Friendly - Attribute helpers (attr, cx, cy, fill, etc.)
• Hylograph.Expr.Attr - Low-level attribute types
• Hylograph.Expr.Sugar - Convenience functions

• Hylograph.Interpreter.D3 - D3.js rendering
• Hylograph.Interpreter.English - Plain English description
• Hylograph.Interpreter.Mermaid - Mermaid diagram generation
• Hylograph.Interpreter.SemiQuine - Code generation

• Hylograph.Interaction.Zoom - Zoom behavior
• Hylograph.Interaction.Brush - Brush selection
• Hylograph.Interaction.Pointer - Pointer events

• Hylograph.Scale - D3-style scales
• Hylograph.Axis.Axis - Axis rendering
• Hylograph.Transform - SVG transforms
• Hylograph.Tooltip - Tooltip helpers

• hylograph-selection - D3 selection library (this package)
• hylograph-graph - Graph data structures
• hylograph-layout - Layout algorithms
• hylograph-simulation - Force simulation

Uses tree-rose for rose tree data structures.

MIT