nv.d3.datamaps.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701
  1. // Licensed to Cloudera, Inc. under one
  2. // or more contributor license agreements. See the NOTICE file
  3. // distributed with this work for additional information
  4. // regarding copyright ownership. Cloudera, Inc. licenses this file
  5. // to you under the Apache License, Version 2.0 (the
  6. // "License"); you may not use this file except in compliance
  7. // with the License. You may obtain a copy of the License at
  8. //
  9. // http://www.apache.org/licenses/LICENSE-2.0
  10. //
  11. // Unless required by applicable law or agreed to in writing, software
  12. // distributed under the License is distributed on an "AS IS" BASIS,
  13. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. // See the License for the specific language governing permissions and
  15. // limitations under the License.
  16. (function() {
  17. var svg;
  18. //save off default references
  19. var d3 = window.d3, topojson = window.topojson;
  20. var defaultOptions = {
  21. scope: 'world',
  22. setProjection: setProjection,
  23. projection: 'equirectangular',
  24. dataType: 'json',
  25. onClick: function() {},
  26. done: function() {},
  27. fills: {
  28. defaultFill: '#ABDDA4'
  29. },
  30. geographyConfig: {
  31. dataUrl: null,
  32. hideAntarctica: true,
  33. borderWidth: 1,
  34. borderColor: '#FDFDFD',
  35. popupTemplate: function(geography, data) {
  36. return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong></div>';
  37. },
  38. popupOnHover: true,
  39. highlightOnHover: true,
  40. highlightFillColor: '#FC8D59',
  41. highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
  42. selectedBorderColor: '#666666',
  43. highlightBorderWidth: 2
  44. },
  45. bubblesConfig: {
  46. borderWidth: 2,
  47. borderColor: '#FFFFFF',
  48. popupOnHover: true,
  49. popupTemplate: function(geography, data) {
  50. return '<div class="hoverinfo"><strong>' + data.name + '</strong></div>';
  51. },
  52. fillOpacity: 0.75,
  53. animate: true,
  54. highlightOnHover: true,
  55. highlightFillColor: '#FC8D59',
  56. highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
  57. highlightBorderWidth: 2,
  58. highlightFillOpacity: 0.85,
  59. exitDelay: 100
  60. },
  61. arcConfig: {
  62. strokeColor: '#DD1C77',
  63. strokeWidth: 1,
  64. arcSharpness: 1,
  65. animationSpeed: 600
  66. }
  67. };
  68. function addContainer( element ) {
  69. this.svg = d3.select( element ).append('svg')
  70. .attr('width', element.offsetWidth)
  71. .attr('class', 'datamap')
  72. .attr('height', element.offsetHeight);
  73. return this.svg;
  74. }
  75. // setProjection takes the svg element and options
  76. function setProjection( element, options ) {
  77. var projection, path;
  78. if ( options && typeof options.scope === 'undefined') {
  79. options.scope = 'world';
  80. }
  81. if ( options.scope === 'usa' ) {
  82. projection = d3.geo.albersUsa()
  83. .scale(element.offsetWidth)
  84. .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
  85. }
  86. else if ( options.scope === 'world' ) {
  87. projection = d3.geo[options.projection]()
  88. .scale((element.offsetWidth + 1) / 2 / Math.PI)
  89. .translate([element.offsetWidth / 2, element.offsetHeight / (options.projection === "mercator" ? 1.45 : 1.8)]);
  90. }
  91. path = d3.geo.path()
  92. .projection( projection );
  93. return {path: path, projection: projection};
  94. }
  95. function addStyleBlock() {
  96. if ( d3.select('.datamaps-style-block').empty() ) {
  97. d3.select('head').attr('class', 'datamaps-style-block').append('style')
  98. .html('.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; }');
  99. }
  100. }
  101. function drawSubunits( data ) {
  102. var fillData = this.options.fills,
  103. colorCodeData = this.options.data || {},
  104. geoConfig = this.options.geographyConfig,
  105. onClick = this.options.onClick;
  106. var subunits = this.svg.select('g.datamaps-subunits');
  107. if ( subunits.empty() ) {
  108. subunits = this.addLayer('datamaps-subunits', null, true);
  109. }
  110. var geoData = topojson.feature( data, data.objects[ this.options.scope ] ).features;
  111. if ( geoConfig.hideAntarctica ) {
  112. geoData = geoData.filter(function(feature) {
  113. return feature.id !== "ATA";
  114. });
  115. }
  116. var geo = subunits.selectAll('path.datamaps-subunit').data( geoData );
  117. geo.enter()
  118. .append('path')
  119. .attr('d', this.path)
  120. .attr('class', function(d) {
  121. return 'datamaps-subunit ' + d.id;
  122. })
  123. .attr('data-info', function(d) {
  124. return JSON.stringify( colorCodeData[d.id]);
  125. })
  126. .style('fill', function(d) {
  127. var fillColor;
  128. if ( colorCodeData[d.id] ) {
  129. fillColor = fillData[ colorCodeData[d.id].fillKey ];
  130. }
  131. return fillColor || fillData.defaultFill;
  132. })
  133. .on('click', function(d) {
  134. if ( colorCodeData[d.id] && typeof onClick != "undefined") {
  135. onClick(colorCodeData[d.id]);
  136. }
  137. })
  138. .style('stroke-width', function(d) {
  139. var strokeWidth = geoConfig.borderWidth;
  140. if ( colorCodeData[d.id] && colorCodeData[d.id].selected ) {
  141. strokeWidth = 2;
  142. }
  143. return strokeWidth;
  144. })
  145. .style('stroke', function(d) {
  146. var strokeColor = geoConfig.borderColor;
  147. if ( colorCodeData[d.id] && colorCodeData[d.id].selected ) {
  148. strokeColor = geoConfig.selectedBorderColor;
  149. }
  150. return strokeColor;
  151. });
  152. }
  153. function handleGeographyConfig () {
  154. var hoverover;
  155. var svg = this.svg;
  156. var self = this;
  157. var options = this.options.geographyConfig;
  158. if ( options.highlightOnHover || options.popupOnHover ) {
  159. svg.selectAll('.datamaps-subunit')
  160. .on('mouseover', function(d) {
  161. var $this = d3.select(this);
  162. if ( options.highlightOnHover ) {
  163. var previousAttributes = {
  164. 'fill': $this.style('fill'),
  165. 'stroke': $this.style('stroke'),
  166. 'stroke-width': $this.style('stroke-width'),
  167. 'fill-opacity': $this.style('fill-opacity')
  168. };
  169. $this
  170. .style('fill', options.highlightFillColor)
  171. .style('stroke', options.highlightBorderColor)
  172. .style('stroke-width', options.highlightBorderWidth)
  173. .style('fill-opacity', options.highlightFillOpacity)
  174. .attr('data-previousAttributes', JSON.stringify(previousAttributes));
  175. //as per discussion on https://github.com/markmarkoh/datamaps/issues/19
  176. if ( ! /MSIE/.test(navigator.userAgent) ) {
  177. moveToFront.call(this);
  178. }
  179. }
  180. if ( options.popupOnHover ) {
  181. self.updatePopup($this, d, options, svg);
  182. }
  183. })
  184. .on('mouseout', function() {
  185. var $this = d3.select(this);
  186. if (options.highlightOnHover) {
  187. //reapply previous attributes
  188. var previousAttributes = JSON.parse( $this.attr('data-previousAttributes') );
  189. for ( var attr in previousAttributes ) {
  190. $this.style(attr, previousAttributes[attr]);
  191. }
  192. }
  193. $this.on('mousemove', null);
  194. d3.selectAll('.datamaps-hoverover').style('display', 'none');
  195. });
  196. }
  197. function moveToFront() {
  198. this.parentNode.appendChild(this);
  199. }
  200. }
  201. //plugin to add a simple map legend
  202. function addLegend(layer, data, options) {
  203. data = data || {};
  204. if ( !this.options.fills ) {
  205. return;
  206. }
  207. var html = '<dl>';
  208. var label = '';
  209. if ( data.legendTitle ) {
  210. html = '<h2>' + data.legendTitle + '</h2>' + html;
  211. }
  212. for ( var fillKey in this.options.fills ) {
  213. if ( fillKey === 'defaultFill') {
  214. if (! data.defaultFillName ) {
  215. continue;
  216. }
  217. label = data.defaultFillName;
  218. } else {
  219. if (data.labels && data.labels[fillKey]) {
  220. label = data.labels[fillKey];
  221. } else {
  222. label= fillKey + ': ';
  223. }
  224. }
  225. html += '<dt>' + label + '</dt>';
  226. html += '<dd style="background-color:' + this.options.fills[fillKey] + '">&nbsp;</dd>';
  227. }
  228. html += '</dl>';
  229. var hoverover = d3.select( this.options.element ).append('div')
  230. .attr('class', 'datamaps-legend')
  231. .html(html);
  232. }
  233. function handleArcs (layer, data, options) {
  234. var self = this,
  235. svg = this.svg;
  236. if ( !data || (data && !data.slice) ) {
  237. throw "Datamaps Error - arcs must be an array";
  238. }
  239. if ( typeof options === "undefined" ) {
  240. options = defaultOptions.arcConfig;
  241. }
  242. var arcs = layer.selectAll('path.datamaps-arc').data( data, JSON.stringify );
  243. arcs
  244. .enter()
  245. .append('svg:path')
  246. .attr('class', 'datamaps-arc')
  247. .style('stroke-linecap', 'round')
  248. .style('stroke', function(datum) {
  249. if ( datum.options && datum.options.strokeColor) {
  250. return datum.options.strokeColor;
  251. }
  252. return options.strokeColor
  253. })
  254. .style('fill', 'none')
  255. .style('stroke-width', function(datum) {
  256. if ( datum.options && datum.options.strokeWidth) {
  257. return datum.options.strokeWidth;
  258. }
  259. return options.strokeWidth;
  260. })
  261. .attr('d', function(datum) {
  262. var originXY = self.latLngToXY(datum.origin.latitude, datum.origin.longitude);
  263. var destXY = self.latLngToXY(datum.destination.latitude, datum.destination.longitude);
  264. var midXY = [ (originXY[0] + destXY[0]) / 2, (originXY[1] + destXY[1]) / 2];
  265. return "M" + originXY[0] + ',' + originXY[1] + "S" + (midXY[0] + (50 * options.arcSharpness)) + "," + (midXY[1] - (75 * options.arcSharpness)) + "," + destXY[0] + "," + destXY[1];
  266. })
  267. .transition()
  268. .delay(100)
  269. .style('fill', function() {
  270. /*
  271. Thank you Jake Archibald, this is awesome.
  272. Source: http://jakearchibald.com/2013/animated-line-drawing-svg/
  273. */
  274. var length = this.getTotalLength();
  275. this.style.transition = this.style.WebkitTransition = 'none';
  276. this.style.strokeDasharray = length + ' ' + length;
  277. this.style.strokeDashoffset = length;
  278. this.getBoundingClientRect();
  279. this.style.transition = this.style.WebkitTransition = 'stroke-dashoffset ' + options.animationSpeed + 'ms ease-out';
  280. this.style.strokeDashoffset = '0';
  281. return 'none';
  282. })
  283. arcs.exit()
  284. .transition()
  285. .style('opacity', 0)
  286. .remove();
  287. }
  288. function handleLabels ( layer, options ) {
  289. var self = this;
  290. options = options || {};
  291. var labelStartCoodinates = this.projection([-67.707617, 42.722131]);
  292. this.svg.selectAll(".datamaps-subunit")
  293. .attr("data-foo", function(d) {
  294. var center = self.path.centroid(d);
  295. var xOffset = 7.5, yOffset = 5;
  296. if ( ["FL", "KY", "MI"].indexOf(d.id) > -1 ) xOffset = -2.5;
  297. if ( d.id === "NY" ) xOffset = -1;
  298. if ( d.id === "MI" ) yOffset = 18;
  299. if ( d.id === "LA" ) xOffset = 13;
  300. var x,y;
  301. x = center[0] - xOffset;
  302. y = center[1] + yOffset;
  303. var smallStateIndex = ["VT", "NH", "MA", "RI", "CT", "NJ", "DE", "MD", "DC"].indexOf(d.id);
  304. if ( smallStateIndex > -1) {
  305. var yStart = labelStartCoodinates[1];
  306. x = labelStartCoodinates[0];
  307. y = yStart + (smallStateIndex * (2+ (options.fontSize || 12)));
  308. layer.append("line")
  309. .attr("x1", x - 3)
  310. .attr("y1", y - 5)
  311. .attr("x2", center[0])
  312. .attr("y2", center[1])
  313. .style("stroke", options.labelColor || "#000")
  314. .style("stroke-width", options.lineWidth || 1)
  315. }
  316. layer.append("text")
  317. .attr("x", x)
  318. .attr("y", y)
  319. .style("font-size", (options.fontSize || 10) + 'px')
  320. .style("font-family", options.fontFamily || "Verdana")
  321. .style("fill", options.labelColor || "#000")
  322. .text( d.id );
  323. return "bar";
  324. });
  325. }
  326. function handleBubbles (layer, data, options ) {
  327. var self = this,
  328. fillData = this.options.fills,
  329. svg = this.svg;
  330. if ( !data || (data && !data.slice) ) {
  331. throw "Datamaps Error - bubbles must be an array";
  332. }
  333. var bubbles = layer.selectAll('circle.datamaps-bubble').data( data, JSON.stringify );
  334. bubbles
  335. .enter()
  336. .append('svg:circle')
  337. .attr('class', 'datamaps-bubble')
  338. .attr('cx', function ( datum ) {
  339. var latLng;
  340. if ( datumHasCoords(datum) ) {
  341. latLng = self.latLngToXY(datum.latitude, datum.longitude);
  342. }
  343. else if ( datum.centered ) {
  344. latLng = self.path.centroid(svg.select('path.' + datum.centered).data()[0]);
  345. }
  346. if ( latLng ) return latLng[0];
  347. })
  348. .attr('cy', function ( datum ) {
  349. var latLng;
  350. if ( datumHasCoords(datum) ) {
  351. latLng = self.latLngToXY(datum.latitude, datum.longitude);
  352. }
  353. else if ( datum.centered ) {
  354. latLng = self.path.centroid(svg.select('path.' + datum.centered).data()[0]);
  355. }
  356. if ( latLng ) return latLng[1];;
  357. })
  358. .attr('r', 0) //for animation purposes
  359. .attr('data-info', function(d) {
  360. return JSON.stringify(d);
  361. })
  362. .style('stroke', options.borderColor)
  363. .style('stroke-width', options.borderWidth)
  364. .style('fill-opacity', options.fillOpacity)
  365. .style('fill', function ( datum ) {
  366. var fillColor = fillData[ datum.fillKey ];
  367. return fillColor || fillData.defaultFill;
  368. })
  369. .on('mouseover', function ( datum ) {
  370. var $this = d3.select(this);
  371. if (options.highlightOnHover) {
  372. //save all previous attributes for mouseout
  373. var previousAttributes = {
  374. 'fill': $this.style('fill'),
  375. 'stroke': $this.style('stroke'),
  376. 'stroke-width': $this.style('stroke-width'),
  377. 'fill-opacity': $this.style('fill-opacity')
  378. };
  379. $this
  380. .style('fill', options.highlightFillColor)
  381. .style('stroke', options.highlightBorderColor)
  382. .style('stroke-width', options.highlightBorderWidth)
  383. .style('fill-opacity', options.highlightFillOpacity)
  384. .attr('data-previousAttributes', JSON.stringify(previousAttributes));
  385. }
  386. if (options.popupOnHover) {
  387. self.updatePopup($this, datum, options, svg);
  388. }
  389. })
  390. .on('mouseout', function ( datum ) {
  391. var $this = d3.select(this);
  392. if (options.highlightOnHover) {
  393. //reapply previous attributes
  394. var previousAttributes = JSON.parse( $this.attr('data-previousAttributes') );
  395. for ( var attr in previousAttributes ) {
  396. $this.style(attr, previousAttributes[attr]);
  397. }
  398. }
  399. d3.selectAll('.datamaps-hoverover').style('display', 'none');
  400. })
  401. .transition().duration(400)
  402. .attr('r', function ( datum ) {
  403. return datum.radius;
  404. });
  405. bubbles.exit()
  406. .transition()
  407. .delay(options.exitDelay)
  408. .attr("r", 0)
  409. .remove();
  410. function datumHasCoords (datum) {
  411. return typeof datum !== 'undefined' && typeof datum.latitude !== 'undefined' && typeof datum.longitude !== 'undefined';
  412. }
  413. }
  414. //stolen from underscore.js
  415. function defaults(obj) {
  416. Array.prototype.slice.call(arguments, 1).forEach(function(source) {
  417. if (source) {
  418. for (var prop in source) {
  419. if (obj[prop] == null) obj[prop] = source[prop];
  420. }
  421. }
  422. });
  423. return obj;
  424. }
  425. /**************************************
  426. Public Functions
  427. ***************************************/
  428. function Datamap( options ) {
  429. if ( typeof d3 === 'undefined' || typeof topojson === 'undefined' ) {
  430. throw new Error('Include d3.js (v3.0.3 or greater) and topojson on this page before creating a new map');
  431. }
  432. //set options for global use
  433. this.options = defaults(options, defaultOptions);
  434. this.options.geographyConfig = defaults(options.geographyConfig, defaultOptions.geographyConfig);
  435. this.options.bubblesConfig = defaults(options.bubblesConfig, defaultOptions.bubblesConfig);
  436. this.options.arcConfig = defaults(options.arcConfig, defaultOptions.arcConfig);
  437. //add the SVG container
  438. if ( d3.select( this.options.element ).select('svg').length > 0 ) {
  439. addContainer.call(this, this.options.element );
  440. }
  441. /* Add core plugins to this instance */
  442. this.addPlugin('bubbles', handleBubbles);
  443. this.addPlugin('legend', addLegend);
  444. this.addPlugin('arc', handleArcs);
  445. this.addPlugin('labels', handleLabels);
  446. //append style block with basic hoverover styles
  447. if ( ! this.options.disableDefaultStyles ) {
  448. addStyleBlock();
  449. }
  450. return this.draw();
  451. }
  452. // actually draw the features(states & countries)
  453. Datamap.prototype.draw = function() {
  454. //save off in a closure
  455. var self = this;
  456. var options = self.options;
  457. //set projections and paths based on scope
  458. var pathAndProjection = options.setProjection.apply(self, [options.element, options] );
  459. this.path = pathAndProjection.path;
  460. this.projection = pathAndProjection.projection;
  461. //if custom URL for topojson data, retrieve it and render
  462. if ( options.geographyConfig.dataUrl ) {
  463. d3.json( options.geographyConfig.dataUrl, function(error, results) {
  464. if ( error ) throw new Error(error);
  465. self.customTopo = results;
  466. draw( results );
  467. });
  468. }
  469. else {
  470. draw( this[options.scope + 'Topo'] );
  471. }
  472. return this;
  473. function draw (data) {
  474. // if fetching remote data, draw the map first then call `updateChoropleth`
  475. if ( self.options.dataUrl ) {
  476. //allow for csv or json data types
  477. d3[self.options.dataType](self.options.dataUrl, function(data) {
  478. //in the case of csv, transform data to object
  479. if ( self.options.dataType === 'csv' && (data && data.slice) ) {
  480. var tmpData = {};
  481. for(var i = 0; i < data.length; i++) {
  482. tmpData[data[i].id] = data[i];
  483. }
  484. data = tmpData;
  485. }
  486. Datamaps.prototype.updateChoropleth.call(self, data);
  487. });
  488. }
  489. drawSubunits.call(self, data);
  490. handleGeographyConfig.call(self);
  491. if ( self.options.geographyConfig.popupOnHover || self.options.bubblesConfig.popupOnHover) {
  492. hoverover = d3.select( self.options.element ).append('div')
  493. .attr('class', 'datamaps-hoverover')
  494. .style('z-index', 10001)
  495. .style('position', 'absolute');
  496. }
  497. //fire off finished callback
  498. self.options.done(self);
  499. }
  500. };
  501. /**************************************
  502. TopoJSON
  503. ***************************************/
  504. Datamap.prototype.worldTopo = WORLD_TOPO;
  505. Datamap.prototype.usaTopo = USA_TOPO;
  506. /**************************************
  507. Utilities
  508. ***************************************/
  509. //convert lat/lng coords to X / Y coords
  510. Datamap.prototype.latLngToXY = function(lat, lng) {
  511. return this.projection([lng, lat]);
  512. };
  513. //add <g> layer to root SVG
  514. Datamap.prototype.addLayer = function( className, id, first ) {
  515. var layer;
  516. if ( first ) {
  517. layer = this.svg.insert('g', ':first-child')
  518. }
  519. else {
  520. layer = this.svg.append('g')
  521. }
  522. return layer.attr('id', id || '')
  523. .attr('class', className || '');
  524. };
  525. Datamap.prototype.updateChoropleth = function(data) {
  526. var svg = this.svg;
  527. for ( var subunit in data ) {
  528. if ( data.hasOwnProperty(subunit) ) {
  529. console.log(data);
  530. var color;
  531. var subunitData = data[subunit]
  532. if ( ! subunit ) {
  533. continue;
  534. }
  535. else if ( typeof subunitData === "string" ) {
  536. color = subunitData;
  537. }
  538. else if ( typeof subunitData.color === "string" ) {
  539. color = subunitData.color;
  540. }
  541. else {
  542. color = this.options.fills[ subunitData.fillKey ];
  543. }
  544. //if it's an object, overriding the previous data
  545. if ( subunitData === Object(subunitData) ) {
  546. this.options.data[subunit] = defaults(subunitData, this.options.data[subunit] || {});
  547. var geo = this.svg.select('.' + subunit).attr('data-info', JSON.stringify(this.options.data[subunit]));
  548. }
  549. svg
  550. .selectAll('.' + subunit)
  551. .transition()
  552. .style('fill', color);
  553. }
  554. }
  555. };
  556. Datamap.prototype.updatePopup = function (element, d, options) {
  557. var self = this;
  558. element.on('mousemove', null);
  559. element.on('mousemove', function() {
  560. var position = d3.mouse(this);
  561. d3.select(self.svg[0][0].parentNode).select('.datamaps-hoverover')
  562. .style('top', ( (position[1] + 30)) + "px")
  563. .html(function() {
  564. var data = JSON.parse(element.attr('data-info'));
  565. //if ( !data ) return '';
  566. return options.popupTemplate(d, data);
  567. })
  568. .style('left', ( position[0]) + "px");
  569. });
  570. d3.select(self.svg[0][0].parentNode).select('.datamaps-hoverover').style('display', 'block');
  571. };
  572. Datamap.prototype.addPlugin = function( name, pluginFn ) {
  573. var self = this;
  574. if ( typeof Datamap.prototype[name] === "undefined" ) {
  575. Datamap.prototype[name] = function(data, options, callback, createNewLayer) {
  576. var layer;
  577. if ( typeof createNewLayer === "undefined" ) {
  578. createNewLayer = false;
  579. }
  580. if ( typeof options === 'function' ) {
  581. callback = options;
  582. options = undefined;
  583. }
  584. options = defaults(options || {}, defaultOptions[name + 'Config']);
  585. //add a single layer, reuse the old layer
  586. if ( !createNewLayer && this.options[name + 'Layer'] ) {
  587. layer = this.options[name + 'Layer'];
  588. options = options || this.options[name + 'Options'];
  589. }
  590. else {
  591. layer = this.addLayer(name);
  592. this.options[name + 'Layer'] = layer;
  593. this.options[name + 'Options'] = options;
  594. }
  595. pluginFn.apply(this, [layer, data, options]);
  596. if ( callback ) {
  597. callback(layer);
  598. }
  599. };
  600. }
  601. };
  602. // expose library
  603. if ( typeof define === "function" && define.amd ) {
  604. define( "datamaps", function(require) { d3 = require('d3'); topojson = require('topojson'); return Datamap; } );
  605. }
  606. else {
  607. window.Datamap = window.Datamaps = Datamap;
  608. }
  609. if ( window.jQuery ) {
  610. window.jQuery.fn.datamaps = function(options, callback) {
  611. options = options || {};
  612. options.element = this[0];
  613. var datamap = new Datamap(options);
  614. if ( typeof callback === "function" ) {
  615. callback(datamap, options);
  616. }
  617. return this;
  618. };
  619. }
  620. })();