Announcing Purescript D3js, but for real this time

Announcements
#1

I’ve made a couple of attempts at this before but i think i’ve now got the approach right. This is a skeletal MVP release, but i believe it proves the viability of the approach.

Repo is here: https://github.com/afcondon/purescript-d3v6

I’d love comments, collaborators, issues, PRs etc

Example of syntax model in latest commit:

chart :: Tuple Number Number -> Selection Model
chart (Tuple width height) = 
  initialSelect "div#force" "forceLayout" [] $ [
    appendNamed "svg" Svg [ viewBox 0.0 0.0 width height ] [
      append Group [ strokeColor "#999", strokeOpacity 0.6 ] 
        [ join Line modelLinks
          (appendNamed "link" Line [ strokeWidth_D (\d -> sqrt (d3Link d).value)] [])
          noUpdate noExit ]
        
      , append Group [ strokeColor "#fff", strokeOpacity 1.5 ]
        [ join Circle modelNodes
          (appendNamed "node" Circle [ radius 5.0, fill_D colorByGroup] [])
          noUpdate noExit ]
      ]
  ]

Compare to this JS for example

  const svg = d3.selectAll(element).append("svg")
      .attr("viewBox", [0, 0, width, height]);

  const link = svg.append("g")
      .attr("stroke", "#999")
      .attr("stroke-opacity", 0.6)
    .selectAll("line")
    .data(links)
    .join("line")
      .attr("stroke-width", d => Math.sqrt(d.value));

  const node = svg.append("g")
      .attr("stroke", "#fff")
      .attr("stroke-width", 1.5)
    .selectAll("circle")
    .data(nodes)
    .join("circle")
      .attr("r", 5) // altho static, can't promote
      .attr("fill", d => scale(d.group))
10 Likes
Plotting with Purescript