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

diff --git a/data/geo/maps/world-countries.json b/data/geo/maps/world-countries.json
index 788dbbd..2e69aa0 100755 (executable)
--- a/data/geo/maps/world-countries.json
+++ b/data/geo/maps/world-countries.json
@@ -54,7 +54,8 @@
 {"type":"Feature","properties":{"name":"Finland"},"geometry":{"type":"Polygon","coordinates":[[[28.59193,69.064777],[28.445944,68.364613],[29.977426,67.698297],[29.054589,66.944286],[30.21765,65.80598],[29.54443,64.948672],[30.444685,64.204453],[30.035872,63.552814],[31.516092,62.867687],[31.139991,62.357693],[30.211107,61.780028],[28.069998,60.503517],[26.255173,60.423961],[24.496624,60.057316],[22.869695,59.846373],[22.290764,60.391921],[21.322244,60.72017],[21.544866,61.705329],[21.059211,62.607393],[21.536029,63.189735],[22.442744,63.81781],[24.730512,64.902344],[25.398068,65.111427],[25.294043,65.534346],[23.903379,66.006927],[23.56588,66.396051],[23.539473,67.936009],[21.978535,68.616846],[20.645593,69.106247],[21.244936,69.370443],[22.356238,68.841741],[23.66205,68.891247],[24.735679,68.649557],[25.689213,69.092114],[26.179622,69.825299],[27.732292,70.164193],[29.015573,69.766491],[28.59193,69.064777]]]},"id":"FIN"},
 {"type":"Feature","properties":{"name":"Fiji"},"geometry":{"type":"MultiPolygon","coordinates":[[[[178.3736,-17.33992],[178.71806,-17.62846],[178.55271,-18.15059],[177.93266,-18.28799],[177.38146,-18.16432],[177.28504,-17.72465],[177.67087,-17.38114],[178.12557,-17.50481],[178.3736,-17.33992]]],[[[179.364143,-16.801354],[178.725059,-17.012042],[178.596839,-16.63915],[179.096609,-16.433984],[179.413509,-16.379054],[180,-16.067133],[180,-16.555217],[179.364143,-16.801354]]],[[[-179.917369,-16.501783],[-180,-16.555217],[-180,-16.067133],[-179.79332,-16.020882],[-179.917369,-16.501783]]]]},"id":"FJI"},
 {"type":"Feature","properties":{"name":"Falkland Islands"},"geometry":{"type":"Polygon","coordinates":[[[-61.2,-51.85],[-60,-51.25],[-59.15,-51.5],[-58.55,-51.1],[-57.75,-51.55],[-58.05,-51.9],[-59.4,-52.2],[-59.85,-51.85],[-60.7,-52.3],[-61.2,-51.85]]]},"id":"FLK"},
-{"type":"Feature","properties":{"name":"France"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-52.556425,2.504705],[-52.939657,2.124858],[-53.418465,2.053389],[-53.554839,2.334897],[-53.778521,2.376703],[-54.088063,2.105557],[-54.524754,2.311849],[-54.27123,2.738748],[-54.184284,3.194172],[-54.011504,3.62257],[-54.399542,4.212611],[-54.478633,4.896756],[-53.958045,5.756548],[-53.618453,5.646529],[-52.882141,5.409851],[-51.823343,4.565768],[-51.657797,4.156232],[-52.249338,3.241094],[-52.556425,2.504705]]],[[[9.560016,42.152492],[9.229752,41.380007],[8.775723,41.583612],[8.544213,42.256517],[8.746009,42.628122],[9.390001,43.009985],[9.560016,42.152492]]],[[[3.588184,50.378992],[4.286023,49.907497],[4.799222,49.985373],[5.674052,49.529484],[5.897759,49.442667],[6.18632,49.463803],[6.65823,49.201958],[8.099279,49.017784],[7.593676,48.333019],[7.466759,47.620582],[7.192202,47.449766],[6.736571,47.541801],[6.768714,47.287708],[6.037389,46.725779],[6.022609,46.27299],[6.5001,46.429673],[6.843593,45.991147],[6.802355,45.70858],[7.096652,45.333099],[6.749955,45.028518],[7.007562,44.254767],[7.549596,44.127901],[7.435185,43.693845],[6.529245,43.128892],[4.556963,43.399651],[3.100411,43.075201],[2.985999,42.473015],[1.826793,42.343385],[0.701591,42.795734],[0.338047,42.579546],[-1.502771,43.034014],[-1.901351,43.422802],[-1.384225,44.02261],[-1.193798,46.014918],[-2.225724,47.064363],[-2.963276,47.570327],[-4.491555,47.954954],[-4.59235,48.68416],[-3.295814,48.901692],[-1.616511,48.644421],[-1.933494,49.776342],[-0.989469,49.347376],[1.338761,50.127173],[1.639001,50.946606],[2.513573,51.148506],[2.658422,50.796848],[3.123252,50.780363],[3.588184,50.378992]]]]},"id":"FRA"},
+{"type":"Feature","properties":{"name":"French Guiana"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-52.556425,2.504705],[-52.939657,2.124858],[-53.418465,2.053389],[-53.554839,2.334897],[-53.778521,2.376703],[-54.088063,2.105557],[-54.524754,2.311849],[-54.27123,2.738748],[-54.184284,3.194172],[-54.011504,3.62257],[-54.399542,4.212611],[-54.478633,4.896756],[-53.958045,5.756548],[-53.618453,5.646529],[-52.882141,5.409851],[-51.823343,4.565768],[-51.657797,4.156232],[-52.249338,3.241094],[-52.556425,2.504705]]]]},"id":"FGA"},
+{"type":"Feature","properties":{"name":"France"},"geometry":{"type":"MultiPolygon","coordinates":[[[[9.560016,42.152492],[9.229752,41.380007],[8.775723,41.583612],[8.544213,42.256517],[8.746009,42.628122],[9.390001,43.009985],[9.560016,42.152492]]],[[[3.588184,50.378992],[4.286023,49.907497],[4.799222,49.985373],[5.674052,49.529484],[5.897759,49.442667],[6.18632,49.463803],[6.65823,49.201958],[8.099279,49.017784],[7.593676,48.333019],[7.466759,47.620582],[7.192202,47.449766],[6.736571,47.541801],[6.768714,47.287708],[6.037389,46.725779],[6.022609,46.27299],[6.5001,46.429673],[6.843593,45.991147],[6.802355,45.70858],[7.096652,45.333099],[6.749955,45.028518],[7.007562,44.254767],[7.549596,44.127901],[7.435185,43.693845],[6.529245,43.128892],[4.556963,43.399651],[3.100411,43.075201],[2.985999,42.473015],[1.826793,42.343385],[0.701591,42.795734],[0.338047,42.579546],[-1.502771,43.034014],[-1.901351,43.422802],[-1.384225,44.02261],[-1.193798,46.014918],[-2.225724,47.064363],[-2.963276,47.570327],[-4.491555,47.954954],[-4.59235,48.68416],[-3.295814,48.901692],[-1.616511,48.644421],[-1.933494,49.776342],[-0.989469,49.347376],[1.338761,50.127173],[1.639001,50.946606],[2.513573,51.148506],[2.658422,50.796848],[3.123252,50.780363],[3.588184,50.378992]]]]},"id":"FRA"},
 {"type":"Feature","properties":{"name":"Gabon"},"geometry":{"type":"Polygon","coordinates":[[[11.093773,-3.978827],[10.066135,-2.969483],[9.405245,-2.144313],[8.797996,-1.111301],[8.830087,-0.779074],[9.04842,-0.459351],[9.291351,0.268666],[9.492889,1.01012],[9.830284,1.067894],[11.285079,1.057662],[11.276449,2.261051],[11.751665,2.326758],[12.35938,2.192812],[12.951334,2.321616],[13.075822,2.267097],[13.003114,1.830896],[13.282631,1.314184],[14.026669,1.395677],[14.276266,1.19693],[13.843321,0.038758],[14.316418,-0.552627],[14.425456,-1.333407],[14.29921,-1.998276],[13.992407,-2.470805],[13.109619,-2.42874],[12.575284,-1.948511],[12.495703,-2.391688],[11.820964,-2.514161],[11.478039,-2.765619],[11.855122,-3.426871],[11.093773,-3.978827]]]},"id":"GAB"},
 {"type":"Feature","properties":{"name":"United Kingdom"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-5.661949,54.554603],[-6.197885,53.867565],[-6.95373,54.073702],[-7.572168,54.059956],[-7.366031,54.595841],[-7.572168,55.131622],[-6.733847,55.17286],[-5.661949,54.554603]]],[[[-3.005005,58.635],[-4.073828,57.553025],[-3.055002,57.690019],[-1.959281,57.6848],[-2.219988,56.870017],[-3.119003,55.973793],[-2.085009,55.909998],[-2.005676,55.804903],[-1.114991,54.624986],[-0.430485,54.464376],[0.184981,53.325014],[0.469977,52.929999],[1.681531,52.73952],[1.559988,52.099998],[1.050562,51.806761],[1.449865,51.289428],[0.550334,50.765739],[-0.787517,50.774989],[-2.489998,50.500019],[-2.956274,50.69688],[-3.617448,50.228356],[-4.542508,50.341837],[-5.245023,49.96],[-5.776567,50.159678],[-4.30999,51.210001],[-3.414851,51.426009],[-3.422719,51.426848],[-4.984367,51.593466],[-5.267296,51.9914],[-4.222347,52.301356],[-4.770013,52.840005],[-4.579999,53.495004],[-3.093831,53.404547],[-3.09208,53.404441],[-2.945009,53.985],[-3.614701,54.600937],[-3.630005,54.615013],[-4.844169,54.790971],[-5.082527,55.061601],[-4.719112,55.508473],[-5.047981,55.783986],[-5.586398,55.311146],[-5.644999,56.275015],[-6.149981,56.78501],[-5.786825,57.818848],[-5.009999,58.630013],[-4.211495,58.550845],[-3.005005,58.635]]]]},"id":"GBR"},
 {"type":"Feature","properties":{"name":"Georgia"},"geometry":{"type":"Polygon","coordinates":[[[41.554084,41.535656],[41.703171,41.962943],[41.45347,42.645123],[40.875469,43.013628],[40.321394,43.128634],[39.955009,43.434998],[40.076965,43.553104],[40.922185,43.382159],[42.394395,43.220308],[43.756017,42.740828],[43.9312,42.554974],[44.537623,42.711993],[45.470279,42.502781],[45.77641,42.092444],[46.404951,41.860675],[46.145432,41.722802],[46.637908,41.181673],[46.501637,41.064445],[45.962601,41.123873],[45.217426,41.411452],[44.97248,41.248129],[43.582746,41.092143],[42.619549,41.583173],[41.554084,41.535656]]]},"id":"GEO"},

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