[example] implemented sample contour plot

example/dist/index.html

@@ -24,6 +24,8 @@
         </div>
         <div id="data-with-append">
         </div>
+        <div id="contour">
+        </div>
 
 
         <!-- NOTE: it's important that this is at the end so that the DOM is ready -->

example/index.html

@@ -24,6 +24,8 @@
         </div>
         <div id="data-with-append">
         </div>
+        <div id="contour">
+        </div>
 
 
         <!-- NOTE: it's important that this is at the end so that the DOM is ready -->

example/spago.dhall

@@ -12,14 +12,22 @@ to generate this file without the comments in this block.
 -}
 { name = "example"
 , dependencies =
-  [ "console"
+  [ "aff"
+  , "arrays"
+  , "console"
   , "d3"
   , "dom-simple"
   , "effect"
+  , "either"
+  , "foldable-traversable"
+  , "foreign"
+  , "integers"
   , "math"
+  , "maybe"
   , "prelude"
   , "psci-support"
   , "reactix-d3"
+  , "transformers"
   ]
 , packages = ./packages.dhall
 , sources = [ "src/**/*.purs", "test/**/*.purs" ]

example/src/Main.purs

@@ -2,36 +2,108 @@ module Main where
 
 import Prelude hiding (append)
 
-import DOM.Simple.Console (log2)
+import Control.Monad.Except (runExcept)
+import Data.Array as A
+import Data.Either (Either(..))
+import Data.Int (toNumber)
+import Data.Maybe (Maybe(..))
+import Data.Traversable (traverse)
+import DOM.Simple.Console (log, log2)
 import Effect (Effect)
+import Effect.Aff (launchAff_)
+import Effect.Class (liftEffect)
+import Foreign
 import Math
 
 import Graphics.D3.Base
-import Graphics.D3.Scale
-import Graphics.D3.Selection
+import Graphics.D3.Contour as Contour
+import Graphics.D3.Request
+import Graphics.D3.Scale as Scale
+import Graphics.D3.Selection as Selection
+import Graphics.D3.Util
 
 main :: Effect Unit
 main = do
   log2 "d3" d3
-  scale <- linearScale
-    >>= domain [-10.0, 10.0]
-    >>= range [0.0, 1.0]
-    >>= toFunction
+  scale <- Scale.linearScale
+    >>= Scale.domain [-10.0, 10.0]
+    >>= Scale.range [0.0, 1.0]
+    >>= Scale.toFunction
   log2 "after scaleLinear" scale
   log2 "scale @ 5" $ scale 5.0
-  selected <- rootSelect "#select-me"
+
+  selected <- Selection.rootSelect "#select-me"
   log2 "selected '#select-me'" selected
+
   let data' = [ "first data", "second data" ]
-  simpleData <- rootSelect "#simple-data"
-    >>= selectAll "p"
-    >>= bindData data'
-    >>= text' show
+  simpleData <- Selection.rootSelect "#simple-data"
+    >>= Selection.selectAll "p"
+    >>= Selection.bindData data'
+    >>= Selection.text' show
   log2 "simpleData" simpleData
-  dataWithAppend <- rootSelect "#data-with-append"
-    >>= selectAll "p"
-    >>= bindData data'
-    >>= enter
-    >>= append "p"
-    >>= style'' "color" (\d idx -> if idx `remainder` 2.0 == 0.0 then "green" else "red")
-    >>= text' show
+
+  dataWithAppend <-Selection.rootSelect "#data-with-append"
+    >>= Selection.selectAll "p"
+    >>= Selection.bindData data'
+    >>= Selection.enter
+    >>= Selection.append "p"
+    >>= Selection.style'' "color" (\d idx -> if idx `remainder` 2.0 == 0.0 then "green" else "red")
+    >>= Selection.text' show
   log2 "dataWithAppend" dataWithAppend
+
+  -- https://www.d3-graph-gallery.com/graph/density2d_contour.html
+  let margin = {top: 20, right: 30, bottom: 30, left: 40}
+      width = 460 - margin.left - margin.right
+      height = 400 - margin.top - margin.bottom
+  svg <- Selection.rootSelect "#contour"
+    >>= Selection.append "svg"
+    >>= Selection.attr "width" (width + margin.left + margin.right)
+    >>= Selection.attr "height" (height + margin.top + margin.bottom)
+    >>= Selection.append "g"
+    >>= Selection.attr "transform" ("translate(" <> show margin.left <> ", " <> show margin.top <> ")")
+  launchAff_ do
+    let handleRow d =
+          case (runExcept $ traverse readNumber =<< readArray d) of
+            Left _ -> { x: 0.0, y: 0.0 }
+            Right arr ->
+              case A.uncons arr of
+                Nothing -> { x: 0.0, y: 0.0 }
+                Just { head, tail } -> case A.uncons tail of
+                  Nothing -> { x: head, y: 0.0 }
+                  Just { head: head2 } -> { x: head, y: head2 }
+    data' <- csv "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_for_density2d.csv" handleRow
+    liftEffect $ log2 "data'" data'
+    liftEffect $ do
+        x <- Scale.linearScale
+          >>= Scale.domain [5.0, 20.0]
+          >>= Scale.range [0.0, toNumber width]
+        _ <- Selection.append "g" svg
+          >>= Selection.attr "transform" ("translate(0, " <> show height <> ")")
+          -- TODO call (d3.axisBottom(x))
+
+        y <- Scale.linearScale
+          >>= Scale.domain [5.0, 22.0]
+          >>= Scale.range [toNumber height, 0.0]
+        _ <- pure svg >>= Selection.append "g"
+          -- TODO call (d3.axisLeft(y))
+
+        densityData <- Contour.contourDensity
+          >>= Contour.x' (\d -> d.x)
+          >>= Contour.y' (\d -> d.y)
+          >>= Contour.size [toNumber width, toNumber height]
+          >>= Contour.bandwidth 20.0
+          >>= Contour.toFunction
+
+        log2 "densityData(data')" $ densityData data'
+
+        _ <- pure svg
+          >>= Selection.selectAll "path"
+          >>= Selection.bindData (densityData data')
+          >>= Selection.enter
+          >>= Selection.append "path"
+          >>= Selection.attr "d" Contour.geoPath
+          >>= Selection.attr "fill" "none"
+          >>= Selection.attr "stroke" "#69b3a2"
+          >>= Selection.attr "stroke-linejoin" "round"
+        pure unit
+  log2 "svg" svg

packages-additions.dhall

-      { -- d3 = ../purescript-d3/spago.dhall as Location
-        d3 = {
+      { d3 = ../purescript-d3/spago.dhall as Location
+        {- d3 = {
           dependencies =
             [ "easy-ffi"
             , "effect"
@@ -13,7 +13,7 @@
             , "tuples" ]
         , repo = "https://github.com/cgenie/purescript-d3"
         , version = "master"
-        }
+        } -}
       ,
         dom-simple =
         { dependencies =