renaehodgkins

<div id="world_map_container"></div>

renaehodgkins

var c = paper.path("M10 10L90 90"); // 'M10 10' means move our path draw pen to potision 10,10, 'L90 90' means draw a line from current position to (90, 90), this coordinate is relative to (10, 10)

renaehodgkins

var paper = Raphael(10, 50, 320, 200); // this line of code will generate a canvas at position x: 10, y: 50 with width 320, height 200
var paper = Raphael(element, 200, 100); // this will create canvas inside the html element
var paper = Raphael('container', 200, 100); // suppose you have a html element with id 'container'

renaehodgkins

var rect = paper.rect(0, 0, 50, 50); // creat a rect with position and size, the coorrdinates are relative to the container
rect.attr({fill: '#333'}); // set the background color of the rect

renaehodgkins

var rect = paper.rect(0, 0, 50, 50).rect.attr({fill: '#333'});

renaehodgkins

var c = paper.path("M10 10L90 90"); // 'M10 10' means move our path draw pen to potision 10,10, 'L90 90' means draw a line from current position to (90, 90), this coordinate is relative to (10, 10)

renaehodgkins

paper = new Raphael(@el, 1000, 750) # init paper on the @el element which is passed from Backbone Views
paper.rect(0, 0, 1000, 750, 10).attr({stroke: 'none', fill: '#fff'}) # create canvas 
paper.text(20, 20, "Chrome Browser Percentage World").attr({'text-anchor': 'start', 'font-size': '20px'}) # add chart title
 
paper.setStart() # set point to start add element to a set which is a container that can include elements

_.each _.keys(@worldmap.shapes), (country_iso_code)=> # @worldmap.shapes is brought by world.js which contains paths of countries

  path = paper.path(@worldmap.shapes[country_iso_code]).attr({stroke: "#fff", fill: @colorOfCountry(country_iso_code), "stroke-opacity": 0.25}) # draw country path, fill the color based on the percentage value
  @bindHoverToCountry(paper, country_iso_code, path)

renaehodgkins

bindHoverToCountry: (paper, country_iso_code, path)->
  that = this
  path.hover(
(e)->
  # when mouse hover the country, we build fill the country path with highlight color and display a tooltip around the mouse position
  name = that.worldmap.names[country_iso_code]
  desc = "#{that.data[name]} %"
  this.tipSet = that.drawCountryTooltip(paper, e.offsetX, e.offsetY, name, desc)
  this.c = this.c || this.attr("fill")
  this.stop().animate({fill: "#C13A27"}, 500)

renaehodgkins

paper = new Raphael(@el, 1000, 750) # init paper on the @el element which is passed from Backbone Views
paper.rect(0, 0, 1000, 750, 10).attr({stroke: 'none', fill: '#fff'}) # create canvas 
paper.text(20, 20, "Chrome Browser Percentage World").attr({'text-anchor': 'start', 'font-size': '20px'}) # add chart title
 
paper.setStart() # set point to start add element to a set which is a container that can include elements

_.each _.keys(@worldmap.shapes), (country_iso_code)=> # @worldmap.shapes is brought by world.js which contains paths of countries

  path = paper.path(@worldmap.shapes[country_iso_code]).attr({stroke: "#fff", fill: @colorOfCountry(country_iso_code), "stroke-opacity": 0.25}) # draw country path, fill the color based on the percentage value
  @bindHoverToCountry(paper, country_iso_code, path)

renaehodgkins

    var c = paper.path("M10 10L90 90"); // 'M10 10' means move our path draw pen to potision 10,10, 'L90 90' means draw a line from current position to (90, 90), this coordinate is relative to (10, 10)