From 44dede5f4d65f152f5e1346ff2374c5cc7236e73 Mon Sep 17 00:00:00 2001 From: declerambaul Date: Thu, 26 Apr 2012 10:29:14 -0400 Subject: [PATCH] Updated world map info to match geolocation country names. Played around trying to combine bootstrap/d3. --- data/geo/maps/world-countries.json | 3 +- lib/main-geo.co | 109 +++++++++++++++++++++++++----------- www/css/geo-display.styl | 7 +- www/geo.jade | 20 ++++++- 4 files changed, 101 insertions(+), 38 deletions(-) diff --git a/data/geo/maps/world-countries.json b/data/geo/maps/world-countries.json index 788dbbd..2e69aa0 100755 --- 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 --- 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 --- 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 --- 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 -- 1.7.0.4