Merge branch 'compat'

README.md

@@ -11,33 +11,32 @@ basis for the library, as well as an alternative renderer for Elm.
 
 First make sure that you have [node.js][node] installed, as well as the
 [Elm][elm] compiler. Once you've installed those dependencies, clone the elm-d3
-repository and run the following commands from the root directory:
+repository and run the following command from the root directory:
 
-    npm install smash
-    make
+    elm-make
 
-This will locally install the [smash][] utility and build three files in the
-root directory of the elm-d3 repository. They'll come in handy later.
+This will locally install the [smash][] utility and build the library.
 
 [node]: http://nodejs.org/
 [elm]: https://github.com/evancz/elm
 [smash]: https://github.com/mbostock/smash
 
-* `elm-d3.library.js`: contains all compiled code;
-* `elm-d3.runtime.js`: contains supporting, non-compiled JavaScript code;
-  and
-* `elm-d3.js`: the previous two files, concatenated.
-
 To get an example compiled and running in your browser, use the following
-commands:
+command:
+
+    elm-make examples/Circles.elm --output circles.html
+
+You must then edit the HTML file and add a `<script>` tag that will load the
+D3.js library. (Unfortunately, it is no longer possible to control linking of
+external JavaScript code using the Elm compiler, so this manual step is
+necessary.) Then, load it up on your browser:
 
-    elm --make --src-dir=src `./scripts/build-flags` examples/Circles.elm
-    open build/examples/Circles.html
+    open build/examples/circles.html
 
 If you're not using OS X, the last command won't work. In that case open
-`build/examples/Circles.html` however you normally would in your operating
-system. Once the page is open, move your mouse left and right to add and remove
-circles, and move your mouse up and down to change their brightness.
+`circles.html` however you normally would in your operating system. Once the
+page is open, move your mouse left and right to add and remove circles, and
+move your mouse up and down to change their brightness.
 
 ## Conceptual Prerequisites
 

elm-package.json

@@ -0,0 +1,15 @@
+{
+    "version": "0.1.0",
+    "summary": "elm bindings for D3.js",
+    "repository": "https://github.com/seliopou/elm-d3.git",
+    "license": "BSD3",
+    "source-directories": [
+        "src"
+    ],
+    "exposed-modules": ["D3", "D3.Event"],
+    "native-modules": true,
+    "dependencies": {
+        "elm-lang/core": "2.1.0 <= v < 3.0.0"
+    },
+    "elm-version": "0.15.1 <= v < 0.16.0"
+}

examples/Boxes.elm

@@ -1,15 +1,16 @@
 module Boxes where
 
-import D3(..)
+import D3 exposing (..)
+import Graphics.Element exposing (Element)
 import Mouse
 
 size   = 300
 margin = { top = 10, left = 10, right = 10, bottom = 10 }
 dims   = { height = size - margin.top - margin.bottom
          , width  = size - margin.left - margin.right }
 
-type Dimensions = { height : Float, width : Float }
-type Margins = { top : Float, left : Float, right : Float, bottom : Float }
+type alias Dimensions = { height : Float, width : Float }
+type alias Margins = { top : Float, left : Float, right : Float, bottom : Float }
 
 svg : Dimensions -> Margins -> D3 a a
 svg ds ms =
@@ -29,17 +30,17 @@ boxes =
         |. num attr "height" 100
         |. fun attr "fill"   (\(_, _, c) _ -> c)
      |- update
-        |. fun attr "x" (\(x, _, _) _ -> show x)
-        |. fun attr "y" (\(_, y, _) _ -> show y)
+        |. fun attr "x" (\(x, _, _) _ -> toString x)
+        |. fun attr "y" (\(_, y, _) _ -> toString y)
      |- exit
         |. remove
 
 translate : number -> number -> String
-translate x y = "translate(" ++ (show x) ++ "," ++ (show y) ++ ")"
+translate x y = "translate(" ++ (toString x) ++ "," ++ (toString y) ++ ")"
 
 vis dims margin =
   svg dims margin
   |. boxes
 
 main : Signal Element
-main = render dims.height dims.width (vis dims margin) <~ Mouse.position
+main = Signal.map (render dims.height dims.width (vis dims margin)) Mouse.position

examples/Circles.elm

@@ -1,16 +1,18 @@
 module Circles where
 
-import D3(..)
-import D3.Color 
+import Graphics.Element exposing (Element)
 import Mouse
 
+import D3 exposing (..)
+import D3.Color
+
 size   = 375
 margin = { top = 25, left = 25, right = 25, bottom = 25 }
 dims   = { height = size - margin.top - margin.bottom
          , width  = size - margin.left - margin.right }
 
-type Dimensions = { height : Int, width : Int }
-type Margins = { top : Int, left : Int, right : Int, bottom : Int }
+type alias Dimensions = { height : Int, width : Int }
+type alias Margins = { top : Int, left : Int, right : Int, bottom : Int }
 
 svg : Dimensions -> Margins -> D3 a a
 svg ds ms =
@@ -25,12 +27,12 @@ svg ds ms =
 circles : D3 (number, number) number
 circles =
   selectAll "circle"
-  |= (\(x, y) -> repeat (x // 50) y)
+  |= (\(x, y) -> List.repeat (x // 50) y)
      |- enter <.> append "circle"
         |. fun attr "fill" color
         |. num attr "r"    0
         |. num attr "cy"   150
-        |. fun attr "cx"   (\_ i -> show (25 + 50 * i))
+        |. fun attr "cx"   (\_ i -> toString (25 + 50 * i))
         |. transition
            |. num attr "r" 25
      |- update
@@ -45,11 +47,11 @@ color y i =
     in D3.Color.toString (D3.Color.darker magnitude steelBlue)
 
 translate : number -> number -> String
-translate x y = "translate(" ++ (show x) ++ "," ++ (show y) ++ ")"
+translate x y = "translate(" ++ (toString x) ++ "," ++ (toString y) ++ ")"
 
 vis dims margin =
   svg dims margin
   |. circles
 
 main : Signal Element
-main = render dims.width dims.height (vis dims margin) <~ Mouse.position
+main = Signal.map (render dims.width dims.height (vis dims margin)) Mouse.position

examples/Clicks.elm

@@ -1,16 +1,17 @@
 module Clicks where
 
 import String
+import Graphics.Element exposing (Element)
 
-import D3(..)
+import D3 exposing (..)
 import D3.Event
 
-data Pos
+type Pos
   = Left
   | Middle
   | Right
 
-type Model = { left : Int, middle : Int, right : Int }
+type alias Model = { left : Int, middle : Int, right : Int }
 
 events : D3.Event.Stream Pos
 events = D3.Event.stream ()
@@ -23,7 +24,7 @@ view =
         |. str attr "class" "box"
         |. D3.Event.click events (\e (p, _) _ -> p)
      |- update
-        |. text (\(_, n) _ -> show n)
+        |. text (\(_, n) _ -> toString n)
      |- exit
         |. remove
 
@@ -41,4 +42,4 @@ controller =
   D3.Event.folde transform initial events
 
 main : Signal Element
-main = render 900 200 view <~ controller
+main = Signal.map (render 900 200 view) controller

examples/Counters.elm

@@ -5,25 +5,31 @@
 -- To build this app, from the root directory of the elm-d3 project, compile it
 -- using the following commands:
 --
---   make
---   elm --make --src-dir=src `./scripts/build-flags` `./scripts/include-css examples/counters.css` examples/Counters.elm
+--   elm-make examples/Counters.elm --output counters.html
 --
--- On OS X, you can then open the file in the browser using the following command:
+-- On OS X, you can then open the file in the browser using the following
+-- command:
 --
 --   open build/examples/Counters.html
 --
+-- Note that due to recent changes in the Elm compiler, it is no longer
+-- possible to linking of external JavaScript code while building projects. So,
+-- you will have to manually link D3.js into this HTML file, as well as the
+-- counters.css stylesheet, which you can find in the examples/ directory.
+--
 module Counters where
 
 import Dict
+import Graphics.Element exposing (Element)
 import List
 
-import D3(..)
-import D3.Event(..)
+import D3 exposing (..)
+import D3.Event exposing (..)
 
 -------------------------------------------------------------------------------
 -- The Model
 
-type Model = {
+type alias Model = {
   dict : Dict.Dict Int Int,
   next : Int
 }
@@ -48,7 +54,7 @@ decrement i d =
 -------------------------------------------------------------------------------
 -- The Events
 
-data Event
+type Event
   = Create
   | Increment Int
   | Decrement Int
@@ -90,7 +96,7 @@ counters =
         |- (append "div" <.> str attr "class" "box remove"
            |. html (\_ _ -> "&#10007;")))
      |- update <.> select "div.display"
-        |. text (\(_, d) _ -> show d)
+        |. text (\(_, d) _ -> toString d)
      |- update <.> select "div.increment"
         |. click events (\_ (n, _) _ -> Increment n)
      |- update <.> select "div.decrement"
@@ -119,4 +125,4 @@ controller =
   folde handler initialModel
 
 main : Signal Element
-main = render 800 600 view <~ (controller events)
+main = Signal.map (render 800 600 view) (controller events)