From fe1c8afebfdd334a42f8de1e1ece3a4a1e7d4fd5 Mon Sep 17 00:00:00 2001
From: declerambaul <fabian.kaelin@gmail.com>
Date: Tue, 24 Apr 2012 12:58:53 -0400
Subject: [PATCH] New version of d3 (2.8.1) to vendor libraries. Added d3 to modules.yaml. Implemented simple geolocation map for enwp, data is stored in /data/geo.

---
 lib/main-geo.co          |  143 +++++++++++++++++++++++++++++++---------------
 lib/server/server.co     |    2 +-
 www/css/geo-display.styl |   17 ++++-
 www/geo.jade             |   10 +++
 4 files changed, 120 insertions(+), 52 deletions(-)

diff --git a/lib/main-geo.co b/lib/main-geo.co
index 32cabf4..86ba0d5 100644
--- a/lib/main-geo.co
+++ b/lib/main-geo.co
@@ -1,52 +1,101 @@
-Seq      = require 'seq'
-Backbone = require 'backbone'
+# Seq      = require 'seq'
+ColorBrewer = require 'colorbrewer'
 
-{ _, op,
-} = require 'kraken/util'
-{ BaseView, BaseModel, BaseList,
-} = require 'kraken/base'
-{ ChartType, DygraphsChartType,
-} = require 'kraken/chart'
-{ Graph, GraphList, GraphDisplayView,
-} = require 'kraken/graph'
-{ DashboardView,
-} = require 'kraken/dashboard'
+root = this
 
+root.data = null
 
+width = 960
+height = 500
 
-root = this
-CHART_OPTIONS_SPEC    = []
-CHART_DEFAULT_OPTIONS = {}
-
-
-# Create the Graph Scaffold
-main = ->
-    # Set up Dygraph chart type spec
-    # TODO: load this on-demand
-    dyglib = new DygraphsChartType CHART_OPTIONS_SPEC
-    
-    # _.dump _.clone(data.options), 'data.options'
-    
-    # Instantiate model & view
-    dashboard = root.dashboard = new DashboardView do
-        graph_spec : root.CHART_OPTIONS_SPEC # FIXME: necessary?
-    
-    $ '#content .inner' .append dashboard.el
-
-
-
-# Load data files
-Seq([   <[ CHART_OPTIONS_SPEC /schema/dygraph.json ]>
-])
-.parEach_ (next, [key, url]) ->
-    jQuery.ajax do
-        url : url,
-        dataType : 'json'
-        success : (res) ->
-            root[key] = res
-            next.ok()
-        error : (err) -> console.error err
-.seq ->
-    console.log 'All data loaded!'
-    jQuery main
 
+fill = d3.scale.log()
+    .domain [1, 10000]
+    .range ["black", "red"]
+
+quantize = (d) -> 
+    # console.log d.properties.name
+    if root.data[d.properties.name]?    
+        return fill root.data[d.properties.name]['editors']
+    else 
+        console.log 'Country '+d.properties.name+' not in data'
+        return fill "rgb(0,0,0)"
+
+
+move = -> 
+    # console.log d3.event
+    projection
+        .translate d3.event.translate 
+        .scale d3.event.scale              
+    feature.attr "d" path
+
+
+
+projection = d3.geo.mercator()
+    .scale width
+    .translate [width/2,height/2]
+
+path = d3.geo.path()
+    .projection projection
+
+zoom = d3.behavior.zoom()
+    .translate projection.translate()
+    .scale projection.scale()
+    .scaleExtent [height,height*8]
+    .on "zoom" move
+
+svg = d3.select ".inner"
+    .append "svg"
+        .attr "width" width
+        .attr "height" height
+    .append "g"
+        .attr "transform" "translate(0,0)"
+        .call zoom
+
+g = svg.append "g"
+
+feature = g.selectAll ".feature"
+
+svg.append "rect"
+    .attr "class" "frame"
+    .attr "width" width
+    .attr "height" height
+
+
+
+d3.json do
+    "/data/geo/maps/world-countries.json"
+    (json) -> 
+        root.feature = feature
+            .data json.features
+            .enter().append "path"
+                .attr "class" "feature"
+                .attr "d" path                
+                .attr do
+                    "fill" 
+                    (d) -> 
+                        # console.log path.area d
+                        fill "rgb(0,0,0)"
+                .on do 
+                    "mouseover" 
+                    (d) -> 
+                        console.log 'mouseover!'
+                        if root.data[d.properties.name]?    
+                            console.log root.data[d.properties.name]['editors']
+                        else 
+                            console.log 'Country '+d.properties.name+' not in data'
+                            
+
+
+
+d3.json do
+    "/data/geo/data/en_geo_editors.json"
+    (json) ->
+        root.data = json
+        console.log root.data   
+        console.log root.feature
+        root.feature.attr "fill" quantize
+        
+
+        
+console.log 'Loaded geo coding map!'
diff --git a/lib/server/server.co b/lib/server/server.co
index aafe519..0d25d21 100755
--- a/lib/server/server.co
+++ b/lib/server/server.co
@@ -15,7 +15,7 @@ Seq      = require 'seq'
 yaml     = require 'js-yaml'
 mime     = require 'mime'
 express  = require 'express'
-Resource = require 'express-resource'
+# Resource = require 'express-resource'
 compiler = require 'connect-compiler-extras'
 
 op       = require '../util/op'
diff --git a/www/css/geo-display.styl b/www/css/geo-display.styl
index e1d53af..063b840 100644
--- a/www/css/geo-display.styl
+++ b/www/css/geo-display.styl
@@ -1,8 +1,17 @@
 @import 'colors'
 @import 'nib'
 
-section.map
-    position relative
-    max-width 900px
-    margin 0 auto
+svg 
+  background  #eee
+  max-width 900px
+  margin 0 auto
+
+.frame
+	stroke #000
+	fill none
+	pointer-events  all
+
+.feature
+	stroke #ccc
+
     
diff --git a/www/geo.jade b/www/geo.jade
index b16ddac..579c8cc 100644
--- a/www/geo.jade
+++ b/www/geo.jade
@@ -1,5 +1,15 @@
 extends layout
 
+section#graph-list
+
+block content 
+    .page-header
+        h1 Wikimedia Geolocation Map 
+            small February 2012
+    
+    
+
+
 block title
     title Geolocation
 
-- 
1.7.0.4