Commit 2c68be1d authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski

[example] implemented sample contour plot

parent 15afbdf8
...@@ -24,6 +24,8 @@ ...@@ -24,6 +24,8 @@
</div> </div>
<div id="data-with-append"> <div id="data-with-append">
</div> </div>
<div id="contour">
</div>
<!-- NOTE: it's important that this is at the end so that the DOM is ready --> <!-- NOTE: it's important that this is at the end so that the DOM is ready -->
......
...@@ -24,6 +24,8 @@ ...@@ -24,6 +24,8 @@
</div> </div>
<div id="data-with-append"> <div id="data-with-append">
</div> </div>
<div id="contour">
</div>
<!-- NOTE: it's important that this is at the end so that the DOM is ready --> <!-- NOTE: it's important that this is at the end so that the DOM is ready -->
......
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -12,14 +12,22 @@ to generate this file without the comments in this block. ...@@ -12,14 +12,22 @@ to generate this file without the comments in this block.
-} -}
{ name = "example" { name = "example"
, dependencies = , dependencies =
[ "console" [ "aff"
, "arrays"
, "console"
, "d3" , "d3"
, "dom-simple" , "dom-simple"
, "effect" , "effect"
, "either"
, "foldable-traversable"
, "foreign"
, "integers"
, "math" , "math"
, "maybe"
, "prelude" , "prelude"
, "psci-support" , "psci-support"
, "reactix-d3" , "reactix-d3"
, "transformers"
] ]
, packages = ./packages.dhall , packages = ./packages.dhall
, sources = [ "src/**/*.purs", "test/**/*.purs" ] , sources = [ "src/**/*.purs", "test/**/*.purs" ]
......
...@@ -2,36 +2,108 @@ module Main where ...@@ -2,36 +2,108 @@ module Main where
import Prelude hiding (append) 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 (Effect)
import Effect.Aff (launchAff_)
import Effect.Class (liftEffect)
import Foreign
import Math import Math
import Graphics.D3.Base import Graphics.D3.Base
import Graphics.D3.Scale import Graphics.D3.Contour as Contour
import Graphics.D3.Selection import Graphics.D3.Request
import Graphics.D3.Scale as Scale
import Graphics.D3.Selection as Selection
import Graphics.D3.Util
main :: Effect Unit main :: Effect Unit
main = do main = do
log2 "d3" d3 log2 "d3" d3
scale <- linearScale scale <- Scale.linearScale
>>= domain [-10.0, 10.0] >>= Scale.domain [-10.0, 10.0]
>>= range [0.0, 1.0] >>= Scale.range [0.0, 1.0]
>>= toFunction >>= Scale.toFunction
log2 "after scaleLinear" scale log2 "after scaleLinear" scale
log2 "scale @ 5" $ scale 5.0 log2 "scale @ 5" $ scale 5.0
selected <- rootSelect "#select-me"
selected <- Selection.rootSelect "#select-me"
log2 "selected '#select-me'" selected log2 "selected '#select-me'" selected
let data' = [ "first data", "second data" ] let data' = [ "first data", "second data" ]
simpleData <- rootSelect "#simple-data" simpleData <- Selection.rootSelect "#simple-data"
>>= selectAll "p" >>= Selection.selectAll "p"
>>= bindData data' >>= Selection.bindData data'
>>= text' show >>= Selection.text' show
log2 "simpleData" simpleData log2 "simpleData" simpleData
dataWithAppend <- rootSelect "#data-with-append"
>>= selectAll "p" dataWithAppend <-Selection.rootSelect "#data-with-append"
>>= bindData data' >>= Selection.selectAll "p"
>>= enter >>= Selection.bindData data'
>>= append "p" >>= Selection.enter
>>= style'' "color" (\d idx -> if idx `remainder` 2.0 == 0.0 then "green" else "red") >>= Selection.append "p"
>>= text' show >>= Selection.style'' "color" (\d idx -> if idx `remainder` 2.0 == 0.0 then "green" else "red")
>>= Selection.text' show
log2 "dataWithAppend" dataWithAppend 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
{ -- d3 = ../purescript-d3/spago.dhall as Location { d3 = ../purescript-d3/spago.dhall as Location
d3 = { {- d3 = {
dependencies = dependencies =
[ "easy-ffi" [ "easy-ffi"
, "effect" , "effect"
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
, "tuples" ] , "tuples" ]
, repo = "https://github.com/cgenie/purescript-d3" , repo = "https://github.com/cgenie/purescript-d3"
, version = "master" , version = "master"
} } -}
, ,
dom-simple = dom-simple =
{ dependencies = { dependencies =
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment