Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
P
purescript-reactix-d3
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
gargantext
purescript-reactix-d3
Commits
2c68be1d
Commit
2c68be1d
authored
Jun 11, 2021
by
Przemyslaw Kaminski
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
[example] implemented sample contour plot
parent
15afbdf8
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
2828 additions
and
145 deletions
+2828
-145
index.html
example/dist/index.html
+2
-0
index.html
example/index.html
+2
-0
index.js
example/index.js
+2721
-122
spago.dhall
example/spago.dhall
+9
-1
Main.purs
example/src/Main.purs
+91
-19
packages-additions.dhall
packages-additions.dhall
+3
-3
No files found.
example/dist/index.html
View file @
2c68be1d
...
@@ -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 -->
...
...
example/index.html
View file @
2c68be1d
...
@@ -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 -->
...
...
example/index.js
View file @
2c68be1d
This source diff could not be displayed because it is too large. You can
view the blob
instead.
example/spago.dhall
View file @
2c68be1d
...
@@ -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" ]
...
...
example/src/Main.purs
View file @
2c68be1d
...
@@ -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
packages-additions.dhall
View file @
2c68be1d
{
--
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 =
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment