How to use dataMap method in wpt

Best JavaScript code snippet using wpt

datamaps.iot.js

Source:datamaps.iot.js Github

copy

Full Screen

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 }...

Full Screen

Full Screen

datamaps.maf.js

Source:datamaps.maf.js Github

copy

Full Screen

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 }...

Full Screen

Full Screen

timeline.js

Source:timeline.js Github

copy

Full Screen

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 );...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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 (

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

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.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run wpt automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful