[example] use infix operators

example/dist/index.html

@@ -31,6 +31,7 @@
         <div id="axis"></div>
         <div id="time-axis"></div>
         <div id="links"></div>
+        <div id="reset-zoom">Reset zoom</div>
 
         <!-- NOTE: it's important that this is at the end so that the DOM is ready -->
         <script type="text/javascript" src="/index.fd532818.js"></script>

example/index.html

@@ -32,6 +32,7 @@
         <div id="axis"></div>
         <div id="time-axis"></div>
         <div id="links"></div>
+        <div id="reset-zoom">Reset zoom</div>
 
         <!-- NOTE: it's important that this is at the end so that the DOM is ready -->
         <script type="text/javascript" src="index.js"></script>

example/src/Main.purs

@@ -23,6 +23,7 @@ import Graphics.D3.Link as Link
 import Graphics.D3.Request
 import Graphics.D3.Scale as Scale
 import Graphics.D3.Selection as Selection
+import Graphics.D3.Selection ((>=>), (>=>-), (>=>++))
 import Graphics.D3.SVG.Axis as Axis
 import Graphics.D3.Time as Time
 import Graphics.D3.Util
@@ -48,11 +49,11 @@ main = do
     >>= Selection.text' show
   log2 "simpleData" simpleData
 
-  dataWithAppend <-Selection.rootSelect "#data-with-append"
+  dataWithAppend <- Selection.rootSelect "#data-with-append"
     >>= Selection.selectAll "p"
     >>= Selection.bindData data'
     >>= Selection.enter
-    >>= Selection.append "p"
+    >=>++ "p"
     >>= Selection.style'' "color" (\d idx -> if idx `remainder` 2.0 == 0.0 then "green" else "red")
     >>= Selection.text' show
   log2 "dataWithAppend" dataWithAppend
@@ -62,11 +63,11 @@ main = do
       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 <> ")")
+    >=>++ "svg"
+    >=> Tuple "width" (width + margin.left + margin.right)
+    >=> Tuple "height" (height + margin.top + margin.bottom)
+    >=>++ "g"
+    >=> Tuple "transform" ("translate(" <> show margin.left <> ", " <> show margin.top <> ")")
   launchAff_ do
     let handleRow d =
           case (runExcept $ traverse readNumber =<< readArray d) of
@@ -84,7 +85,7 @@ main = do
           >>= Scale.domain [5.0, 20.0]
           >>= Scale.range [0.0, toNumber width]
         _ <- Selection.append "g" svg
-          >>= Selection.attr "transform" ("translate(0, " <> show height <> ")")
+          >=> Tuple "transform" ("translate(0, " <> show height <> ")")
           -- TODO call (d3.axisBottom(x))
 
         y <- Scale.linearScale
@@ -106,11 +107,11 @@ main = do
           >>= 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"
+          >=>++ "path"
+          >=> Tuple "d" Contour.geoPath
+          >=> Tuple "fill" "none"
+          >=> Tuple "stroke" "#69b3a2"
+          >=> Tuple "stroke-linejoin" "round"
         pure unit
   log2 "svg" svg
 
@@ -120,10 +121,10 @@ main = do
     >>= Scale.range [0.0, 400.0]
   xAxis <- Axis.axisBottom axisScale
   axisSvg <- Selection.rootSelect "#axis"
-    >>= Selection.append "svg"
-    >>= Selection.attr "width" 400
-    >>= Selection.attr "height" 50
-    >>= Selection.append "g"
+    >=>++ "svg"
+    >=> Tuple "width" 400
+    >=> Tuple "height" 50
+    >=>++ "g"
     >>= Axis.renderAxis xAxis
   log2 "axisScale" axisScale
 
@@ -131,10 +132,10 @@ main = do
     >>= Scale.range [0.0, 400.0]
   timeAxis <- Axis.axisBottom timeScale
   timeSvg <- Selection.rootSelect "#time-axis"
-    >>= Selection.append "svg"
-    >>= Selection.attr "width" 400
-    >>= Selection.attr "height" 50
-    >>= Selection.append "g"
+    >=>++ "svg"
+    >=> Tuple "width" 400
+    >=> Tuple "height" 50
+    >=>++ "g"
     >>= Axis.renderAxis timeAxis
   log2 "timeScale" timeScale
 
@@ -164,8 +165,8 @@ main = do
     >>= Link.y (\(Tuple _ y) -> linkYScale y)
   linkElSvg <- Selection.rootSelect "#links"
     >>= Selection.append "svg"
-    >>= Selection.attr "width" 200.0
-    >>= Selection.attr "height" 200.0
+    >=> Tuple "width" 200.0
+    >=> Tuple "height" 200.0
   -- _ <- Selection.selectAll ".circle" linkElSvg
   --   >>= Selection.bindData linkNodeData
   --   >>= Selection.join "circle"
@@ -180,27 +181,31 @@ main = do
     >>= Selection.append "g"
     -- >>= Selection.attr' "transform" (\{ position: Tuple x y} -> "translate(" <> (show $ linkXScale $ toNumber x) <> ", " <> (show $ linkYScale $ toNumber y) <> ")")
   _ <- Selection.append "circle" linkG
-    >>= Selection.attr' "cx" (\{ position: Tuple x _} -> linkXScale $ toNumber x)
-    >>= Selection.attr' "cy" (\{ position: Tuple _ y} -> linkYScale $ toNumber y)
-    >>= Selection.attr "r" 5
-    >>= Selection.attr "stroke" "black"
+    >=>- Tuple "cx" (\{ position: Tuple x _} -> linkXScale $ toNumber x)
+    >=>- Tuple "cy" (\{ position: Tuple _ y} -> linkYScale $ toNumber y)
+    >=> Tuple "r" 5
+    >=> Tuple "stroke" "black"
     >>= Selection.classed "circle" true
   _ <- Selection.append "text" linkG
     >>= Selection.text' (\{ id } -> id)
-    >>= Selection.attr' "x" (\{ position: Tuple x _} -> linkXScale (toNumber x) + 5.0)
-    >>= Selection.attr' "y" (\{ position: Tuple _ y} -> linkYScale $ toNumber y)
-    >>= Selection.attr "stroke" "black"
-    >>= Selection.attr "font-size" "0.5em"
+    >=>- Tuple "x" (\{ position: Tuple x _} -> linkXScale (toNumber x) + 5.0)
+    >=>- Tuple "y" (\{ position: Tuple _ y} -> linkYScale $ toNumber y)
+    >=> Tuple "stroke" "black"
+    >=> Tuple "font-size" "0.5em"
   _ <- Selection.selectAll "path" linkG
     >>= Selection.bindData linkNodeData
     >>= Selection.join "path"
-    >>= Selection.attr "d" linkGen
-    >>= Selection.attr "fill" "none"
-    >>= Selection.attr "stroke" "black"
+    >=> Tuple "d" linkGen
+    >=> Tuple "fill" "none"
+    >=> Tuple "stroke" "black"
   linkZoom <- Zoom.zoom
     >>= Zoom.on "zoom" (\ze -> unsafePerformEffect $ do
       _ <- log2 "zoom" ze
       _ <- Selection.attr "transform" (Zoom.transform ze) linkG
       pure unit)
   _ <- Zoom.renderZoom linkZoom linkElSvg
+  -- resetZoomEl <- Selection.selectAll "#reset-zoom"
+  --   >>= Selection.onClick (\_ -> do
+  --     _ <- Selection.call (Zoom.transform linkZoom) Zoom.zoomIdentity linkG
+  --     pure unit)
   log2 "linkEl" linkElSvg