Updated world map info to match geolocation country names. Played around trying to...

diff --git a/lib/main-geo.co b/lib/main-geo.co
index e0d054c..d7c10c8 100644 (file)
--- a/lib/main-geo.co
+++ b/lib/main-geo.co
@@ -46,30 +46,68 @@ zoom = d3.behavior.zoom()
 
 # main svg object
 
-svg = d3.select ".inner"
-    .append "svg"
-        .attr "width", width
-        .attr "height", height
+# svg = d3.select '#worldmap'
+#     .append "svg"
+#         .attr "width", width
+#         .attr "height", height
+#     .append "g"
+#         .attr "transform", "translate(0,0)"
+#         .call zoom
+
+map = d3.select '#worldmap'
+    .attr "width", width
+    .attr "height", height
     .append "g"
         .attr "transform", "translate(0,0)"
         .call zoom
 
+
+
+# path objects
+feature = map.selectAll ".feature"
+
 # rectangle
-svg.append "rect"
+map.append "rect"
     .attr "class", "frame"
     .attr "width", width
     .attr "height", height
 
+
 # infobox
-infobox = d3.select ".inner"
-    .append "div"
-        .attr "id","infobox"
-        .style "display","none"    
-p = infobox.append "p"
-    .text "FABZ"
+infobox =   d3.select '#infobox'
+                .style "display","none"
+
+infobox.select '#ball'                     
+    .append "svg"
+        .attr "width", "100%"
+        .attr "height", "20px"
+        .append "rect"
+            .attr "width", "60%"
+            .attr "height", "20px"
+            .attr "fill", '#f40500'
+           
+
+setInfoBox = (d) ->
+    c = d.properties.name
+    ae = 0
+    e5 = 0
+    e100 = 0   
+    if root.data[d.properties.name]?
+        ae = parseInt(root.data[d.properties.name]['editors'])
+        e5 = parseInt(root.data[d.properties.name]['editors5'])
+        e100 = parseInt(root.data[d.properties.name]['editors100'])
+
+
+    infobox.select '#country' .text c
+    infobox.select '#ae' .text ae
+    infobox.select '#e5' .text e5+" ("+(100.0*e5/ae).toPrecision(3)+"%)"
+    infobox.select '#e100' .text e100+" ("+(100.0*e100/ae).toPrecision(3)+"%)"
+
+    xy = d3.svg.mouse this
+    infobox.style "left", xy[0]+'px'
+    infobox.style "top", xy[1]+'px'
+    infobox.style "display", "block"
 
-# path objects
-feature = svg.selectAll ".feature"
 
 worldmap = -> 
     d3.json do
@@ -80,25 +118,28 @@ worldmap = ->
                 .enter().append "path"
                     .attr "class", "feature"
                     .attr "d", path    
-                    .attr "fill", quantize           
-                    # .attr do
-                    #     "fill" 
-                    #     (d) ->                         
-                    #         fill "rgb(0,0,0)"
-                    .on do 
-                        "mouseover" 
-                        (d) ->                             
-                            if root.data[d.properties.name]?
-                                p.text d.properties.name+" - All:"+root.data[d.properties.name]['editors']+' 5+:'+root.data[d.properties.name]['editors5']+' 100+:'+root.data[d.properties.name]['editors100']                         
-                                # console.log root.data[d.properties.name]['editors']
-                            else 
-                                p.text d.properties.name+": No edits" 
-                                # console.log 'Country '+d.properties.name+' not in data'
-                            # xy = path.centroid d
-                            xy = d3.svg.mouse this
-                            infobox.style "left", xy[0]+'px'
-                            infobox.style "top", xy[1]+'px'
-                            infobox.style "display", "block"
+                    .attr "fill", quantize                        
+                    .attr do
+                        "id" 
+                        (d) ->                         
+                            d.properties.name  
+                    .on "mouseover",setInfoBox                         
+                    # .on do 
+                    #     "mouseover" 
+                    #     (d) ->                          
+                    #         if root.data[d.properties.name]?
+
+                    #             p.text d.properties.name+" - All:"+root.data[d.properties.name]['editors']+' 5+:'+root.data[d.properties.name]['editors5']+' 100+:'+root.data[d.properties.name]['editors100']                         
+                    #             # console.log root.data[d.properties.name]['editors']
+                    #         else 
+                    #             p.text d.properties.name+": No edits" 
+                    #             # console.log 'Country '+d.properties.name+' not in data'
+
+                    #         # xy = path.centroid d
+                    #         xy = d3.svg.mouse this
+                    #         infobox.style "left", xy[0]+'px'
+                    #         infobox.style "top", xy[1]+'px'
+                    #         infobox.style "display", "block"
                     .on do
                         "mouseout" 
                         (d) ->
@@ -117,6 +158,10 @@ jQuery.ajax do
         # load the world map
         worldmap()
 
+        # adding bootstrap tooltips
+        # $ '.page-header' .tooltip title:"for the header it works but is useless"
+        # $ '.feature' .tooltip title:"here it doesn't work"
+
         console.log 'Loaded geo coding map!'
 
     error : (err) -> console.error err

diff --git a/www/css/geo-display.styl b/www/css/geo-display.styl
index 2ab1f8d..a5f226e 100644 (file)
--- a/www/css/geo-display.styl
+++ b/www/css/geo-display.styl
@@ -16,7 +16,8 @@ svg
 
 #infobox
        position absolute
+       pointer-events  none
        // width 180px
-       padding 5px
-       border-radius 5px;
-       background-color rgba(200,200,200,.85)
+       // padding 5px
+       // border-radius 5px;
+       // background-color rgba(200,200,200,.85)

diff --git a/www/geo.jade b/www/geo.jade
index c5c5787..cd28bd8 100644 (file)
--- a/www/geo.jade
+++ b/www/geo.jade
@@ -3,10 +3,26 @@ extends layout
 block content 
     .page-header
         h1 Wikimedia Geolocation Map 
-            small February 2012
-    
+            small English Wikipedia - February 2012
     
+    svg#worldmap        
+
+    .well#infobox
+        .row
+            .span4
+                h3#country
+        .row 
+            .span2 All editors                    
+            .span2#ae
+        .row 
+            .span2 5+ editors
+            .span2#e5
+        .row 
+            .span2 100+ editors
+            .span2#e100
 
+    .page-footer.pull-right
+        h6 Zoom/Pan using mouse.
 
 block title
     title Geolocation