Zhenmao/countries.json

## countries.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              countries.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>World Map Regions</title>
<style>

  .overlay {
    fill: none;
    pointer-events: all;
  }

  .boundary {
    fill: none;
    stroke: #666;
    stroke-width: 0.5px;
  }

  .text-bg {
    fill: none;
    stroke: #fff;
    stroke-width: 3px;
    text-anchor: middle;
    font-family: sans-serif;
    font-size: 18px;
  }

  .text {
    fill: #666;
    text-anchor: middle;
    font-family: sans-serif;
    font-size: 18px;
    text-shadow: 0 0 3px #fff;
  }

</style>
</head>
<body>
<div>
  <p>Drag and zoom to adjust the map, and click Save As Image button to download the image.</p>
  <button id="saveButton">Save As Image</button>
</div>
<svg width="960" height="720"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"></script>
<script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>

<script>

  var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

  var projection = d3.geoMercator();

  var path = d3.geoPath()
    .projection(projection);

  var zoomed = function(d) {
    console.log(d3.event.transform);
    //New offset array
    var offset = [d3.event.transform.x, d3.event.transform.y];
    //Calculate new scale
    var newScale = d3.event.transform.k * 2000;
    //Update projection with new offset and scale
    projection.translate(offset)
      .scale(newScale);

    svg.selectAll("path")
      .attr("d", path);

    svg.selectAll(".text-bg")
      .attr("x", function(d) {return path.centroid(d)[0];})
      .attr("y", function(d) {return path.centroid(d)[1];});

    svg.selectAll(".text")
      .attr("x", function(d) {return path.centroid(d)[0];})
      .attr("y", function(d) {return path.centroid(d)[1];});
  };

  var zoom = d3.zoom()
    .on("zoom", zoomed);

  // Container for all zoom-able elements
  var map = svg.append("g")
    .attr("id", "map")
    .call(zoom)
    .call(zoom.transform, d3.zoomIdentity
      .scale(0.08)
      .translate(6000, 6000));

  map.append("rect")
    .attr("class", "overlay")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", width)
    .attr("height", height);

  var sets = [
    {
      name: 'Central Europe',
      set: d3.set(['BEL', 'CHE', 'DEU', 'AUT', 'ESP', 'FRA', 'ATF', 'GBR', 'GGY', 'JEY', 'FLK', 'SGS', 'GRC', 'MLT', 'IRL', 'ITA', 'LUX', 'NLD', 'AND', 'POL', 'PRT', 'TUR', 'CYP', 'CYN', 'MON', 'ALD', 'IMN', 'LTU', 'LVA', 'EST', 'BLR', 'UKR', 'MDA', 'ROU', 'HUN', 'SVK', 'SVN', 'HRV', 'BIH', 'CZE', 'BGR', 'KOS', 'MKD', 'ALB', 'MNE', 'SRB']),
    },
    {
      name: 'Northern Europe',
      set: d3.set(['DNK', 'FRO', 'FIN', 'GRL', 'ISL', 'NOR', 'SWE'])
    },
    {
      name: 'North America',
      set: d3.set(['CAN', 'MEX', 'USA'])
    },
    {
      name: 'Caribbean',
      set: d3.set(['BLZ', 'CRI', 'CUB', 'GTM', 'HND', 'NIC', 'PAN', 'SLV', 'HTI', 'JAM', 'DOM', 'PRI', 'BHS', 'TCA', 'ATG', 'DMA', 'BRB', 'GRD'])
    },
    {
      name: 'South America',
      set: d3.set(['ARG', 'BOL', 'BRA', 'CHL', 'COL', 'ECU', 'FLK', 'GUY', 'PRY', 'PER', 'SUR', 'URY', 'VEN', 'TTO'])
    },
    {
      name: 'Africa',
      set: d3.set(['AGO', 'BDI', 'BEN', 'BFA', 'BWA', 'CAF', 'CIV', 'CMR', 'COD', 'COD', 'COG', 'COM', 'CPV', 'DJI', 'DZA', 'EGY', 'ERI', 'ETH', 'GAB', 'GHA', 'GIN', 'GMB', 'GNB', 'GNQ', 'KEN', 'LBR', 'LBY', 'LSO', 'MAR', 'MDG', 'MLI', 'MOZ', 'MRT', 'MUS', 'MWI', 'MYT', 'NAM', 'NER', 'NGA', 'REU', 'RWA', 'ESH', 'SDN', 'SDS', 'SEN', 'SHN', 'SHN', 'SLE', 'SOM', 'SOL', 'SSD', 'STP', 'STP', 'SWZ', 'SYC', 'TCD', 'TGO', 'TUN', 'TZA', 'TZA', 'UGA', 'ZAF', 'ZMB', 'ZWE'])
    },
    {
      name: 'South Pacific',
      set: d3.set(['AUS', 'NZL'])
    },
    {
      name: 'India',
      set: d3.set(['IND', 'BGD', 'LKA'])
    },
    {
      name: 'Orient',
      set: d3.set(['AZE', 'ARE', 'QAT', 'IRN', 'AFG', 'PAK', 'BHR', 'SAU', 'YEM', 'OMN', 'SYR', 'JOR', 'IRQ', 'KWT', 'ISR', 'LBN', 'PSX', 'PSR', 'GEO', 'ARM'])
    },
    {
      name: 'Russia',
      set: d3.set(['RUS', 'KAZ', 'UZB', 'TKM', 'KGZ', 'TJK'])
    },
    {
      name: 'Asia',
      set: d3.set(['BTN', 'CHN', 'JPN', 'IDN', 'MNG', 'NPL', 'MMR', 'THA', 'KHM', 'LAO', 'VNM', 'PRK', 'KOR', 'TWN', 'MYS', 'PNG', 'SLB', 'VUT', 'NCL', 'BRN', 'PHL', 'TLS', 'HKG', 'FJI', 'GUM', 'PLW', 'FSM', 'MNP', 'KAS'])
    }
  ];

  var color = d3.scaleOrdinal()
    .domain([0, sets.length])
    .range(['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5']);

  var data = [0.1, 0.03, 0.15, 0.08, 0.14, 0.12, 0.06, 0.07, 0.09, 0.04, 0.12];

  var f = d3.format(".0%");


  d3.json("countries.json", function(error, world) {
    if (error) throw error;
    for (var i = 0; i < sets.length; i++) {
      map.append("path").datum(topojson.merge(world, world.objects.units.geometries.filter(function (d) {
          return sets[i].set.has(d.id);
        })))
          .attr('class', "boundary")
          .attr("d", path)
          // .attr({'data-name': sets[i].name})
          .style("fill", color(i));

      map.append("text").datum(topojson.merge(world, world.objects.units.geometries.filter(function (d) {
          return sets[i].set.has(d.id);
        })))
        .attr('class', "text-bg")
        .text(f(data[i]))
        .attr("x", function(d) {return path.centroid(d)[0];})
        .attr("y", function(d) {return path.centroid(d)[1];});

      map.append("text").datum(topojson.merge(world, world.objects.units.geometries.filter(function (d) {
          return sets[i].set.has(d.id);
        })))
        .attr('class', "text")
        .text(f(data[i]))
        .attr("x", function(d) {return path.centroid(d)[0];})
        .attr("y", function(d) {return path.centroid(d)[1];});
    }

  });

  // Set-up the export button
  d3.select('#saveButton').on('click', function(){
    var svgString = getSVGString(svg.node());
    svgString2Image( svgString, 2*width, 2*height, 'jpg', save ); // passes Blob and filesize String to the callback

    function save( dataBlob, filesize ){
      saveAs( dataBlob, 'world-map.jpg' ); // FileSaver.js function
    }
  });

  // Below are the functions that handle actual exporting:
  // getSVGString ( svgNode ) and svgString2Image( svgString, width, height, format, callback )
  function getSVGString( svgNode ) {
    svgNode.setAttribute('xlink', 'http://www.w3.org/1999/xlink');
    var cssStyleText = getCSSStyles( svgNode );
    appendCSS( cssStyleText, svgNode );

    var serializer = new XMLSerializer();
    var svgString = serializer.serializeToString(svgNode);
    svgString = svgString.replace(/(\w+)?:?xlink=/g, 'xmlns:xlink='); // Fix root xlink without namespace
    svgString = svgString.replace(/NS\d+:href/g, 'xlink:href'); // Safari NS namespace fix

    return svgString;

    function getCSSStyles( parentElement ) {
      var selectorTextArr = [];

      // Add Parent element Id and Classes to the list
      selectorTextArr.push( '#'+parentElement.id );
      for (var c = 0; c < parentElement.classList.length; c++)
          if ( !contains('.'+parentElement.classList[c], selectorTextArr) )
            selectorTextArr.push( '.'+parentElement.classList[c] );

      // Add Children element Ids and Classes to the list
      var nodes = parentElement.getElementsByTagName("*");
      for (var i = 0; i < nodes.length; i++) {
        var id = nodes[i].id;
        if ( !contains('#'+id, selectorTextArr) )
          selectorTextArr.push( '#'+id );

        var classes = nodes[i].classList;
        for (var c = 0; c < classes.length; c++)
          if ( !contains('.'+classes[c], selectorTextArr) )
            selectorTextArr.push( '.'+classes[c] );
      }

      // Extract CSS Rules
      var extractedCSSText = "";
      for (var i = 0; i < document.styleSheets.length; i++) {
        var s = document.styleSheets[i];

        try {
            if(!s.cssRules) continue;
        } catch( e ) {
              if(e.name !== 'SecurityError') throw e; // for Firefox
              continue;
            }

        var cssRules = s.cssRules;
        for (var r = 0; r < cssRules.length; r++) {
          if ( contains( cssRules[r].selectorText, selectorTextArr ) )
            extractedCSSText += cssRules[r].cssText;
        }
      }


      return extractedCSSText;

      function contains(str,arr) {
        return arr.indexOf( str ) === -1 ? false : true;
      }

    }

    function appendCSS( cssText, element ) {
      var styleElement = document.createElement("style");
      styleElement.setAttribute("type","text/css");
      styleElement.innerHTML = cssText;
      var refNode = element.hasChildNodes() ? element.children[0] : null;
      element.insertBefore( styleElement, refNode );
    }
  }


  function svgString2Image( svgString, width, height, format, callback ) {
    var format = format ? format : 'jpg';

    var imgsrc = 'data:image/svg+xml;base64,'+ btoa( unescape( encodeURIComponent( svgString ) ) ); // Convert SVG string to data URL

    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");

    canvas.width = width;
    canvas.height = height;

    var image = new Image();
    image.onload = function() {
      context.clearRect ( 0, 0, width, height );
      context.drawImage(image, 0, 0, width, height);

      canvas.toBlob( function(blob) {
        var filesize = Math.round( blob.length/1024 ) + ' KB';
        if ( callback ) callback( blob, filesize );
      });


    };

    image.src = imgsrc;
  }

</script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<title>World Map Regions</title>
	<style>

	.overlay {
	fill: none;
	pointer-events: all;
	}

	.boundary {
	fill: none;
	stroke: #666;
	stroke-width: 0.5px;
	}

	.text-bg {
	fill: none;
	stroke: #fff;
	stroke-width: 3px;
	text-anchor: middle;
	font-family: sans-serif;
	font-size: 18px;
	}

	.text {
	fill: #666;
	text-anchor: middle;
	font-family: sans-serif;
	font-size: 18px;
	text-shadow: 0 0 3px #fff;
	}

	</style>
	</head>
	<body>
	<div>
	<p>Drag and zoom to adjust the map, and click Save As Image button to download the image.</p>
	<button id="saveButton">Save As Image</button>
	</div>
	<svg width="960" height="720"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://unpkg.com/topojson-client@3"></script>
	<script src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"></script>
	<script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>

	<script>

	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height");

	var projection = d3.geoMercator();

	var path = d3.geoPath()
	.projection(projection);

	var zoomed = function(d) {
	console.log(d3.event.transform);
	//New offset array
	var offset = [d3.event.transform.x, d3.event.transform.y];
	//Calculate new scale
	var newScale = d3.event.transform.k * 2000;
	//Update projection with new offset and scale
	projection.translate(offset)
	.scale(newScale);

	svg.selectAll("path")
	.attr("d", path);

	svg.selectAll(".text-bg")
	.attr("x", function(d) {return path.centroid(d)[0];})
	.attr("y", function(d) {return path.centroid(d)[1];});

	svg.selectAll(".text")
	.attr("x", function(d) {return path.centroid(d)[0];})
	.attr("y", function(d) {return path.centroid(d)[1];});
	};

	var zoom = d3.zoom()
	.on("zoom", zoomed);

	// Container for all zoom-able elements
	var map = svg.append("g")
	.attr("id", "map")
	.call(zoom)
	.call(zoom.transform, d3.zoomIdentity
	.scale(0.08)
	.translate(6000, 6000));

	map.append("rect")
	.attr("class", "overlay")
	.attr("x", 0)
	.attr("y", 0)
	.attr("width", width)
	.attr("height", height);

	var sets = [
	{
	name: 'Central Europe',
	set: d3.set(['BEL', 'CHE', 'DEU', 'AUT', 'ESP', 'FRA', 'ATF', 'GBR', 'GGY', 'JEY', 'FLK', 'SGS', 'GRC', 'MLT', 'IRL', 'ITA', 'LUX', 'NLD', 'AND', 'POL', 'PRT', 'TUR', 'CYP', 'CYN', 'MON', 'ALD', 'IMN', 'LTU', 'LVA', 'EST', 'BLR', 'UKR', 'MDA', 'ROU', 'HUN', 'SVK', 'SVN', 'HRV', 'BIH', 'CZE', 'BGR', 'KOS', 'MKD', 'ALB', 'MNE', 'SRB']),
	},
	{
	name: 'Northern Europe',
	set: d3.set(['DNK', 'FRO', 'FIN', 'GRL', 'ISL', 'NOR', 'SWE'])
	},
	{
	name: 'North America',
	set: d3.set(['CAN', 'MEX', 'USA'])
	},
	{
	name: 'Caribbean',
	set: d3.set(['BLZ', 'CRI', 'CUB', 'GTM', 'HND', 'NIC', 'PAN', 'SLV', 'HTI', 'JAM', 'DOM', 'PRI', 'BHS', 'TCA', 'ATG', 'DMA', 'BRB', 'GRD'])
	},
	{
	name: 'South America',
	set: d3.set(['ARG', 'BOL', 'BRA', 'CHL', 'COL', 'ECU', 'FLK', 'GUY', 'PRY', 'PER', 'SUR', 'URY', 'VEN', 'TTO'])
	},
	{
	name: 'Africa',
	set: d3.set(['AGO', 'BDI', 'BEN', 'BFA', 'BWA', 'CAF', 'CIV', 'CMR', 'COD', 'COD', 'COG', 'COM', 'CPV', 'DJI', 'DZA', 'EGY', 'ERI', 'ETH', 'GAB', 'GHA', 'GIN', 'GMB', 'GNB', 'GNQ', 'KEN', 'LBR', 'LBY', 'LSO', 'MAR', 'MDG', 'MLI', 'MOZ', 'MRT', 'MUS', 'MWI', 'MYT', 'NAM', 'NER', 'NGA', 'REU', 'RWA', 'ESH', 'SDN', 'SDS', 'SEN', 'SHN', 'SHN', 'SLE', 'SOM', 'SOL', 'SSD', 'STP', 'STP', 'SWZ', 'SYC', 'TCD', 'TGO', 'TUN', 'TZA', 'TZA', 'UGA', 'ZAF', 'ZMB', 'ZWE'])
	},
	{
	name: 'South Pacific',
	set: d3.set(['AUS', 'NZL'])
	},
	{
	name: 'India',
	set: d3.set(['IND', 'BGD', 'LKA'])
	},
	{
	name: 'Orient',
	set: d3.set(['AZE', 'ARE', 'QAT', 'IRN', 'AFG', 'PAK', 'BHR', 'SAU', 'YEM', 'OMN', 'SYR', 'JOR', 'IRQ', 'KWT', 'ISR', 'LBN', 'PSX', 'PSR', 'GEO', 'ARM'])
	},
	{
	name: 'Russia',
	set: d3.set(['RUS', 'KAZ', 'UZB', 'TKM', 'KGZ', 'TJK'])
	},
	{
	name: 'Asia',
	set: d3.set(['BTN', 'CHN', 'JPN', 'IDN', 'MNG', 'NPL', 'MMR', 'THA', 'KHM', 'LAO', 'VNM', 'PRK', 'KOR', 'TWN', 'MYS', 'PNG', 'SLB', 'VUT', 'NCL', 'BRN', 'PHL', 'TLS', 'HKG', 'FJI', 'GUM', 'PLW', 'FSM', 'MNP', 'KAS'])
	}
	];

	var color = d3.scaleOrdinal()
	.domain([0, sets.length])
	.range(['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5']);

	var data = [0.1, 0.03, 0.15, 0.08, 0.14, 0.12, 0.06, 0.07, 0.09, 0.04, 0.12];

	var f = d3.format(".0%");


	d3.json("countries.json", function(error, world) {
	if (error) throw error;
	for (var i = 0; i < sets.length; i++) {
	map.append("path").datum(topojson.merge(world, world.objects.units.geometries.filter(function (d) {
	return sets[i].set.has(d.id);
	})))
	.attr('class', "boundary")
	.attr("d", path)
	// .attr({'data-name': sets[i].name})
	.style("fill", color(i));

	map.append("text").datum(topojson.merge(world, world.objects.units.geometries.filter(function (d) {
	return sets[i].set.has(d.id);
	})))
	.attr('class', "text-bg")
	.text(f(data[i]))
	.attr("x", function(d) {return path.centroid(d)[0];})
	.attr("y", function(d) {return path.centroid(d)[1];});

	map.append("text").datum(topojson.merge(world, world.objects.units.geometries.filter(function (d) {
	return sets[i].set.has(d.id);
	})))
	.attr('class', "text")
	.text(f(data[i]))
	.attr("x", function(d) {return path.centroid(d)[0];})
	.attr("y", function(d) {return path.centroid(d)[1];});
	}

	});

	// Set-up the export button
	d3.select('#saveButton').on('click', function(){
	var svgString = getSVGString(svg.node());
	svgString2Image( svgString, 2width, 2height, 'jpg', save ); // passes Blob and filesize String to the callback

	function save( dataBlob, filesize ){
	saveAs( dataBlob, 'world-map.jpg' ); // FileSaver.js function
	}
	});

	// Below are the functions that handle actual exporting:
	// getSVGString ( svgNode ) and svgString2Image( svgString, width, height, format, callback )
	function getSVGString( svgNode ) {
	svgNode.setAttribute('xlink', 'http://www.w3.org/1999/xlink');
	var cssStyleText = getCSSStyles( svgNode );
	appendCSS( cssStyleText, svgNode );

	var serializer = new XMLSerializer();
	var svgString = serializer.serializeToString(svgNode);
	svgString = svgString.replace(/(\w+)?:?xlink=/g, 'xmlns:xlink='); // Fix root xlink without namespace
	svgString = svgString.replace(/NS\d+:href/g, 'xlink:href'); // Safari NS namespace fix

	return svgString;

	function getCSSStyles( parentElement ) {
	var selectorTextArr = [];

	// Add Parent element Id and Classes to the list
	selectorTextArr.push( '#'+parentElement.id );
	for (var c = 0; c < parentElement.classList.length; c++)
	if ( !contains('.'+parentElement.classList[c], selectorTextArr) )
	selectorTextArr.push( '.'+parentElement.classList[c] );

	// Add Children element Ids and Classes to the list
	var nodes = parentElement.getElementsByTagName("*");
	for (var i = 0; i < nodes.length; i++) {
	var id = nodes[i].id;
	if ( !contains('#'+id, selectorTextArr) )
	selectorTextArr.push( '#'+id );

	var classes = nodes[i].classList;
	for (var c = 0; c < classes.length; c++)
	if ( !contains('.'+classes[c], selectorTextArr) )
	selectorTextArr.push( '.'+classes[c] );
	}

	// Extract CSS Rules
	var extractedCSSText = "";
	for (var i = 0; i < document.styleSheets.length; i++) {
	var s = document.styleSheets[i];

	try {
	if(!s.cssRules) continue;
	} catch( e ) {
	if(e.name !== 'SecurityError') throw e; // for Firefox
	continue;
	}

	var cssRules = s.cssRules;
	for (var r = 0; r < cssRules.length; r++) {
	if ( contains( cssRules[r].selectorText, selectorTextArr ) )
	extractedCSSText += cssRules[r].cssText;
	}
	}


	return extractedCSSText;

	function contains(str,arr) {
	return arr.indexOf( str ) === -1 ? false : true;
	}

	}

	function appendCSS( cssText, element ) {
	var styleElement = document.createElement("style");
	styleElement.setAttribute("type","text/css");
	styleElement.innerHTML = cssText;
	var refNode = element.hasChildNodes() ? element.children[0] : null;
	element.insertBefore( styleElement, refNode );
	}
	}


	function svgString2Image( svgString, width, height, format, callback ) {
	var format = format ? format : 'jpg';

	var imgsrc = 'data:image/svg+xml;base64,'+ btoa( unescape( encodeURIComponent( svgString ) ) ); // Convert SVG string to data URL

	var canvas = document.createElement("canvas");
	var context = canvas.getContext("2d");

	canvas.width = width;
	canvas.height = height;

	var image = new Image();
	image.onload = function() {
	context.clearRect ( 0, 0, width, height );
	context.drawImage(image, 0, 0, width, height);

	canvas.toBlob( function(blob) {
	var filesize = Math.round( blob.length/1024 ) + ' KB';
	if ( callback ) callback( blob, filesize );
	});


	};

	image.src = imgsrc;
	}

	</script>
	</body>