How to use dataMap method in wpt

Best JavaScript code snippet using wpt

datamaps.iot.js

Source:datamaps.iot.js

1(function() {2  var svg;3  //save off default references4  var d3 = window.d3, topojson = window.topojson;5  var defaultOptions = {6    scope: 'world',7    responsive: false,8    aspectRatio: 0.5625,9    setProjection: setProjection,10    projection: 'equirectangular',11    dataType: 'json',12    data: {},13    done: function() {},14    fills: {15      defaultFill: '#ABDDA4'16    },17    filters: {},18    geographyConfig: {19        dataUrl: null,20        hideAntarctica: true,21        hideHawaiiAndAlaska : false,22        borderWidth: 1,23        borderColor: '#FDFDFD',24        popupTemplate: function(geography, data) {25          return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong></div>';26        },27        popupOnHover: true,28        highlightOnHover: true,29        highlightFillColor: '#FC8D59',30        highlightBorderColor: 'rgba(250, 15, 160, 0.2)',31        highlightBorderWidth: 232    },33    projectionConfig: {34      rotation: [97, 0]35    },36    bubblesConfig: {37        borderWidth: 2,38        borderColor: '#FFFFFF',39        popupOnHover: true,40        radius: null,41        popupTemplate: function(geography, data) {42          return '<div class="hoverinfo"><strong>' + data.name + '</strong></div>';43        },44        fillOpacity: 0.75,45        animate: true,46        highlightOnHover: true,47        highlightFillColor: '#FC8D59',48        highlightBorderColor: 'rgba(250, 15, 160, 0.2)',49        highlightBorderWidth: 2,50        highlightFillOpacity: 0.85,51        exitDelay: 100,52        key: JSON.stringify53    },54    arcConfig: {55      strokeColor: '#DD1C77',56      strokeWidth: 1,57      arcSharpness: 1,58      animationSpeed: 60059    }60  };61  /*62    Getter for value. If not declared on datumValue, look up the chain into optionsValue63  */64  function val( datumValue, optionsValue, context ) {65    if ( typeof context === 'undefined' ) {66      context = optionsValue;67      optionsValues = undefined;68    }69    var value = typeof datumValue !== 'undefined' ? datumValue : optionsValue;70    if (typeof value === 'undefined') {71      return  null;72    }73    if ( typeof value === 'function' ) {74      var fnContext = [context];75      if ( context.geography ) {76        fnContext = [context.geography, context.data];77      }78      return value.apply(null, fnContext);79    }80    else {81      return value;82    }83  }84  function addContainer( element, height, width ) {85    this.svg = d3.select( element ).append('svg')86      .attr('width', width || element.offsetWidth)87      .attr('data-width', width || element.offsetWidth)88      .attr('class', 'datamap')89      .attr('height', height || element.offsetHeight)90      .style('overflow', 'hidden'); // IE10+ doesn't respect height/width when map is zoomed in91    if (this.options.responsive) {92      d3.select(this.options.element).style({'position': 'relative', 'padding-bottom': (this.options.aspectRatio*100) + '%'});93      d3.select(this.options.element).select('svg').style({'position': 'absolute', 'width': '100%', 'height': '100%'});94      d3.select(this.options.element).select('svg').select('g').selectAll('path').style('vector-effect', 'non-scaling-stroke');95    }96    return this.svg;97  }98  // setProjection takes the svg element and options99  function setProjection( element, options ) {100    var width = options.width || element.offsetWidth;101    var height = options.height || element.offsetHeight;102    var projection, path;103    var svg = this.svg;104    if ( options && typeof options.scope === 'undefined') {105      options.scope = 'world';106    }107    if ( options.scope === 'usa' ) {108      projection = d3.geo.albersUsa()109        .scale(width)110        .translate([width / 2, height / 2]);111    }112    else if ( options.scope === 'world' ) {113      projection = d3.geo[options.projection]()114        .scale((width + 1) / 2 / Math.PI)115        .translate([width / 2, height / (options.projection === "mercator" ? 1.45 : 1.8)]);116    }117    if ( options.projection === 'orthographic' ) {118      svg.append("defs").append("path")119        .datum({type: "Sphere"})120        .attr("id", "sphere")121        .attr("d", path);122      svg.append("use")123          .attr("class", "stroke")124          .attr("xlink:href", "#sphere");125      svg.append("use")126          .attr("class", "fill")127          .attr("xlink:href", "#sphere");128      projection.scale(250).clipAngle(90).rotate(options.projectionConfig.rotation)129    }130    path = d3.geo.path()131      .projection( projection );132    return {path: path, projection: projection};133  }134  function addStyleBlock() {135    if ( d3.select('.datamaps-style-block').empty() ) {136      d3.select('head').append('style').attr('class', 'datamaps-style-block')137      .html('.datamap path.datamaps-graticule { fill: none; stroke: #777; stroke-width: 0.5px; stroke-opacity: .5; pointer-events: none; } .datamap .labels {pointer-events: none;} .datamap path {stroke: #FFFFFF; stroke-width: 1px;} .datamaps-legend dt, .datamaps-legend dd { float: left; margin: 0 3px 0 0;} .datamaps-legend dd {width: 20px; margin-right: 6px; border-radius: 3px;} .datamaps-legend {padding-bottom: 20px; z-index: 1001; position: absolute; left: 4px; font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;} .datamaps-hoverover {display: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .hoverinfo {padding: 4px; border-radius: 1px; background-color: #FFF; box-shadow: 1px 1px 5px #CCC; font-size: 12px; border: 1px solid #CCC; } .hoverinfo hr {border:1px dotted #CCC; }');138    }139  }140  function drawSubunits( data ) {141    var fillData = this.options.fills,142        colorCodeData = this.options.data || {},143        geoConfig = this.options.geographyConfig;144    var subunits = this.svg.select('g.datamaps-subunits');145    if ( subunits.empty() ) {146      subunits = this.addLayer('datamaps-subunits', null, true);147    }148    var geoData = topojson.feature( data, data.objects[ this.options.scope ] ).features;149    if ( geoConfig.hideAntarctica ) {150      geoData = geoData.filter(function(feature) {151        return feature.id !== "ATA";152      });153    }154    if ( geoConfig.hideHawaiiAndAlaska ) {155      geoData = geoData.filter(function(feature) {156        return feature.id !== "HI" && feature.id !== 'AK';157      });158    }159    var geo = subunits.selectAll('path.datamaps-subunit').data( geoData );160    geo.enter()161      .append('path')162      .attr('d', this.path)163      .attr('class', function(d) {164        return 'datamaps-subunit ' + d.id;165      })166      .attr('data-info', function(d) {167        return JSON.stringify( colorCodeData[d.id]);168      })169      .style('fill', function(d) {170        //if fillKey - use that171        //otherwise check 'fill'172        //otherwise check 'defaultFill'173        var fillColor;174        var datum = colorCodeData[d.id];175        if ( datum && datum.fillKey ) {176          fillColor = fillData[ val(datum.fillKey, {data: colorCodeData[d.id], geography: d}) ];177        }178        if ( typeof fillColor === 'undefined' ) {179          fillColor = val(datum && datum.fillColor, fillData.defaultFill, {data: colorCodeData[d.id], geography: d});180        }181        return fillColor;182      })183      .style('stroke-width', geoConfig.borderWidth)184      .style('stroke', geoConfig.borderColor);185  }186  function handleGeographyConfig () {187    var hoverover;188    var svg = this.svg;189    var self = this;190    var options = this.options.geographyConfig;191    if ( options.highlightOnHover || options.popupOnHover ) {192      svg.selectAll('.datamaps-subunit')193        .on('mouseover', function(d) {194          var $this = d3.select(this);195          var datum = self.options.data[d.id] || {};196          if ( options.highlightOnHover ) {197            var previousAttributes = {198              'fill':  $this.style('fill'),199              'stroke': $this.style('stroke'),200              'stroke-width': $this.style('stroke-width'),201              'fill-opacity': $this.style('fill-opacity')202            };203            $this204              .style('fill', val(datum.highlightFillColor, options.highlightFillColor, datum))205              .style('stroke', val(datum.highlightBorderColor, options.highlightBorderColor, datum))206              .style('stroke-width', val(datum.highlightBorderWidth, options.highlightBorderWidth, datum))207              .style('fill-opacity', val(datum.highlightFillOpacity, options.highlightFillOpacity, datum))208              .attr('data-previousAttributes', JSON.stringify(previousAttributes));209            //as per discussion on https://github.com/markmarkoh/datamaps/issues/19210            if ( ! /((MSIE)|(Trident))/.test(navigator.userAgent) ) {211             moveToFront.call(this);212            }213          }214          if ( options.popupOnHover ) {215            self.updatePopup($this, d, options, svg);216          }217        })218        .on('mouseout', function() {219          var $this = d3.select(this);220          if (options.highlightOnHover) {221            //reapply previous attributes222            var previousAttributes = JSON.parse( $this.attr('data-previousAttributes') );223            for ( var attr in previousAttributes ) {224              $this.style(attr, previousAttributes[attr]);225            }226          }227          $this.on('mousemove', null);228          d3.selectAll('.datamaps-hoverover').style('display', 'none');229        });230    }231    function moveToFront() {232      this.parentNode.appendChild(this);233    }234  }235  //plugin to add a simple map legend236  function addLegend(layer, data, options) {237    data = data || {};238    if ( !this.options.fills ) {239      return;240    }241    var html = '<dl>';242    var label = '';243    if ( data.legendTitle ) {244      html = '<h2>' + data.legendTitle + '</h2>' + html;245    }246    for ( var fillKey in this.options.fills ) {247      if ( fillKey === 'defaultFill') {248        if (! data.defaultFillName ) {249          continue;250        }251        label = data.defaultFillName;252      } else {253        if (data.labels && data.labels[fillKey]) {254          label = data.labels[fillKey];255        } else {256          label= fillKey + ': ';257        }258      }259      html += '<dt>' + label + '</dt>';260      html += '<dd style="background-color:' +  this.options.fills[fillKey] + '">&nbsp;</dd>';261    }262    html += '</dl>';263    var hoverover = d3.select( this.options.element ).append('div')264      .attr('class', 'datamaps-legend')265      .html(html);266  }267    function addGraticule ( layer, options ) {268      var graticule = d3.geo.graticule();269      this.svg.insert("path", '.datamaps-subunits')270        .datum(graticule)271        .attr("class", "datamaps-graticule")272        .attr("d", this.path);273  }274  function handleArcs (layer, data, options) {275    var self = this,276        svg = this.svg;277    if ( !data || (data && !data.slice) ) {278      throw "Datamaps Error - arcs must be an array";279    }280    // For some reason arc options were put in an `options` object instead of the parent arc281    // I don't like this, so to match bubbles and other plugins I'm moving it282    // This is to keep backwards compatability283    for ( var i = 0; i < data.length; i++ ) {284      data[i] = defaults(data[i], data[i].options);285      delete data[i].options;286    }287    if ( typeof options === "undefined" ) {288      options = defaultOptions.arcConfig;289    }290    var arcs = layer.selectAll('path.datamaps-arc').data( data, JSON.stringify );291    var path = d3.geo.path()292        .projection(self.projection);293    arcs294      .enter()295        .append('svg:path')296        .attr('class', 'datamaps-arc')297        .style('stroke-linecap', 'round')298        .style('stroke', function(datum) {299          return val(datum.strokeColor, options.strokeColor, datum);300        })301        .style('fill', 'none')302        .style('stroke-width', function(datum) {303            return val(datum.strokeWidth, options.strokeWidth, datum);304        })305        .attr('d', function(datum) {306            var originXY = self.latLngToXY(val(datum.origin.latitude, datum), val(datum.origin.longitude, datum))307            var destXY = self.latLngToXY(val(datum.destination.latitude, datum), val(datum.destination.longitude, datum));308            var midXY = [ (originXY[0] + destXY[0]) / 2, (originXY[1] + destXY[1]) / 2];309            if (options.greatArc) {310                  // TODO: Move this to inside `if` clause when setting attr `d`311              var greatArc = d3.geo.greatArc()312                  .source(function(d) { return [val(d.origin.longitude, d), val(d.origin.latitude, d)]; })313                  .target(function(d) { return [val(d.destination.longitude, d), val(d.destination.latitude, d)]; });314              return path(greatArc(datum))315            }316            var sharpness = val(datum.arcSharpness, options.arcSharpness, datum);317            return "M" + originXY[0] + ',' + originXY[1] + "S" + (midXY[0] + (50 * sharpness)) + "," + (midXY[1] - (75 * sharpness)) + "," + destXY[0] + "," + destXY[1];318        })319        .transition()320          .delay(100)321          .style('fill', function(datum) {322            /*323              Thank you Jake Archibald, this is awesome.324              Source: http://jakearchibald.com/2013/animated-line-drawing-svg/325            */326            var length = this.getTotalLength();327            this.style.transition = this.style.WebkitTransition = 'none';328            this.style.strokeDasharray = length + ' ' + length;329            this.style.strokeDashoffset = length;330            this.getBoundingClientRect();331            this.style.transition = this.style.WebkitTransition = 'stroke-dashoffset ' + val(datum.animationSpeed, options.animationSpeed, datum) + 'ms ease-out';332            this.style.strokeDashoffset = '0';333            return 'none';334          })335    arcs.exit()336      .transition()337      .style('opacity', 0)338      .remove();339  }340  function handleLabels ( layer, options ) {341    var self = this;342    options = options || {};343    var labelStartCoodinates = this.projection([-67.707617, 42.722131]);344    this.svg.selectAll(".datamaps-subunit")345      .attr("data-foo", function(d) {346        var center = self.path.centroid(d);347        var xOffset = 7.5, yOffset = 5;348        if ( ["FL", "KY", "MI"].indexOf(d.id) > -1 ) xOffset = -2.5;349        if ( d.id === "NY" ) xOffset = -1;350        if ( d.id === "MI" ) yOffset = 18;351        if ( d.id === "LA" ) xOffset = 13;352        var x,y;353        x = center[0] - xOffset;354        y = center[1] + yOffset;355        var smallStateIndex = ["VT", "NH", "MA", "RI", "CT", "NJ", "DE", "MD", "DC"].indexOf(d.id);356        if ( smallStateIndex > -1) {357          var yStart = labelStartCoodinates[1];358          x = labelStartCoodinates[0];359          y = yStart + (smallStateIndex * (2+ (options.fontSize || 12)));360          layer.append("line")361            .attr("x1", x - 3)362            .attr("y1", y - 5)363            .attr("x2", center[0])364            .attr("y2", center[1])365            .style("stroke", options.labelColor || "#000")366            .style("stroke-width", options.lineWidth || 1)367        }368        layer.append("text")369          .attr("x", x)370          .attr("y", y)371          .style("font-size", (options.fontSize || 10) + 'px')372          .style("font-family", options.fontFamily || "Verdana")373          .style("fill", options.labelColor || "#000")374          .text( d.id );375        return "bar";376      });377  }378  function handleBubbles (layer, data, options ) {379    var self = this,380        fillData = this.options.fills,381        filterData = this.options.filters,382        svg = this.svg;383    if ( !data || (data && !data.slice) ) {384      throw "Datamaps Error - bubbles must be an array";385    }386    var bubbles = layer.selectAll('circle.datamaps-bubble').data( data, options.key );387    bubbles388      .enter()389        .append('svg:circle')390        .attr('class', 'datamaps-bubble')391        .attr('cx', function ( datum ) {392          var latLng;393          if ( datumHasCoords(datum) ) {394            latLng = self.latLngToXY(datum.latitude, datum.longitude);395          }396          else if ( datum.centered ) {397            latLng = self.path.centroid(svg.select('path.' + datum.centered).data()[0]);398          }399          if ( latLng ) return latLng[0];400        })401        .attr('cy', function ( datum ) {402          var latLng;403          if ( datumHasCoords(datum) ) {404            latLng = self.latLngToXY(datum.latitude, datum.longitude);405          }406          else if ( datum.centered ) {407            latLng = self.path.centroid(svg.select('path.' + datum.centered).data()[0]);408          }409          if ( latLng ) return latLng[1];410        })411        .attr('r', function(datum) {412          // if animation enabled start with radius 0, otherwise use full size.413          return options.animate ? 0 : val(datum.radius, options.radius, datum);414        })415        .attr('data-info', function(d) {416          return JSON.stringify(d);417        })418        .attr('filter', function (datum) {419          var filterKey = filterData[ val(datum.filterKey, options.filterKey, datum) ];420          if (filterKey) {421            return filterKey;422          }423        })424        .style('stroke', function ( datum ) {425          return val(datum.borderColor, options.borderColor, datum);426        })427        .style('stroke-width', function ( datum ) {428          return val(datum.borderWidth, options.borderWidth, datum);429        })430        .style('fill-opacity', function ( datum ) {431          return val(datum.fillOpacity, options.fillOpacity, datum);432        })433        .style('fill', function ( datum ) {434          var fillColor = fillData[ val(datum.fillKey, options.fillKey, datum) ];435          return fillColor || fillData.defaultFill;436        })437        .on('mouseover', function ( datum ) {438          var $this = d3.select(this);439          if (options.highlightOnHover) {440            //save all previous attributes for mouseout441            var previousAttributes = {442              'fill':  $this.style('fill'),443              'stroke': $this.style('stroke'),444              'stroke-width': $this.style('stroke-width'),445              'fill-opacity': $this.style('fill-opacity')446            };447            $this448              .style('fill', val(datum.highlightFillColor, options.highlightFillColor, datum))449              .style('stroke', val(datum.highlightBorderColor, options.highlightBorderColor, datum))450              .style('stroke-width', val(datum.highlightBorderWidth, options.highlightBorderWidth, datum))451              .style('fill-opacity', val(datum.highlightFillOpacity, options.highlightFillOpacity, datum))452              .attr('data-previousAttributes', JSON.stringify(previousAttributes));453          }454          if (options.popupOnHover) {455            self.updatePopup($this, datum, options, svg);456          }457        })458        .on('mouseout', function ( datum ) {459          var $this = d3.select(this);460          if (options.highlightOnHover) {461            //reapply previous attributes462            var previousAttributes = JSON.parse( $this.attr('data-previousAttributes') );463            for ( var attr in previousAttributes ) {464              $this.style(attr, previousAttributes[attr]);465            }466          }467          d3.selectAll('.datamaps-hoverover').style('display', 'none');468        })469    bubbles.transition()470      .duration(400)471      .attr('r', function ( datum ) {472        return val(datum.radius, options.radius, datum);473      });474    bubbles.exit()475      .transition()476        .delay(options.exitDelay)477        .attr("r", 0)478        .remove();479    function datumHasCoords (datum) {480      return typeof datum !== 'undefined' && typeof datum.latitude !== 'undefined' && typeof datum.longitude !== 'undefined';481    }482  }483  //stolen from underscore.js484  function defaults(obj) {485    Array.prototype.slice.call(arguments, 1).forEach(function(source) {486      if (source) {487        for (var prop in source) {488          if (obj[prop] == null) obj[prop] = source[prop];489        }490      }491    });492    return obj;493  }494  /**************************************495             Public Functions496  ***************************************/497  function Datamap( options ) {498    if ( typeof d3 === 'undefined' || typeof topojson === 'undefined' ) {499      throw new Error('Include d3.js (v3.0.3 or greater) and topojson on this page before creating a new map');500   }501    //set options for global use502    this.options = defaults(options, defaultOptions);503    this.options.geographyConfig = defaults(options.geographyConfig, defaultOptions.geographyConfig);504    this.options.projectionConfig = defaults(options.projectionConfig, defaultOptions.projectionConfig);505    this.options.bubblesConfig = defaults(options.bubblesConfig, defaultOptions.bubblesConfig);506    this.options.arcConfig = defaults(options.arcConfig, defaultOptions.arcConfig);507    //add the SVG container508    if ( d3.select( this.options.element ).select('svg').length > 0 ) {509      addContainer.call(this, this.options.element, this.options.height, this.options.width );510    }511    /* Add core plugins to this instance */512    this.addPlugin('bubbles', handleBubbles);513    this.addPlugin('legend', addLegend);514    this.addPlugin('arc', handleArcs);515    this.addPlugin('labels', handleLabels);516    this.addPlugin('graticule', addGraticule);517    //append style block with basic hoverover styles518    if ( ! this.options.disableDefaultStyles ) {519      addStyleBlock();520    }521    return this.draw();522  }523  // resize map524  Datamap.prototype.resize = function () {525    var self = this;526    var options = self.options;527    if (options.responsive) {528      var newsize = options.element.clientWidth,529          oldsize = d3.select( options.element).select('svg').attr('data-width');530      d3.select(options.element).select('svg').selectAll('g').attr('transform', 'scale(' + (newsize / oldsize) + ')');531    }532  }533  // actually draw the features(states & countries)534  Datamap.prototype.draw = function() {535    //save off in a closure536    var self = this;537    var options = self.options;538    //set projections and paths based on scope539    var pathAndProjection = options.setProjection.apply(self, [options.element, options] );540    this.path = pathAndProjection.path;541    this.projection = pathAndProjection.projection;542    //if custom URL for topojson data, retrieve it and render543    if ( options.geographyConfig.dataUrl ) {544      d3.json( options.geographyConfig.dataUrl, function(error, results) {545        if ( error ) throw new Error(error);546        self.customTopo = results;547        draw( results );548      });549    }550    else {551      draw( this[options.scope + 'Topo'] || options.geographyConfig.dataJson);552    }553    return this;554      function draw (data) {555        // if fetching remote data, draw the map first then call `updateChoropleth`556        if ( self.options.dataUrl ) {557          //allow for csv or json data types558          d3[self.options.dataType](self.options.dataUrl, function(data) {559            //in the case of csv, transform data to object560            if ( self.options.dataType === 'csv' && (data && data.slice) ) {561              var tmpData = {};562              for(var i = 0; i < data.length; i++) {563                tmpData[data[i].id] = data[i];564              }565              data = tmpData;566            }567            Datamaps.prototype.updateChoropleth.call(self, data);568          });569        }570        drawSubunits.call(self, data);571        handleGeographyConfig.call(self);572        if ( self.options.geographyConfig.popupOnHover || self.options.bubblesConfig.popupOnHover) {573          hoverover = d3.select( self.options.element ).append('div')574            .attr('class', 'datamaps-hoverover')575            .style('z-index', 10001)576            .style('position', 'absolute');577        }578        //fire off finished callback579        self.options.done(self);580      }581  };582  /**************************************583                TopoJSON584  ***************************************/585  Datamap.prototype.worldTopo = '__WORLD__';586  Datamap.prototype.abwTopo = '__ABW__';587  Datamap.prototype.afgTopo = '__AFG__';588  Datamap.prototype.agoTopo = '__AGO__';589  Datamap.prototype.aiaTopo = '__AIA__';590  Datamap.prototype.albTopo = '__ALB__';591  Datamap.prototype.aldTopo = '__ALD__';592  Datamap.prototype.andTopo = '__AND__';593  Datamap.prototype.areTopo = '__ARE__';594  Datamap.prototype.argTopo = '__ARG__';595  Datamap.prototype.armTopo = '__ARM__';596  Datamap.prototype.asmTopo = '__ASM__';597  Datamap.prototype.ataTopo = '__ATA__';598  Datamap.prototype.atcTopo = '__ATC__';599  Datamap.prototype.atfTopo = '__ATF__';600  Datamap.prototype.atgTopo = '__ATG__';601  Datamap.prototype.ausTopo = '__AUS__';602  Datamap.prototype.autTopo = '__AUT__';603  Datamap.prototype.azeTopo = '__AZE__';604  Datamap.prototype.bdiTopo = '__BDI__';605  Datamap.prototype.belTopo = '__BEL__';606  Datamap.prototype.benTopo = '__BEN__';607  Datamap.prototype.bfaTopo = '__BFA__';608  Datamap.prototype.bgdTopo = '__BGD__';609  Datamap.prototype.bgrTopo = '__BGR__';610  Datamap.prototype.bhrTopo = '__BHR__';611  Datamap.prototype.bhsTopo = '__BHS__';612  Datamap.prototype.bihTopo = '__BIH__';613  Datamap.prototype.bjnTopo = '__BJN__';614  Datamap.prototype.blmTopo = '__BLM__';615  Datamap.prototype.blrTopo = '__BLR__';616  Datamap.prototype.blzTopo = '__BLZ__';617  Datamap.prototype.bmuTopo = '__BMU__';618  Datamap.prototype.bolTopo = '__BOL__';619  Datamap.prototype.braTopo = '__BRA__';620  Datamap.prototype.brbTopo = '__BRB__';621  Datamap.prototype.brnTopo = '__BRN__';622  Datamap.prototype.btnTopo = '__BTN__';623  Datamap.prototype.norTopo = '__NOR__';624  Datamap.prototype.bwaTopo = '__BWA__';625  Datamap.prototype.cafTopo = '__CAF__';626  Datamap.prototype.canTopo = '__CAN__';627  Datamap.prototype.cheTopo = '__CHE__';628  Datamap.prototype.chlTopo = '__CHL__';629  Datamap.prototype.chnTopo = '__CHN__';630  Datamap.prototype.civTopo = '__CIV__';631  Datamap.prototype.clpTopo = '__CLP__';632  Datamap.prototype.cmrTopo = '__CMR__';633  Datamap.prototype.codTopo = '__COD__';634  Datamap.prototype.cogTopo = '__COG__';635  Datamap.prototype.cokTopo = '__COK__';636  Datamap.prototype.colTopo = '__COL__';637  Datamap.prototype.comTopo = '__COM__';638  Datamap.prototype.cpvTopo = '__CPV__';639  Datamap.prototype.criTopo = '__CRI__';640  Datamap.prototype.csiTopo = '__CSI__';641  Datamap.prototype.cubTopo = '__CUB__';642  Datamap.prototype.cuwTopo = '__CUW__';643  Datamap.prototype.cymTopo = '__CYM__';644  Datamap.prototype.cynTopo = '__CYN__';645  Datamap.prototype.cypTopo = '__CYP__';646  Datamap.prototype.czeTopo = '__CZE__';647  Datamap.prototype.deuTopo = '__DEU__';648  Datamap.prototype.djiTopo = '__DJI__';649  Datamap.prototype.dmaTopo = '__DMA__';650  Datamap.prototype.dnkTopo = '__DNK__';651  Datamap.prototype.domTopo = '__DOM__';652  Datamap.prototype.dzaTopo = '__DZA__';653  Datamap.prototype.ecuTopo = '__ECU__';654  Datamap.prototype.egyTopo = '__EGY__';655  Datamap.prototype.eriTopo = '__ERI__';656  Datamap.prototype.esbTopo = '__ESB__';657  Datamap.prototype.espTopo = '__ESP__';658  Datamap.prototype.estTopo = '__EST__';659  Datamap.prototype.ethTopo = '__ETH__';660  Datamap.prototype.finTopo = '__FIN__';661  Datamap.prototype.fjiTopo = '__FJI__';662  Datamap.prototype.flkTopo = '__FLK__';663  Datamap.prototype.fraTopo = '__FRA__';664  Datamap.prototype.froTopo = '__FRO__';665  Datamap.prototype.fsmTopo = '__FSM__';666  Datamap.prototype.gabTopo = '__GAB__';667  Datamap.prototype.psxTopo = '__PSX__';668  Datamap.prototype.gbrTopo = '__GBR__';669  Datamap.prototype.geoTopo = '__GEO__';670  Datamap.prototype.ggyTopo = '__GGY__';671  Datamap.prototype.ghaTopo = '__GHA__';672  Datamap.prototype.gibTopo = '__GIB__';673  Datamap.prototype.ginTopo = '__GIN__';674  Datamap.prototype.gmbTopo = '__GMB__';675  Datamap.prototype.gnbTopo = '__GNB__';676  Datamap.prototype.gnqTopo = '__GNQ__';677  Datamap.prototype.grcTopo = '__GRC__';678  Datamap.prototype.grdTopo = '__GRD__';679  Datamap.prototype.grlTopo = '__GRL__';680  Datamap.prototype.gtmTopo = '__GTM__';681  Datamap.prototype.gumTopo = '__GUM__';682  Datamap.prototype.guyTopo = '__GUY__';683  Datamap.prototype.hkgTopo = '__HKG__';684  Datamap.prototype.hmdTopo = '__HMD__';685  Datamap.prototype.hndTopo = '__HND__';686  Datamap.prototype.hrvTopo = '__HRV__';687  Datamap.prototype.htiTopo = '__HTI__';688  Datamap.prototype.hunTopo = '__HUN__';689  Datamap.prototype.idnTopo = '__IDN__';690  Datamap.prototype.imnTopo = '__IMN__';691  Datamap.prototype.indTopo = '__IND__';692  Datamap.prototype.ioaTopo = '__IOA__';693  Datamap.prototype.iotTopo = {"type":"Topology","objects":{"iot":{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","properties":{"name":"British Indian Ocean Territory"},"id":"IO","arcs":[[[0]],[[1]],[[2]],[[3]],[[4]],[[5]],[[6]],[[7]],[[8]],[[9]]]}]}},"arcs":[[[9548,417],[-50,-386],[84,41],[197,147],[33,22],[26,11],[24,17],[21,37],[23,-25],[12,-26],[-4,-30],[-28,-36],[-65,-43],[-232,-113],[-91,-33],[-48,128],[48,259],[-55,109],[-53,25],[-185,56],[-69,11],[-72,26],[-175,129],[107,-8],[399,-153],[103,-55],[50,-110]],[[9843,360],[29,-41],[-33,24],[-36,35],[-20,37],[22,34],[128,140],[-75,108],[-166,106],[-138,129],[87,-34],[274,-200],[84,-81],[-41,-62],[-83,-61],[-45,-76],[4,-31],[9,-27]],[[819,3533],[-55,-15],[-29,3],[-11,10],[0,4],[95,-2]],[[31,4744],[-28,-12],[-3,48],[11,18],[40,18],[12,-36],[-10,-21],[-22,-15]],[[730,5586],[-51,-21],[-52,41],[32,35],[38,27],[51,17],[59,5],[-31,-52],[-46,-52]],[[4159,9042],[-7,-10],[-70,29],[-18,10],[76,-8],[23,-10],[-4,-11]],[[7797,9542],[-12,0],[77,39],[-22,-26],[-24,-11],[-19,-2]],[[3874,9736],[-15,-1],[81,69],[-13,-40],[-25,-20],[-28,-8]],[[4097,9944],[-16,-3],[-15,8],[-19,6],[67,12],[-17,-23]],[[5716,9978],[0,-14],[-13,11],[-15,5],[-9,5],[9,14],[30,-2],[5,-8],[-7,-11]]],"transform":{"scale":[0.00012337659545955747,0.00022054614321431707],"translate":[71.260996941,-7.43222421699987]}};694  Datamap.prototype.irlTopo = '__IRL__';695  Datamap.prototype.irnTopo = '__IRN__';696  Datamap.prototype.irqTopo = '__IRQ__';697  Datamap.prototype.islTopo = '__ISL__';698  Datamap.prototype.isrTopo = '__ISR__';699  Datamap.prototype.itaTopo = '__ITA__';700  Datamap.prototype.jamTopo = '__JAM__';701  Datamap.prototype.jeyTopo = '__JEY__';702  Datamap.prototype.jorTopo = '__JOR__';703  Datamap.prototype.jpnTopo = '__JPN__';704  Datamap.prototype.kabTopo = '__KAB__';705  Datamap.prototype.kasTopo = '__KAS__';706  Datamap.prototype.kazTopo = '__KAZ__';707  Datamap.prototype.kenTopo = '__KEN__';708  Datamap.prototype.kgzTopo = '__KGZ__';709  Datamap.prototype.khmTopo = '__KHM__';710  Datamap.prototype.kirTopo = '__KIR__';711  Datamap.prototype.knaTopo = '__KNA__';712  Datamap.prototype.korTopo = '__KOR__';713  Datamap.prototype.kosTopo = '__KOS__';714  Datamap.prototype.kwtTopo = '__KWT__';715  Datamap.prototype.laoTopo = '__LAO__';716  Datamap.prototype.lbnTopo = '__LBN__';717  Datamap.prototype.lbrTopo = '__LBR__';718  Datamap.prototype.lbyTopo = '__LBY__';719  Datamap.prototype.lcaTopo = '__LCA__';720  Datamap.prototype.lieTopo = '__LIE__';721  Datamap.prototype.lkaTopo = '__LKA__';722  Datamap.prototype.lsoTopo = '__LSO__';723  Datamap.prototype.ltuTopo = '__LTU__';724  Datamap.prototype.luxTopo = '__LUX__';725  Datamap.prototype.lvaTopo = '__LVA__';726  Datamap.prototype.macTopo = '__MAC__';727  Datamap.prototype.mafTopo = '__MAF__';728  Datamap.prototype.marTopo = '__MAR__';729  Datamap.prototype.mcoTopo = '__MCO__';730  Datamap.prototype.mdaTopo = '__MDA__';731  Datamap.prototype.mdgTopo = '__MDG__';732  Datamap.prototype.mdvTopo = '__MDV__';733  Datamap.prototype.mexTopo = '__MEX__';734  Datamap.prototype.mhlTopo = '__MHL__';735  Datamap.prototype.mkdTopo = '__MKD__';736  Datamap.prototype.mliTopo = '__MLI__';737  Datamap.prototype.mltTopo = '__MLT__';738  Datamap.prototype.mmrTopo = '__MMR__';739  Datamap.prototype.mneTopo = '__MNE__';740  Datamap.prototype.mngTopo = '__MNG__';741  Datamap.prototype.mnpTopo = '__MNP__';742  Datamap.prototype.mozTopo = '__MOZ__';743  Datamap.prototype.mrtTopo = '__MRT__';744  Datamap.prototype.msrTopo = '__MSR__';745  Datamap.prototype.musTopo = '__MUS__';746  Datamap.prototype.mwiTopo = '__MWI__';747  Datamap.prototype.mysTopo = '__MYS__';748  Datamap.prototype.namTopo = '__NAM__';749  Datamap.prototype.nclTopo = '__NCL__';750  Datamap.prototype.nerTopo = '__NER__';751  Datamap.prototype.nfkTopo = '__NFK__';752  Datamap.prototype.ngaTopo = '__NGA__';753  Datamap.prototype.nicTopo = '__NIC__';754  Datamap.prototype.niuTopo = '__NIU__';755  Datamap.prototype.nldTopo = '__NLD__';756  Datamap.prototype.nplTopo = '__NPL__';757  Datamap.prototype.nruTopo = '__NRU__';758  Datamap.prototype.nulTopo = '__NUL__';759  Datamap.prototype.nzlTopo = '__NZL__';760  Datamap.prototype.omnTopo = '__OMN__';761  Datamap.prototype.pakTopo = '__PAK__';762  Datamap.prototype.panTopo = '__PAN__';763  Datamap.prototype.pcnTopo = '__PCN__';764  Datamap.prototype.perTopo = '__PER__';765  Datamap.prototype.pgaTopo = '__PGA__';766  Datamap.prototype.phlTopo = '__PHL__';767  Datamap.prototype.plwTopo = '__PLW__';768  Datamap.prototype.pngTopo = '__PNG__';769  Datamap.prototype.polTopo = '__POL__';770  Datamap.prototype.priTopo = '__PRI__';771  Datamap.prototype.prkTopo = '__PRK__';772  Datamap.prototype.prtTopo = '__PRT__';773  Datamap.prototype.pryTopo = '__PRY__';774  Datamap.prototype.pyfTopo = '__PYF__';775  Datamap.prototype.qatTopo = '__QAT__';776  Datamap.prototype.rouTopo = '__ROU__';777  Datamap.prototype.rusTopo = '__RUS__';778  Datamap.prototype.rwaTopo = '__RWA__';779  Datamap.prototype.sahTopo = '__SAH__';780  Datamap.prototype.sauTopo = '__SAU__';781  Datamap.prototype.scrTopo = '__SCR__';782  Datamap.prototype.sdnTopo = '__SDN__';783  Datamap.prototype.sdsTopo = '__SDS__';784  Datamap.prototype.senTopo = '__SEN__';785  Datamap.prototype.serTopo = '__SER__';786  Datamap.prototype.sgpTopo = '__SGP__';787  Datamap.prototype.sgsTopo = '__SGS__';788  Datamap.prototype.shnTopo = '__SHN__';789  Datamap.prototype.slbTopo = '__SLB__';790  Datamap.prototype.sleTopo = '__SLE__';791  Datamap.prototype.slvTopo = '__SLV__';792  Datamap.prototype.smrTopo = '__SMR__';793  Datamap.prototype.solTopo = '__SOL__';794  Datamap.prototype.somTopo = '__SOM__';795  Datamap.prototype.spmTopo = '__SPM__';796  Datamap.prototype.srbTopo = '__SRB__';797  Datamap.prototype.stpTopo = '__STP__';798  Datamap.prototype.surTopo = '__SUR__';799  Datamap.prototype.svkTopo = '__SVK__';800  Datamap.prototype.svnTopo = '__SVN__';801  Datamap.prototype.sweTopo = '__SWE__';802  Datamap.prototype.swzTopo = '__SWZ__';803  Datamap.prototype.sxmTopo = '__SXM__';804  Datamap.prototype.sycTopo = '__SYC__';805  Datamap.prototype.syrTopo = '__SYR__';806  Datamap.prototype.tcaTopo = '__TCA__';807  Datamap.prototype.tcdTopo = '__TCD__';808  Datamap.prototype.tgoTopo = '__TGO__';809  Datamap.prototype.thaTopo = '__THA__';810  Datamap.prototype.tjkTopo = '__TJK__';811  Datamap.prototype.tkmTopo = '__TKM__';812  Datamap.prototype.tlsTopo = '__TLS__';813  Datamap.prototype.tonTopo = '__TON__';814  Datamap.prototype.ttoTopo = '__TTO__';815  Datamap.prototype.tunTopo = '__TUN__';816  Datamap.prototype.turTopo = '__TUR__';817  Datamap.prototype.tuvTopo = '__TUV__';818  Datamap.prototype.twnTopo = '__TWN__';819  Datamap.prototype.tzaTopo = '__TZA__';820  Datamap.prototype.ugaTopo = '__UGA__';821  Datamap.prototype.ukrTopo = '__UKR__';822  Datamap.prototype.umiTopo = '__UMI__';823  Datamap.prototype.uryTopo = '__URY__';824  Datamap.prototype.usaTopo = '__USA__';825  Datamap.prototype.usgTopo = '__USG__';826  Datamap.prototype.uzbTopo = '__UZB__';827  Datamap.prototype.vatTopo = '__VAT__';828  Datamap.prototype.vctTopo = '__VCT__';829  Datamap.prototype.venTopo = '__VEN__';830  Datamap.prototype.vgbTopo = '__VGB__';831  Datamap.prototype.virTopo = '__VIR__';832  Datamap.prototype.vnmTopo = '__VNM__';833  Datamap.prototype.vutTopo = '__VUT__';834  Datamap.prototype.wlfTopo = '__WLF__';835  Datamap.prototype.wsbTopo = '__WSB__';836  Datamap.prototype.wsmTopo = '__WSM__';837  Datamap.prototype.yemTopo = '__YEM__';838  Datamap.prototype.zafTopo = '__ZAF__';839  Datamap.prototype.zmbTopo = '__ZMB__';840  Datamap.prototype.zweTopo = '__ZWE__';841  /**************************************842                Utilities843  ***************************************/844  //convert lat/lng coords to X / Y coords845  Datamap.prototype.latLngToXY = function(lat, lng) {846     return this.projection([lng, lat]);847  };848  //add <g> layer to root SVG849  Datamap.prototype.addLayer = function( className, id, first ) {850    var layer;851    if ( first ) {852      layer = this.svg.insert('g', ':first-child')853    }854    else {855      layer = this.svg.append('g')856    }857    return layer.attr('id', id || '')858      .attr('class', className || '');859  };860  Datamap.prototype.updateChoropleth = function(data) {861    var svg = this.svg;862    for ( var subunit in data ) {863      if ( data.hasOwnProperty(subunit) ) {864        var color;865        var subunitData = data[subunit]866        if ( ! subunit ) {867          continue;868        }869        else if ( typeof subunitData === "string" ) {870          color = subunitData;871        }872        else if ( typeof subunitData.color === "string" ) {873          color = subunitData.color;874        }875        else {876          color = this.options.fills[ subunitData.fillKey ];877        }878        //if it's an object, overriding the previous data879        if ( subunitData === Object(subunitData) ) {880          this.options.data[subunit] = defaults(subunitData, this.options.data[subunit] || {});881          var geo = this.svg.select('.' + subunit).attr('data-info', JSON.stringify(this.options.data[subunit]));882        }883        svg884          .selectAll('.' + subunit)885          .transition()886            .style('fill', color);887      }888    }889  };890  Datamap.prototype.updatePopup = function (element, d, options) {891    var self = this;892    element.on('mousemove', null);893    element.on('mousemove', function() {894      var position = d3.mouse(self.options.element);895      d3.select(self.svg[0][0].parentNode).select('.datamaps-hoverover')896        .style('top', ( (position[1] + 30)) + "px")897        .html(function() {898          var data = JSON.parse(element.attr('data-info'));899          try {900            return options.popupTemplate(d, data);901          } catch (e) {902            return "";903          }904        })905        .style('left', ( position[0]) + "px");906    });907    d3.select(self.svg[0][0].parentNode).select('.datamaps-hoverover').style('display', 'block');908  };909  Datamap.prototype.addPlugin = function( name, pluginFn ) {910    var self = this;911    if ( typeof Datamap.prototype[name] === "undefined" ) {912      Datamap.prototype[name] = function(data, options, callback, createNewLayer) {913        var layer;914        if ( typeof createNewLayer === "undefined" ) {915          createNewLayer = false;916        }917        if ( typeof options === 'function' ) {918          callback = options;919          options = undefined;920        }921        options = defaults(options || {}, self.options[name + 'Config']);922        //add a single layer, reuse the old layer923        if ( !createNewLayer && this.options[name + 'Layer'] ) {924          layer = this.options[name + 'Layer'];925          options = options || this.options[name + 'Options'];926        }927        else {928          layer = this.addLayer(name);929          this.options[name + 'Layer'] = layer;930          this.options[name + 'Options'] = options;931        }932        pluginFn.apply(this, [layer, data, options]);933        if ( callback ) {934          callback(layer);935        }936      };937    }938  };939  // expose library940  if (typeof exports === 'object') {941    d3 = require('d3');942    topojson = require('topojson');943    module.exports = Datamap;944  }945  else if ( typeof define === "function" && define.amd ) {946    define( "datamaps", ["require", "d3", "topojson"], function(require) {947      d3 = require('d3');948      topojson = require('topojson');949      return Datamap;950    });951  }952  else {953    window.Datamap = window.Datamaps = Datamap;954  }955  if ( window.jQuery ) {956    window.jQuery.fn.datamaps = function(options, callback) {957      options = options || {};958      options.element = this[0];959      var datamap = new Datamap(options);960      if ( typeof callback === "function" ) {961        callback(datamap, options);962      }963      return this;964    };965  }...

datamaps.maf.js

Source:datamaps.maf.js

1(function() {2  var svg;3  //save off default references4  var d3 = window.d3, topojson = window.topojson;5  var defaultOptions = {6    scope: 'world',7    responsive: false,8    aspectRatio: 0.5625,9    setProjection: setProjection,10    projection: 'equirectangular',11    dataType: 'json',12    data: {},13    done: function() {},14    fills: {15      defaultFill: '#ABDDA4'16    },17    filters: {},18    geographyConfig: {19        dataUrl: null,20        hideAntarctica: true,21        hideHawaiiAndAlaska : false,22        borderWidth: 1,23        borderColor: '#FDFDFD',24        popupTemplate: function(geography, data) {25          return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong></div>';26        },27        popupOnHover: true,28        highlightOnHover: true,29        highlightFillColor: '#FC8D59',30        highlightBorderColor: 'rgba(250, 15, 160, 0.2)',31        highlightBorderWidth: 232    },33    projectionConfig: {34      rotation: [97, 0]35    },36    bubblesConfig: {37        borderWidth: 2,38        borderColor: '#FFFFFF',39        popupOnHover: true,40        radius: null,41        popupTemplate: function(geography, data) {42          return '<div class="hoverinfo"><strong>' + data.name + '</strong></div>';43        },44        fillOpacity: 0.75,45        animate: true,46        highlightOnHover: true,47        highlightFillColor: '#FC8D59',48        highlightBorderColor: 'rgba(250, 15, 160, 0.2)',49        highlightBorderWidth: 2,50        highlightFillOpacity: 0.85,51        exitDelay: 100,52        key: JSON.stringify53    },54    arcConfig: {55      strokeColor: '#DD1C77',56      strokeWidth: 1,57      arcSharpness: 1,58      animationSpeed: 60059    }60  };61  /*62    Getter for value. If not declared on datumValue, look up the chain into optionsValue63  */64  function val( datumValue, optionsValue, context ) {65    if ( typeof context === 'undefined' ) {66      context = optionsValue;67      optionsValues = undefined;68    }69    var value = typeof datumValue !== 'undefined' ? datumValue : optionsValue;70    if (typeof value === 'undefined') {71      return  null;72    }73    if ( typeof value === 'function' ) {74      var fnContext = [context];75      if ( context.geography ) {76        fnContext = [context.geography, context.data];77      }78      return value.apply(null, fnContext);79    }80    else {81      return value;82    }83  }84  function addContainer( element, height, width ) {85    this.svg = d3.select( element ).append('svg')86      .attr('width', width || element.offsetWidth)87      .attr('data-width', width || element.offsetWidth)88      .attr('class', 'datamap')89      .attr('height', height || element.offsetHeight)90      .style('overflow', 'hidden'); // IE10+ doesn't respect height/width when map is zoomed in91    if (this.options.responsive) {92      d3.select(this.options.element).style({'position': 'relative', 'padding-bottom': (this.options.aspectRatio*100) + '%'});93      d3.select(this.options.element).select('svg').style({'position': 'absolute', 'width': '100%', 'height': '100%'});94      d3.select(this.options.element).select('svg').select('g').selectAll('path').style('vector-effect', 'non-scaling-stroke');95    }96    return this.svg;97  }98  // setProjection takes the svg element and options99  function setProjection( element, options ) {100    var width = options.width || element.offsetWidth;101    var height = options.height || element.offsetHeight;102    var projection, path;103    var svg = this.svg;104    if ( options && typeof options.scope === 'undefined') {105      options.scope = 'world';106    }107    if ( options.scope === 'usa' ) {108      projection = d3.geo.albersUsa()109        .scale(width)110        .translate([width / 2, height / 2]);111    }112    else if ( options.scope === 'world' ) {113      projection = d3.geo[options.projection]()114        .scale((width + 1) / 2 / Math.PI)115        .translate([width / 2, height / (options.projection === "mercator" ? 1.45 : 1.8)]);116    }117    if ( options.projection === 'orthographic' ) {118      svg.append("defs").append("path")119        .datum({type: "Sphere"})120        .attr("id", "sphere")121        .attr("d", path);122      svg.append("use")123          .attr("class", "stroke")124          .attr("xlink:href", "#sphere");125      svg.append("use")126          .attr("class", "fill")127          .attr("xlink:href", "#sphere");128      projection.scale(250).clipAngle(90).rotate(options.projectionConfig.rotation)129    }130    path = d3.geo.path()131      .projection( projection );132    return {path: path, projection: projection};133  }134  function addStyleBlock() {135    if ( d3.select('.datamaps-style-block').empty() ) {136      d3.select('head').append('style').attr('class', 'datamaps-style-block')137      .html('.datamap path.datamaps-graticule { fill: none; stroke: #777; stroke-width: 0.5px; stroke-opacity: .5; pointer-events: none; } .datamap .labels {pointer-events: none;} .datamap path {stroke: #FFFFFF; stroke-width: 1px;} .datamaps-legend dt, .datamaps-legend dd { float: left; margin: 0 3px 0 0;} .datamaps-legend dd {width: 20px; margin-right: 6px; border-radius: 3px;} .datamaps-legend {padding-bottom: 20px; z-index: 1001; position: absolute; left: 4px; font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;} .datamaps-hoverover {display: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .hoverinfo {padding: 4px; border-radius: 1px; background-color: #FFF; box-shadow: 1px 1px 5px #CCC; font-size: 12px; border: 1px solid #CCC; } .hoverinfo hr {border:1px dotted #CCC; }');138    }139  }140  function drawSubunits( data ) {141    var fillData = this.options.fills,142        colorCodeData = this.options.data || {},143        geoConfig = this.options.geographyConfig;144    var subunits = this.svg.select('g.datamaps-subunits');145    if ( subunits.empty() ) {146      subunits = this.addLayer('datamaps-subunits', null, true);147    }148    var geoData = topojson.feature( data, data.objects[ this.options.scope ] ).features;149    if ( geoConfig.hideAntarctica ) {150      geoData = geoData.filter(function(feature) {151        return feature.id !== "ATA";152      });153    }154    if ( geoConfig.hideHawaiiAndAlaska ) {155      geoData = geoData.filter(function(feature) {156        return feature.id !== "HI" && feature.id !== 'AK';157      });158    }159    var geo = subunits.selectAll('path.datamaps-subunit').data( geoData );160    geo.enter()161      .append('path')162      .attr('d', this.path)163      .attr('class', function(d) {164        return 'datamaps-subunit ' + d.id;165      })166      .attr('data-info', function(d) {167        return JSON.stringify( colorCodeData[d.id]);168      })169      .style('fill', function(d) {170        //if fillKey - use that171        //otherwise check 'fill'172        //otherwise check 'defaultFill'173        var fillColor;174        var datum = colorCodeData[d.id];175        if ( datum && datum.fillKey ) {176          fillColor = fillData[ val(datum.fillKey, {data: colorCodeData[d.id], geography: d}) ];177        }178        if ( typeof fillColor === 'undefined' ) {179          fillColor = val(datum && datum.fillColor, fillData.defaultFill, {data: colorCodeData[d.id], geography: d});180        }181        return fillColor;182      })183      .style('stroke-width', geoConfig.borderWidth)184      .style('stroke', geoConfig.borderColor);185  }186  function handleGeographyConfig () {187    var hoverover;188    var svg = this.svg;189    var self = this;190    var options = this.options.geographyConfig;191    if ( options.highlightOnHover || options.popupOnHover ) {192      svg.selectAll('.datamaps-subunit')193        .on('mouseover', function(d) {194          var $this = d3.select(this);195          var datum = self.options.data[d.id] || {};196          if ( options.highlightOnHover ) {197            var previousAttributes = {198              'fill':  $this.style('fill'),199              'stroke': $this.style('stroke'),200              'stroke-width': $this.style('stroke-width'),201              'fill-opacity': $this.style('fill-opacity')202            };203            $this204              .style('fill', val(datum.highlightFillColor, options.highlightFillColor, datum))205              .style('stroke', val(datum.highlightBorderColor, options.highlightBorderColor, datum))206              .style('stroke-width', val(datum.highlightBorderWidth, options.highlightBorderWidth, datum))207              .style('fill-opacity', val(datum.highlightFillOpacity, options.highlightFillOpacity, datum))208              .attr('data-previousAttributes', JSON.stringify(previousAttributes));209            //as per discussion on https://github.com/markmarkoh/datamaps/issues/19210            if ( ! /((MSIE)|(Trident))/.test(navigator.userAgent) ) {211             moveToFront.call(this);212            }213          }214          if ( options.popupOnHover ) {215            self.updatePopup($this, d, options, svg);216          }217        })218        .on('mouseout', function() {219          var $this = d3.select(this);220          if (options.highlightOnHover) {221            //reapply previous attributes222            var previousAttributes = JSON.parse( $this.attr('data-previousAttributes') );223            for ( var attr in previousAttributes ) {224              $this.style(attr, previousAttributes[attr]);225            }226          }227          $this.on('mousemove', null);228          d3.selectAll('.datamaps-hoverover').style('display', 'none');229        });230    }231    function moveToFront() {232      this.parentNode.appendChild(this);233    }234  }235  //plugin to add a simple map legend236  function addLegend(layer, data, options) {237    data = data || {};238    if ( !this.options.fills ) {239      return;240    }241    var html = '<dl>';242    var label = '';243    if ( data.legendTitle ) {244      html = '<h2>' + data.legendTitle + '</h2>' + html;245    }246    for ( var fillKey in this.options.fills ) {247      if ( fillKey === 'defaultFill') {248        if (! data.defaultFillName ) {249          continue;250        }251        label = data.defaultFillName;252      } else {253        if (data.labels && data.labels[fillKey]) {254          label = data.labels[fillKey];255        } else {256          label= fillKey + ': ';257        }258      }259      html += '<dt>' + label + '</dt>';260      html += '<dd style="background-color:' +  this.options.fills[fillKey] + '">&nbsp;</dd>';261    }262    html += '</dl>';263    var hoverover = d3.select( this.options.element ).append('div')264      .attr('class', 'datamaps-legend')265      .html(html);266  }267    function addGraticule ( layer, options ) {268      var graticule = d3.geo.graticule();269      this.svg.insert("path", '.datamaps-subunits')270        .datum(graticule)271        .attr("class", "datamaps-graticule")272        .attr("d", this.path);273  }274  function handleArcs (layer, data, options) {275    var self = this,276        svg = this.svg;277    if ( !data || (data && !data.slice) ) {278      throw "Datamaps Error - arcs must be an array";279    }280    // For some reason arc options were put in an `options` object instead of the parent arc281    // I don't like this, so to match bubbles and other plugins I'm moving it282    // This is to keep backwards compatability283    for ( var i = 0; i < data.length; i++ ) {284      data[i] = defaults(data[i], data[i].options);285      delete data[i].options;286    }287    if ( typeof options === "undefined" ) {288      options = defaultOptions.arcConfig;289    }290    var arcs = layer.selectAll('path.datamaps-arc').data( data, JSON.stringify );291    var path = d3.geo.path()292        .projection(self.projection);293    arcs294      .enter()295        .append('svg:path')296        .attr('class', 'datamaps-arc')297        .style('stroke-linecap', 'round')298        .style('stroke', function(datum) {299          return val(datum.strokeColor, options.strokeColor, datum);300        })301        .style('fill', 'none')302        .style('stroke-width', function(datum) {303            return val(datum.strokeWidth, options.strokeWidth, datum);304        })305        .attr('d', function(datum) {306            var originXY = self.latLngToXY(val(datum.origin.latitude, datum), val(datum.origin.longitude, datum))307            var destXY = self.latLngToXY(val(datum.destination.latitude, datum), val(datum.destination.longitude, datum));308            var midXY = [ (originXY[0] + destXY[0]) / 2, (originXY[1] + destXY[1]) / 2];309            if (options.greatArc) {310                  // TODO: Move this to inside `if` clause when setting attr `d`311              var greatArc = d3.geo.greatArc()312                  .source(function(d) { return [val(d.origin.longitude, d), val(d.origin.latitude, d)]; })313                  .target(function(d) { return [val(d.destination.longitude, d), val(d.destination.latitude, d)]; });314              return path(greatArc(datum))315            }316            var sharpness = val(datum.arcSharpness, options.arcSharpness, datum);317            return "M" + originXY[0] + ',' + originXY[1] + "S" + (midXY[0] + (50 * sharpness)) + "," + (midXY[1] - (75 * sharpness)) + "," + destXY[0] + "," + destXY[1];318        })319        .transition()320          .delay(100)321          .style('fill', function(datum) {322            /*323              Thank you Jake Archibald, this is awesome.324              Source: http://jakearchibald.com/2013/animated-line-drawing-svg/325            */326            var length = this.getTotalLength();327            this.style.transition = this.style.WebkitTransition = 'none';328            this.style.strokeDasharray = length + ' ' + length;329            this.style.strokeDashoffset = length;330            this.getBoundingClientRect();331            this.style.transition = this.style.WebkitTransition = 'stroke-dashoffset ' + val(datum.animationSpeed, options.animationSpeed, datum) + 'ms ease-out';332            this.style.strokeDashoffset = '0';333            return 'none';334          })335    arcs.exit()336      .transition()337      .style('opacity', 0)338      .remove();339  }340  function handleLabels ( layer, options ) {341    var self = this;342    options = options || {};343    var labelStartCoodinates = this.projection([-67.707617, 42.722131]);344    this.svg.selectAll(".datamaps-subunit")345      .attr("data-foo", function(d) {346        var center = self.path.centroid(d);347        var xOffset = 7.5, yOffset = 5;348        if ( ["FL", "KY", "MI"].indexOf(d.id) > -1 ) xOffset = -2.5;349        if ( d.id === "NY" ) xOffset = -1;350        if ( d.id === "MI" ) yOffset = 18;351        if ( d.id === "LA" ) xOffset = 13;352        var x,y;353        x = center[0] - xOffset;354        y = center[1] + yOffset;355        var smallStateIndex = ["VT", "NH", "MA", "RI", "CT", "NJ", "DE", "MD", "DC"].indexOf(d.id);356        if ( smallStateIndex > -1) {357          var yStart = labelStartCoodinates[1];358          x = labelStartCoodinates[0];359          y = yStart + (smallStateIndex * (2+ (options.fontSize || 12)));360          layer.append("line")361            .attr("x1", x - 3)362            .attr("y1", y - 5)363            .attr("x2", center[0])364            .attr("y2", center[1])365            .style("stroke", options.labelColor || "#000")366            .style("stroke-width", options.lineWidth || 1)367        }368        layer.append("text")369          .attr("x", x)370          .attr("y", y)371          .style("font-size", (options.fontSize || 10) + 'px')372          .style("font-family", options.fontFamily || "Verdana")373          .style("fill", options.labelColor || "#000")374          .text( d.id );375        return "bar";376      });377  }378  function handleBubbles (layer, data, options ) {379    var self = this,380        fillData = this.options.fills,381        filterData = this.options.filters,382        svg = this.svg;383    if ( !data || (data && !data.slice) ) {384      throw "Datamaps Error - bubbles must be an array";385    }386    var bubbles = layer.selectAll('circle.datamaps-bubble').data( data, options.key );387    bubbles388      .enter()389        .append('svg:circle')390        .attr('class', 'datamaps-bubble')391        .attr('cx', function ( datum ) {392          var latLng;393          if ( datumHasCoords(datum) ) {394            latLng = self.latLngToXY(datum.latitude, datum.longitude);395          }396          else if ( datum.centered ) {397            latLng = self.path.centroid(svg.select('path.' + datum.centered).data()[0]);398          }399          if ( latLng ) return latLng[0];400        })401        .attr('cy', function ( datum ) {402          var latLng;403          if ( datumHasCoords(datum) ) {404            latLng = self.latLngToXY(datum.latitude, datum.longitude);405          }406          else if ( datum.centered ) {407            latLng = self.path.centroid(svg.select('path.' + datum.centered).data()[0]);408          }409          if ( latLng ) return latLng[1];410        })411        .attr('r', function(datum) {412          // if animation enabled start with radius 0, otherwise use full size.413          return options.animate ? 0 : val(datum.radius, options.radius, datum);414        })415        .attr('data-info', function(d) {416          return JSON.stringify(d);417        })418        .attr('filter', function (datum) {419          var filterKey = filterData[ val(datum.filterKey, options.filterKey, datum) ];420          if (filterKey) {421            return filterKey;422          }423        })424        .style('stroke', function ( datum ) {425          return val(datum.borderColor, options.borderColor, datum);426        })427        .style('stroke-width', function ( datum ) {428          return val(datum.borderWidth, options.borderWidth, datum);429        })430        .style('fill-opacity', function ( datum ) {431          return val(datum.fillOpacity, options.fillOpacity, datum);432        })433        .style('fill', function ( datum ) {434          var fillColor = fillData[ val(datum.fillKey, options.fillKey, datum) ];435          return fillColor || fillData.defaultFill;436        })437        .on('mouseover', function ( datum ) {438          var $this = d3.select(this);439          if (options.highlightOnHover) {440            //save all previous attributes for mouseout441            var previousAttributes = {442              'fill':  $this.style('fill'),443              'stroke': $this.style('stroke'),444              'stroke-width': $this.style('stroke-width'),445              'fill-opacity': $this.style('fill-opacity')446            };447            $this448              .style('fill', val(datum.highlightFillColor, options.highlightFillColor, datum))449              .style('stroke', val(datum.highlightBorderColor, options.highlightBorderColor, datum))450              .style('stroke-width', val(datum.highlightBorderWidth, options.highlightBorderWidth, datum))451              .style('fill-opacity', val(datum.highlightFillOpacity, options.highlightFillOpacity, datum))452              .attr('data-previousAttributes', JSON.stringify(previousAttributes));453          }454          if (options.popupOnHover) {455            self.updatePopup($this, datum, options, svg);456          }457        })458        .on('mouseout', function ( datum ) {459          var $this = d3.select(this);460          if (options.highlightOnHover) {461            //reapply previous attributes462            var previousAttributes = JSON.parse( $this.attr('data-previousAttributes') );463            for ( var attr in previousAttributes ) {464              $this.style(attr, previousAttributes[attr]);465            }466          }467          d3.selectAll('.datamaps-hoverover').style('display', 'none');468        })469    bubbles.transition()470      .duration(400)471      .attr('r', function ( datum ) {472        return val(datum.radius, options.radius, datum);473      });474    bubbles.exit()475      .transition()476        .delay(options.exitDelay)477        .attr("r", 0)478        .remove();479    function datumHasCoords (datum) {480      return typeof datum !== 'undefined' && typeof datum.latitude !== 'undefined' && typeof datum.longitude !== 'undefined';481    }482  }483  //stolen from underscore.js484  function defaults(obj) {485    Array.prototype.slice.call(arguments, 1).forEach(function(source) {486      if (source) {487        for (var prop in source) {488          if (obj[prop] == null) obj[prop] = source[prop];489        }490      }491    });492    return obj;493  }494  /**************************************495             Public Functions496  ***************************************/497  function Datamap( options ) {498    if ( typeof d3 === 'undefined' || typeof topojson === 'undefined' ) {499      throw new Error('Include d3.js (v3.0.3 or greater) and topojson on this page before creating a new map');500   }501    //set options for global use502    this.options = defaults(options, defaultOptions);503    this.options.geographyConfig = defaults(options.geographyConfig, defaultOptions.geographyConfig);504    this.options.projectionConfig = defaults(options.projectionConfig, defaultOptions.projectionConfig);505    this.options.bubblesConfig = defaults(options.bubblesConfig, defaultOptions.bubblesConfig);506    this.options.arcConfig = defaults(options.arcConfig, defaultOptions.arcConfig);507    //add the SVG container508    if ( d3.select( this.options.element ).select('svg').length > 0 ) {509      addContainer.call(this, this.options.element, this.options.height, this.options.width );510    }511    /* Add core plugins to this instance */512    this.addPlugin('bubbles', handleBubbles);513    this.addPlugin('legend', addLegend);514    this.addPlugin('arc', handleArcs);515    this.addPlugin('labels', handleLabels);516    this.addPlugin('graticule', addGraticule);517    //append style block with basic hoverover styles518    if ( ! this.options.disableDefaultStyles ) {519      addStyleBlock();520    }521    return this.draw();522  }523  // resize map524  Datamap.prototype.resize = function () {525    var self = this;526    var options = self.options;527    if (options.responsive) {528      var newsize = options.element.clientWidth,529          oldsize = d3.select( options.element).select('svg').attr('data-width');530      d3.select(options.element).select('svg').selectAll('g').attr('transform', 'scale(' + (newsize / oldsize) + ')');531    }532  }533  // actually draw the features(states & countries)534  Datamap.prototype.draw = function() {535    //save off in a closure536    var self = this;537    var options = self.options;538    //set projections and paths based on scope539    var pathAndProjection = options.setProjection.apply(self, [options.element, options] );540    this.path = pathAndProjection.path;541    this.projection = pathAndProjection.projection;542    //if custom URL for topojson data, retrieve it and render543    if ( options.geographyConfig.dataUrl ) {544      d3.json( options.geographyConfig.dataUrl, function(error, results) {545        if ( error ) throw new Error(error);546        self.customTopo = results;547        draw( results );548      });549    }550    else {551      draw( this[options.scope + 'Topo'] || options.geographyConfig.dataJson);552    }553    return this;554      function draw (data) {555        // if fetching remote data, draw the map first then call `updateChoropleth`556        if ( self.options.dataUrl ) {557          //allow for csv or json data types558          d3[self.options.dataType](self.options.dataUrl, function(data) {559            //in the case of csv, transform data to object560            if ( self.options.dataType === 'csv' && (data && data.slice) ) {561              var tmpData = {};562              for(var i = 0; i < data.length; i++) {563                tmpData[data[i].id] = data[i];564              }565              data = tmpData;566            }567            Datamaps.prototype.updateChoropleth.call(self, data);568          });569        }570        drawSubunits.call(self, data);571        handleGeographyConfig.call(self);572        if ( self.options.geographyConfig.popupOnHover || self.options.bubblesConfig.popupOnHover) {573          hoverover = d3.select( self.options.element ).append('div')574            .attr('class', 'datamaps-hoverover')575            .style('z-index', 10001)576            .style('position', 'absolute');577        }578        //fire off finished callback579        self.options.done(self);580      }581  };582  /**************************************583                TopoJSON584  ***************************************/585  Datamap.prototype.worldTopo = '__WORLD__';586  Datamap.prototype.abwTopo = '__ABW__';587  Datamap.prototype.afgTopo = '__AFG__';588  Datamap.prototype.agoTopo = '__AGO__';589  Datamap.prototype.aiaTopo = '__AIA__';590  Datamap.prototype.albTopo = '__ALB__';591  Datamap.prototype.aldTopo = '__ALD__';592  Datamap.prototype.andTopo = '__AND__';593  Datamap.prototype.areTopo = '__ARE__';594  Datamap.prototype.argTopo = '__ARG__';595  Datamap.prototype.armTopo = '__ARM__';596  Datamap.prototype.asmTopo = '__ASM__';597  Datamap.prototype.ataTopo = '__ATA__';598  Datamap.prototype.atcTopo = '__ATC__';599  Datamap.prototype.atfTopo = '__ATF__';600  Datamap.prototype.atgTopo = '__ATG__';601  Datamap.prototype.ausTopo = '__AUS__';602  Datamap.prototype.autTopo = '__AUT__';603  Datamap.prototype.azeTopo = '__AZE__';604  Datamap.prototype.bdiTopo = '__BDI__';605  Datamap.prototype.belTopo = '__BEL__';606  Datamap.prototype.benTopo = '__BEN__';607  Datamap.prototype.bfaTopo = '__BFA__';608  Datamap.prototype.bgdTopo = '__BGD__';609  Datamap.prototype.bgrTopo = '__BGR__';610  Datamap.prototype.bhrTopo = '__BHR__';611  Datamap.prototype.bhsTopo = '__BHS__';612  Datamap.prototype.bihTopo = '__BIH__';613  Datamap.prototype.bjnTopo = '__BJN__';614  Datamap.prototype.blmTopo = '__BLM__';615  Datamap.prototype.blrTopo = '__BLR__';616  Datamap.prototype.blzTopo = '__BLZ__';617  Datamap.prototype.bmuTopo = '__BMU__';618  Datamap.prototype.bolTopo = '__BOL__';619  Datamap.prototype.braTopo = '__BRA__';620  Datamap.prototype.brbTopo = '__BRB__';621  Datamap.prototype.brnTopo = '__BRN__';622  Datamap.prototype.btnTopo = '__BTN__';623  Datamap.prototype.norTopo = '__NOR__';624  Datamap.prototype.bwaTopo = '__BWA__';625  Datamap.prototype.cafTopo = '__CAF__';626  Datamap.prototype.canTopo = '__CAN__';627  Datamap.prototype.cheTopo = '__CHE__';628  Datamap.prototype.chlTopo = '__CHL__';629  Datamap.prototype.chnTopo = '__CHN__';630  Datamap.prototype.civTopo = '__CIV__';631  Datamap.prototype.clpTopo = '__CLP__';632  Datamap.prototype.cmrTopo = '__CMR__';633  Datamap.prototype.codTopo = '__COD__';634  Datamap.prototype.cogTopo = '__COG__';635  Datamap.prototype.cokTopo = '__COK__';636  Datamap.prototype.colTopo = '__COL__';637  Datamap.prototype.comTopo = '__COM__';638  Datamap.prototype.cpvTopo = '__CPV__';639  Datamap.prototype.criTopo = '__CRI__';640  Datamap.prototype.csiTopo = '__CSI__';641  Datamap.prototype.cubTopo = '__CUB__';642  Datamap.prototype.cuwTopo = '__CUW__';643  Datamap.prototype.cymTopo = '__CYM__';644  Datamap.prototype.cynTopo = '__CYN__';645  Datamap.prototype.cypTopo = '__CYP__';646  Datamap.prototype.czeTopo = '__CZE__';647  Datamap.prototype.deuTopo = '__DEU__';648  Datamap.prototype.djiTopo = '__DJI__';649  Datamap.prototype.dmaTopo = '__DMA__';650  Datamap.prototype.dnkTopo = '__DNK__';651  Datamap.prototype.domTopo = '__DOM__';652  Datamap.prototype.dzaTopo = '__DZA__';653  Datamap.prototype.ecuTopo = '__ECU__';654  Datamap.prototype.egyTopo = '__EGY__';655  Datamap.prototype.eriTopo = '__ERI__';656  Datamap.prototype.esbTopo = '__ESB__';657  Datamap.prototype.espTopo = '__ESP__';658  Datamap.prototype.estTopo = '__EST__';659  Datamap.prototype.ethTopo = '__ETH__';660  Datamap.prototype.finTopo = '__FIN__';661  Datamap.prototype.fjiTopo = '__FJI__';662  Datamap.prototype.flkTopo = '__FLK__';663  Datamap.prototype.fraTopo = '__FRA__';664  Datamap.prototype.froTopo = '__FRO__';665  Datamap.prototype.fsmTopo = '__FSM__';666  Datamap.prototype.gabTopo = '__GAB__';667  Datamap.prototype.psxTopo = '__PSX__';668  Datamap.prototype.gbrTopo = '__GBR__';669  Datamap.prototype.geoTopo = '__GEO__';670  Datamap.prototype.ggyTopo = '__GGY__';671  Datamap.prototype.ghaTopo = '__GHA__';672  Datamap.prototype.gibTopo = '__GIB__';673  Datamap.prototype.ginTopo = '__GIN__';674  Datamap.prototype.gmbTopo = '__GMB__';675  Datamap.prototype.gnbTopo = '__GNB__';676  Datamap.prototype.gnqTopo = '__GNQ__';677  Datamap.prototype.grcTopo = '__GRC__';678  Datamap.prototype.grdTopo = '__GRD__';679  Datamap.prototype.grlTopo = '__GRL__';680  Datamap.prototype.gtmTopo = '__GTM__';681  Datamap.prototype.gumTopo = '__GUM__';682  Datamap.prototype.guyTopo = '__GUY__';683  Datamap.prototype.hkgTopo = '__HKG__';684  Datamap.prototype.hmdTopo = '__HMD__';685  Datamap.prototype.hndTopo = '__HND__';686  Datamap.prototype.hrvTopo = '__HRV__';687  Datamap.prototype.htiTopo = '__HTI__';688  Datamap.prototype.hunTopo = '__HUN__';689  Datamap.prototype.idnTopo = '__IDN__';690  Datamap.prototype.imnTopo = '__IMN__';691  Datamap.prototype.indTopo = '__IND__';692  Datamap.prototype.ioaTopo = '__IOA__';693  Datamap.prototype.iotTopo = '__IOT__';694  Datamap.prototype.irlTopo = '__IRL__';695  Datamap.prototype.irnTopo = '__IRN__';696  Datamap.prototype.irqTopo = '__IRQ__';697  Datamap.prototype.islTopo = '__ISL__';698  Datamap.prototype.isrTopo = '__ISR__';699  Datamap.prototype.itaTopo = '__ITA__';700  Datamap.prototype.jamTopo = '__JAM__';701  Datamap.prototype.jeyTopo = '__JEY__';702  Datamap.prototype.jorTopo = '__JOR__';703  Datamap.prototype.jpnTopo = '__JPN__';704  Datamap.prototype.kabTopo = '__KAB__';705  Datamap.prototype.kasTopo = '__KAS__';706  Datamap.prototype.kazTopo = '__KAZ__';707  Datamap.prototype.kenTopo = '__KEN__';708  Datamap.prototype.kgzTopo = '__KGZ__';709  Datamap.prototype.khmTopo = '__KHM__';710  Datamap.prototype.kirTopo = '__KIR__';711  Datamap.prototype.knaTopo = '__KNA__';712  Datamap.prototype.korTopo = '__KOR__';713  Datamap.prototype.kosTopo = '__KOS__';714  Datamap.prototype.kwtTopo = '__KWT__';715  Datamap.prototype.laoTopo = '__LAO__';716  Datamap.prototype.lbnTopo = '__LBN__';717  Datamap.prototype.lbrTopo = '__LBR__';718  Datamap.prototype.lbyTopo = '__LBY__';719  Datamap.prototype.lcaTopo = '__LCA__';720  Datamap.prototype.lieTopo = '__LIE__';721  Datamap.prototype.lkaTopo = '__LKA__';722  Datamap.prototype.lsoTopo = '__LSO__';723  Datamap.prototype.ltuTopo = '__LTU__';724  Datamap.prototype.luxTopo = '__LUX__';725  Datamap.prototype.lvaTopo = '__LVA__';726  Datamap.prototype.macTopo = '__MAC__';727  Datamap.prototype.mafTopo = {"type":"Topology","objects":{"maf":{"type":"GeometryCollection","geometries":[{"type":"Polygon","properties":{"name":"St. Martin"},"id":"MF.SM","arcs":[[0]]}]}},"arcs":[[[9497,0],[-5019,2830],[-1552,406],[0,1],[0,545],[-609,-178],[-1118,-578],[-281,-87],[-700,587],[-218,632],[236,436],[2194,55],[1298,467],[902,1032],[347,1829],[604,656],[1378,770],[1521,568],[1011,28],[-21,-2434],[502,-3356],[27,-3370],[-502,-839]]],"transform":{"scale":[0.000013612201020102473,0.000008875516538095544],"translate":[-63.14683997299991,18.033391472135662]}};728  Datamap.prototype.marTopo = '__MAR__';729  Datamap.prototype.mcoTopo = '__MCO__';730  Datamap.prototype.mdaTopo = '__MDA__';731  Datamap.prototype.mdgTopo = '__MDG__';732  Datamap.prototype.mdvTopo = '__MDV__';733  Datamap.prototype.mexTopo = '__MEX__';734  Datamap.prototype.mhlTopo = '__MHL__';735  Datamap.prototype.mkdTopo = '__MKD__';736  Datamap.prototype.mliTopo = '__MLI__';737  Datamap.prototype.mltTopo = '__MLT__';738  Datamap.prototype.mmrTopo = '__MMR__';739  Datamap.prototype.mneTopo = '__MNE__';740  Datamap.prototype.mngTopo = '__MNG__';741  Datamap.prototype.mnpTopo = '__MNP__';742  Datamap.prototype.mozTopo = '__MOZ__';743  Datamap.prototype.mrtTopo = '__MRT__';744  Datamap.prototype.msrTopo = '__MSR__';745  Datamap.prototype.musTopo = '__MUS__';746  Datamap.prototype.mwiTopo = '__MWI__';747  Datamap.prototype.mysTopo = '__MYS__';748  Datamap.prototype.namTopo = '__NAM__';749  Datamap.prototype.nclTopo = '__NCL__';750  Datamap.prototype.nerTopo = '__NER__';751  Datamap.prototype.nfkTopo = '__NFK__';752  Datamap.prototype.ngaTopo = '__NGA__';753  Datamap.prototype.nicTopo = '__NIC__';754  Datamap.prototype.niuTopo = '__NIU__';755  Datamap.prototype.nldTopo = '__NLD__';756  Datamap.prototype.nplTopo = '__NPL__';757  Datamap.prototype.nruTopo = '__NRU__';758  Datamap.prototype.nulTopo = '__NUL__';759  Datamap.prototype.nzlTopo = '__NZL__';760  Datamap.prototype.omnTopo = '__OMN__';761  Datamap.prototype.pakTopo = '__PAK__';762  Datamap.prototype.panTopo = '__PAN__';763  Datamap.prototype.pcnTopo = '__PCN__';764  Datamap.prototype.perTopo = '__PER__';765  Datamap.prototype.pgaTopo = '__PGA__';766  Datamap.prototype.phlTopo = '__PHL__';767  Datamap.prototype.plwTopo = '__PLW__';768  Datamap.prototype.pngTopo = '__PNG__';769  Datamap.prototype.polTopo = '__POL__';770  Datamap.prototype.priTopo = '__PRI__';771  Datamap.prototype.prkTopo = '__PRK__';772  Datamap.prototype.prtTopo = '__PRT__';773  Datamap.prototype.pryTopo = '__PRY__';774  Datamap.prototype.pyfTopo = '__PYF__';775  Datamap.prototype.qatTopo = '__QAT__';776  Datamap.prototype.rouTopo = '__ROU__';777  Datamap.prototype.rusTopo = '__RUS__';778  Datamap.prototype.rwaTopo = '__RWA__';779  Datamap.prototype.sahTopo = '__SAH__';780  Datamap.prototype.sauTopo = '__SAU__';781  Datamap.prototype.scrTopo = '__SCR__';782  Datamap.prototype.sdnTopo = '__SDN__';783  Datamap.prototype.sdsTopo = '__SDS__';784  Datamap.prototype.senTopo = '__SEN__';785  Datamap.prototype.serTopo = '__SER__';786  Datamap.prototype.sgpTopo = '__SGP__';787  Datamap.prototype.sgsTopo = '__SGS__';788  Datamap.prototype.shnTopo = '__SHN__';789  Datamap.prototype.slbTopo = '__SLB__';790  Datamap.prototype.sleTopo = '__SLE__';791  Datamap.prototype.slvTopo = '__SLV__';792  Datamap.prototype.smrTopo = '__SMR__';793  Datamap.prototype.solTopo = '__SOL__';794  Datamap.prototype.somTopo = '__SOM__';795  Datamap.prototype.spmTopo = '__SPM__';796  Datamap.prototype.srbTopo = '__SRB__';797  Datamap.prototype.stpTopo = '__STP__';798  Datamap.prototype.surTopo = '__SUR__';799  Datamap.prototype.svkTopo = '__SVK__';800  Datamap.prototype.svnTopo = '__SVN__';801  Datamap.prototype.sweTopo = '__SWE__';802  Datamap.prototype.swzTopo = '__SWZ__';803  Datamap.prototype.sxmTopo = '__SXM__';804  Datamap.prototype.sycTopo = '__SYC__';805  Datamap.prototype.syrTopo = '__SYR__';806  Datamap.prototype.tcaTopo = '__TCA__';807  Datamap.prototype.tcdTopo = '__TCD__';808  Datamap.prototype.tgoTopo = '__TGO__';809  Datamap.prototype.thaTopo = '__THA__';810  Datamap.prototype.tjkTopo = '__TJK__';811  Datamap.prototype.tkmTopo = '__TKM__';812  Datamap.prototype.tlsTopo = '__TLS__';813  Datamap.prototype.tonTopo = '__TON__';814  Datamap.prototype.ttoTopo = '__TTO__';815  Datamap.prototype.tunTopo = '__TUN__';816  Datamap.prototype.turTopo = '__TUR__';817  Datamap.prototype.tuvTopo = '__TUV__';818  Datamap.prototype.twnTopo = '__TWN__';819  Datamap.prototype.tzaTopo = '__TZA__';820  Datamap.prototype.ugaTopo = '__UGA__';821  Datamap.prototype.ukrTopo = '__UKR__';822  Datamap.prototype.umiTopo = '__UMI__';823  Datamap.prototype.uryTopo = '__URY__';824  Datamap.prototype.usaTopo = '__USA__';825  Datamap.prototype.usgTopo = '__USG__';826  Datamap.prototype.uzbTopo = '__UZB__';827  Datamap.prototype.vatTopo = '__VAT__';828  Datamap.prototype.vctTopo = '__VCT__';829  Datamap.prototype.venTopo = '__VEN__';830  Datamap.prototype.vgbTopo = '__VGB__';831  Datamap.prototype.virTopo = '__VIR__';832  Datamap.prototype.vnmTopo = '__VNM__';833  Datamap.prototype.vutTopo = '__VUT__';834  Datamap.prototype.wlfTopo = '__WLF__';835  Datamap.prototype.wsbTopo = '__WSB__';836  Datamap.prototype.wsmTopo = '__WSM__';837  Datamap.prototype.yemTopo = '__YEM__';838  Datamap.prototype.zafTopo = '__ZAF__';839  Datamap.prototype.zmbTopo = '__ZMB__';840  Datamap.prototype.zweTopo = '__ZWE__';841  /**************************************842                Utilities843  ***************************************/844  //convert lat/lng coords to X / Y coords845  Datamap.prototype.latLngToXY = function(lat, lng) {846     return this.projection([lng, lat]);847  };848  //add <g> layer to root SVG849  Datamap.prototype.addLayer = function( className, id, first ) {850    var layer;851    if ( first ) {852      layer = this.svg.insert('g', ':first-child')853    }854    else {855      layer = this.svg.append('g')856    }857    return layer.attr('id', id || '')858      .attr('class', className || '');859  };860  Datamap.prototype.updateChoropleth = function(data) {861    var svg = this.svg;862    for ( var subunit in data ) {863      if ( data.hasOwnProperty(subunit) ) {864        var color;865        var subunitData = data[subunit]866        if ( ! subunit ) {867          continue;868        }869        else if ( typeof subunitData === "string" ) {870          color = subunitData;871        }872        else if ( typeof subunitData.color === "string" ) {873          color = subunitData.color;874        }875        else {876          color = this.options.fills[ subunitData.fillKey ];877        }878        //if it's an object, overriding the previous data879        if ( subunitData === Object(subunitData) ) {880          this.options.data[subunit] = defaults(subunitData, this.options.data[subunit] || {});881          var geo = this.svg.select('.' + subunit).attr('data-info', JSON.stringify(this.options.data[subunit]));882        }883        svg884          .selectAll('.' + subunit)885          .transition()886            .style('fill', color);887      }888    }889  };890  Datamap.prototype.updatePopup = function (element, d, options) {891    var self = this;892    element.on('mousemove', null);893    element.on('mousemove', function() {894      var position = d3.mouse(self.options.element);895      d3.select(self.svg[0][0].parentNode).select('.datamaps-hoverover')896        .style('top', ( (position[1] + 30)) + "px")897        .html(function() {898          var data = JSON.parse(element.attr('data-info'));899          try {900            return options.popupTemplate(d, data);901          } catch (e) {902            return "";903          }904        })905        .style('left', ( position[0]) + "px");906    });907    d3.select(self.svg[0][0].parentNode).select('.datamaps-hoverover').style('display', 'block');908  };909  Datamap.prototype.addPlugin = function( name, pluginFn ) {910    var self = this;911    if ( typeof Datamap.prototype[name] === "undefined" ) {912      Datamap.prototype[name] = function(data, options, callback, createNewLayer) {913        var layer;914        if ( typeof createNewLayer === "undefined" ) {915          createNewLayer = false;916        }917        if ( typeof options === 'function' ) {918          callback = options;919          options = undefined;920        }921        options = defaults(options || {}, self.options[name + 'Config']);922        //add a single layer, reuse the old layer923        if ( !createNewLayer && this.options[name + 'Layer'] ) {924          layer = this.options[name + 'Layer'];925          options = options || this.options[name + 'Options'];926        }927        else {928          layer = this.addLayer(name);929          this.options[name + 'Layer'] = layer;930          this.options[name + 'Options'] = options;931        }932        pluginFn.apply(this, [layer, data, options]);933        if ( callback ) {934          callback(layer);935        }936      };937    }938  };939  // expose library940  if (typeof exports === 'object') {941    d3 = require('d3');942    topojson = require('topojson');943    module.exports = Datamap;944  }945  else if ( typeof define === "function" && define.amd ) {946    define( "datamaps", ["require", "d3", "topojson"], function(require) {947      d3 = require('d3');948      topojson = require('topojson');949      return Datamap;950    });951  }952  else {953    window.Datamap = window.Datamaps = Datamap;954  }955  if ( window.jQuery ) {956    window.jQuery.fn.datamaps = function(options, callback) {957      options = options || {};958      options.element = this[0];959      var datamap = new Datamap(options);960      if ( typeof callback === "function" ) {961        callback(datamap, options);962      }963      return this;964    };965  }...

timeline.js

Source:timeline.js

1/*=========================================================================================2    File Name: timeline.js3    Description: echarts timeline chart4    ----------------------------------------------------------------------------------------5    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template6    Version: 1.07    Author: PIXINVENT8    Author URL: http://www.themeforest.net/user/pixinvent9==========================================================================================*/10// Timeline chart11// ------------------------------12$(window).on("load", function(){13    // Set paths14    // ------------------------------15    require.config({16        paths: {17            echarts: '../../../app-assets/vendors/js/charts/echarts'18        }19    });20    // Configuration21    // ------------------------------22    require(23        [24            'echarts',25            'echarts/chart/bar',26            'echarts/chart/line'27        ],28        // Charts setup29        function (ec) {30            // Initialize chart31            // ------------------------------32            var myChart = ec.init(document.getElementById('timeline'));33            // Chart Options34            // ------------------------------35            chartOptions = {36                // Setup timeline37                timeline: {38                    data: ['2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01'],39                    x: 10,40                    x2: 10,41                    label: {42                        formatter: function(s) {43                            return s.slice(0, 4);44                        }45                    },46                    autoPlay: true,47                    playInterval: 300048                },49                // Main options50                options: [51                    {52                        // Setup grid53                        grid: {54                            x: 55,55                            x2: 110,56                            y: 35,57                            y2: 10058                        },59                        // Add tooltip60                        tooltip: {61                            trigger: 'axis'62                        },63                        // Add legend64                        legend: {65                            data: ['GDP','Financial','Real Estate','Primary industry','Secondary industry','Third industry']66                        },67                        // Add Color68                        color: ['#00A5A8', '#626E82', '#FF7D4D','#FF4558', '#28D094', '#FFC400'],69                        // Add toolbox70                        toolbox: {71                            show: true,72                            orient: 'vertical',73                            x: 'right',74                            y: 70,75                            feature: {76                                mark: {77                                    show: true,78                                    title: {79                                        mark: 'Markline switch',80                                        markUndo: 'Undo markline',81                                        markClear: 'Clear markline'82                                    }83                                },84                                dataView: {85                                    show: true,86                                    readOnly: false,87                                    title: 'View data',88                                    lang: ['View chart data', 'Close', 'Update']89                                },90                                magicType: {91                                    show: true,92                                    title: {93                                        line: 'Switch to line chart',94                                        bar: 'Switch to bar chart',95                                        stack: 'Switch to stack',96                                        tiled: 'Switch to tiled'97                                    },98                                    type: ['line', 'bar', 'stack', 'tiled']99                                },100                                restore: {101                                    show: true,102                                    title: 'Restore'103                                },104                                saveAsImage: {105                                    show: true,106                                    title: 'Same as image',107                                    lang: ['Save']108                                }109                            }110                        },111                        // Enable drag recalculate112                        calculable: true,113                        // Horizontal axis114                        xAxis: [{115                            type: 'category',116                            axisLabel: {117                                interval: 0118                            },119                            data: ['Paris','Budapest','Prague','Madrid','Amsterdam','Berlin','Bratislava','Munich','Hague','Rome','Milan']120                        }],121                        // Vertical axis122                        yAxis: [123                            {124                                type: 'value',125                                name: 'GDPÃ¯Â¼Ëmillion)',126                                max: 53500127                            },128                            {129                                type: 'value',130                                name: 'OtherÃ¯Â¼Ëmillion)'131                            }132                        ],133                        // Add series134                        series: [135                            {136                                name: 'GDP',137                                type: 'bar',138                                markLine: {139                                    symbol: ['arrow','none'],140                                    symbolSize: [4, 2],141                                    itemStyle: {142                                        normal: {143                                            lineStyle: {color: 'orange'},144                                            barBorderColor: 'orange',145                                            label: {146                                                position: 'left',147                                                formatter: function(params) {148                                                    return Math.round(params.value);149                                                },150                                                textStyle: {color: 'orange'}151                                            }152                                        }153                                    },154                                    data: [{type: 'average', name: 'Average'}]155                                },156                                data: dataMap.dataGDP['2010']157                            },158                            {159                                name: 'Financial',160                                yAxisIndex: 1,161                                type: 'bar',162                                data: dataMap.dataFinancial['2010']163                            },164                            {165                                name: 'Real Estate',166                                yAxisIndex: 1,167                                type: 'bar',168                                data: dataMap.dataEstate['2010']169                            },170                            {171                                name: 'Primary industry',172                                yAxisIndex: 1,173                                type: 'bar',174                                data: dataMap.dataPI['2010']175                            },176                            {177                                name: 'Secondary industry',178                                yAxisIndex: 1,179                                type: 'bar',180                                data: dataMap.dataSI['2010']181                            },182                            {183                                name: 'Third industry',184                                yAxisIndex: 1,185                                type: 'bar',186                                data: dataMap.dataTI['2010']187                            }188                        ]189                    },190                    // 2011 data191                    {192                        series: [193                            {data: dataMap.dataGDP['2011']},194                            {data: dataMap.dataFinancial['2011']},195                            {data: dataMap.dataEstate['2011']},196                            {data: dataMap.dataPI['2011']},197                            {data: dataMap.dataSI['2011']},198                            {data: dataMap.dataTI['2011']}199                        ]200                    },201                    // 2012 data202                    {203                        series: [204                            {data: dataMap.dataGDP['2012']},205                            {data: dataMap.dataFinancial['2012']},206                            {data: dataMap.dataEstate['2012']},207                            {data: dataMap.dataPI['2012']},208                            {data: dataMap.dataSI['2012']},209                            {data: dataMap.dataTI['2012']}210                        ]211                    },212                    // 2013 data213                    {214                        series: [215                            {data: dataMap.dataGDP['2013']},216                            {data: dataMap.dataFinancial['2013']},217                            {data: dataMap.dataEstate['2013']},218                            {data: dataMap.dataPI['2013']},219                            {data: dataMap.dataSI['2013']},220                            {data: dataMap.dataTI['2013']}221                        ]222                    },223                    // 2014 data224                    {225                        series: [226                            {data: dataMap.dataGDP['2014']},227                            {data: dataMap.dataFinancial['2014']},228                            {data: dataMap.dataEstate['2014']},229                            {data: dataMap.dataPI['2014']},230                            {data: dataMap.dataSI['2014']},231                            {data: dataMap.dataTI['2014']}232                        ]233                    }234                ]235            };236            // Apply options237            // ------------------------------238            myChart.setOption(chartOptions);239            // Resize chart240            // ------------------------------241            $(function () {242                // Resize chart on menu width change and window resize243                $(window).on('resize', resize);244                $(".menu-toggle").on('click', resize);245                // Resize function246                function resize() {247                    setTimeout(function() {248                        // Resize chart249                        myChart.resize();250                    }, 200);251                }252            });253        }254    );...

Using AI Code Generation

1var wpt = require('wpt');2var wpt = new WebPageTest('www.webpagetest.org');3wpt.dataMap(function(err, data) {4    if (err) {5        console.log(err);6    } else {7        console.log(data);8    }9});10var wpt = require('wpt');11var wpt = new WebPageTest('www.webpagetest.org');12wpt.getLocations(function(err, data) {13    if (err) {14        console.log(err);15    } else {16        console.log(data);17    }18});19var wpt = require('wpt');20var wpt = new WebPageTest('www.webpagetest.org');21wpt.getTesters(function(err, data) {22    if (err) {23        console.log(err);24    } else {25        console.log(data);26    }27});28var wpt = require('wpt');29var wpt = new WebPageTest('www.webpagetest.org');30wpt.getTesters(function(err, data) {31    if (err) {32        console.log(err);33    } else {34        console.log(data);35    }36});37var wpt = require('wpt');38var wpt = new WebPageTest('www.webpagetest.org');39wpt.getTesters(function(err, data) {40    if (err) {41        console.log(err);42    } else {43        console.log(data);44    }45});46var wpt = require('wpt');47var wpt = new WebPageTest('www.webpagetest.org');48wpt.getTesters(function(err, data) {49    if (err) {50        console.log(err);51    } else {52        console.log(data);53    }54});55var wpt = require('wpt');56var wpt = new WebPageTest('www.webpagetest.org');57wpt.getTesters(function(err, data) {58    if (

Using AI Code Generation

1const wptools = require('wptools');2var page = wptools.page('Albert Einstein');3page.dataMap(function(err, data) {4    console.log(data);5});6const wptools = require('wptools');7var page = wptools.page('Albert Einstein');8page.dataMap(function(err, data) {9    console.log(data);10});11const wptools = require('wptools');12var page = wptools.page('Albert Einstein');13page.dataMap(function(err, data) {14    console.log(data);15});16const wptools = require('wptools');17var page = wptools.page('Albert Einstein');18page.dataMap(function(err, data) {19    console.log(data);20});21const wptools = require('wptools');22var page = wptools.page('Albert Einstein');23page.dataMap(function(err, data) {24    console.log(data);25});26const wptools = require('wptools');27var page = wptools.page('Albert Einstein');28page.dataMap(function(err, data) {29    console.log(data);30});31const wptools = require('wptools');32var page = wptools.page('Albert Einstein');33page.dataMap(function(err, data) {34    console.log(data);35});36const wptools = require('wptools');37var page = wptools.page('Albert Einstein');38page.dataMap(function(err, data) {39    console.log(data);40});41const wptools = require('wptools');42var page = wptools.page('Albert Einstein');43page.dataMap(function(err, data) {44    console.log(data);45});

Using AI Code Generation

1var wpt = require('wpt');2wpt.dataMap('test', 'test', 'test', function(err, data){3    if(err){4        console.log(err);5    }6    else{7        console.log(data);8    }9});10var wpt = require('wpt');11wpt.getUrls('test', 'test', function(err, data){12    if(err){13        console.log(err);14    }15    else{16        console.log(data);17    }18});19var wpt = require('wpt');20wpt.getLocations('test', function(err, data){21    if(err){22        console.log(err);23    }24    else{25        console.log(data);26    }27});28var wpt = require('wpt');29wpt.getBrowsers('test', function(err, data){30    if(err){31        console.log(err);32    }33    else{34        console.log(data);35    }36});37var wpt = require('wpt');38wpt.getTesters('test', function(err, data){39    if(err){40        console.log(err);41    }42    else{43        console.log(data);44    }45});46var wpt = require('wpt');47wpt.getTesters('test', function(err, data){48    if(err){49        console.log(err);50    }51    else{52        console.log(data);53    }54});55var wpt = require('wpt');56wpt.getTesters('test', function(err, data){57    if(err){58        console.log(err);59    }60    else{61        console.log(data);62    }63});64var wpt = require('wpt');65wpt.getTesters('test', function(err, data){66    if(err){67        console.log(err);68    }69    else{70        console.log(data);71    }72});

Using AI Code Generation

1const wptools = require('wptools')2dataMap('Barack Obama', function(err, data) {3  console.log(data)4})5{ birth_place: 'Honolulu, Hawaii',6  website: 'www.whitehouse.gov' }7const wptools = require('wptools')8data('Barack Obama', function(err, data) {9  console.log(data)10})11{ birth_place: 'Honolulu, Hawaii',12  website: 'www.whitehouse.gov' }13const wptools = require('wptools')14data('Barack Obama', function(err, data) {15  console.log(data)16})17{ birth_place: 'Honolulu, Hawaii',18  website: 'www.whitehouse.gov' }19const wptools = require('wptools')20data('Barack Obama', function

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.