# Seq = require 'seq'
+# d3 = require 'd3'
ColorBrewer = require 'colorbrewer'
-root = this
-# root.data = null
+# Loaded below
+data = map = feature = infobox = null
width = 960
height = 500
-
+# chloropleth coloring
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']
+ if data[d.properties.name]?
+ return fill data[d.properties.name]['editors']
else
# console.log 'Country '+d.properties.name+' not in data'
return fill "rgb(0,0,0)"
.scale d3.event.scale
feature.attr "d", path
-## zooming/panning
+### zooming/panning
projection = d3.geo.mercator()
.scale width
.scaleExtent [height,height*8]
.on "zoom", move
-
-# main svg object
-
-# 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
-map.append "rect"
- .attr "class", "frame"
- .attr "width", width
- .attr "height", height
-
-
-# infobox
-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'])
+# Configure Spin.js Options
+spinner = (overrides={}) ->
+ opts = {
+ lines : 11 # [12] The number of lines to draw
+ length : 4 # [7] The length of each line
+ width : 1 # [5] The line thickness
+ radius : 18 # [10] The radius of the inner circle
+ rotate : -10.5 # [0] rotation offset
+ trail : 50 # [100] Afterglow percentage
+ opacity : 1/4 # [1/4] Opacity of the lines
+ shadow : false # [false] Whether to render a shadow
+ speed : 1 # [1] Spins per second
+ zIndex : 2e9 # [2e9] zIndex; uses a very high z-index by default
+ color : '#333' # ['#000'] Line color; '#rgb' or '#rrggbb'.
+ top : 'auto' # ['auto'] Top position relative to parent in px; 'auto' = center vertically.
+ left : 'auto' # ['auto'] Left position relative to parent in px; 'auto' = center horizontally.
+ className : 'spinner' # ['spinner'] CSS class to assign to the element
+ fps : 20 # [20] Frames per second when falling back to `setTimeout()`.
+ hwaccel : Modernizr.csstransforms3d # [false] Whether to use hardware acceleration.
+ } import overrides
+ jQuery '.geo-spinner' .show().spin opts
+
+spinner()
+
+# on DOM ready
+main = ->
+ ### main svg object
- 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)+"%)"
+ map := d3.select '#worldmap'
+ .append "svg:svg"
+ .attr "width", width
+ .attr "height", height
+ .append "svg:g"
+ .attr "transform", "translate(0,0)"
+ .call zoom
- xy = d3.svg.mouse this
- infobox.style "left", xy[0]+'px'
- infobox.style "top", xy[1]+'px'
- infobox.style "display", "block"
-
-
-worldmap = ->
- 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 "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) ->
- infobox.style "display", "none"
-
-
-
-jQuery.ajax do
- url : "/data/geo/data/en_geo_editors.json"
- dataType : 'json'
- success : (res) ->
- # result will be the returned JSON
-
- root.data = res
+ # path objects
+ feature := map.selectAll ".feature"
+
+ # rectangle
+ map.append "svg:rect"
+ .attr "class", "frame"
+ .attr "width", width
+ .attr "height", height
+
+
+ ### infobox
+ infobox := d3.select '#infobox'
+
+ infobox.select '#ball'
+ .append "svg:svg"
+ .attr "width", "100%"
+ .attr "height", "20px"
+ .append "svg:rect"
+ .attr "width", "60%"
+ .attr "height", "20px"
+ .attr "fill", '#f40500'
+
+ setInfoBox = (d) ->
+ name = d.properties.name
+ ae = 0
+ e5 = 0
+ e100 = 0
- # load the world map
- worldmap()
+ if data[name]?
+ ae = parseInt data[name].editors
+ e5 = parseInt data[name].editors5
+ e100 = parseInt data[name].editors100
- # adding bootstrap tooltips
- # $ '.page-header' .tooltip title:"for the header it works but is useless"
- # $ '.feature' .tooltip title:"here it doesn't work"
+ infobox.select '#country' .text name
+ 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)+"%)"
- console.log 'Loaded geo coding map!'
+ xy = d3.svg.mouse this
+ infobox.style "left", xy[0]+'px'
+ infobox.style "top", xy[1]+'px'
+ infobox.style "display", "block"
- error : (err) -> console.error err
-
+ worldmap = ->
+ d3.json do
+ "/data/geo/maps/world-countries.json"
+ (json) ->
+ feature := feature
+ .data json.features
+ .enter().append "svg:path"
+ .attr "class", "feature"
+ .attr "d", path
+ .attr "fill", quantize
+ .attr "id", (d) -> d.properties.name
+ .on "mouseover",setInfoBox
+ # .on do
+ # "mouseover"
+ # (d) ->
+ # if data[d.properties.name]?
+
+ # p.text d.properties.name+" - All:"+data[d.properties.name]['editors']+' 5+:'+data[d.properties.name]['editors5']+' 100+:'+data[d.properties.name]['editors100']
+ # # console.log 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 "mouseout", -> infobox.style "display", "none"
+
+
+ jQuery.ajax do
+ url : "/data/geo/data/en_geo_editors.json"
+ dataType : 'json'
+ success : (res) ->
+ # result will be the returned JSON
+ data := res
+
+ # delete & hide spinner
+ jQuery '.geo-spinner' .spin(false).hide()
+
+ # 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
+
+# jQuery main
+
+
projects / kraken-ui.git / commitdiff