piwodlaiwo/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  background: white;
}

.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}

.fill {
  fill: #fff;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.land {
  fill: #222;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

</style>
<body>
  <div id="map"></div>
<script src="https://unpkg.com/d3@4"></script>
<script src="https://unpkg.com/d3-geo-projection@2"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script>

    const map = d3.select("#map");
    const width = map.node().getBoundingClientRect().width;
    const height = width / 2;

    const color = d3.scaleThreshold()
	  .domain(d3.range(9))
    .range(d3.schemeCategory10);

    const projection = d3.geoNaturalEarth2().rotate([-11.5,0]);

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

    const zoom = d3.zoom()
    .scaleExtent([1, 40])
    .translateExtent([[0,0], [width, height]])
    .extent([[0, 0], [width, height]])
    .on("zoom", zoomed);

    const svg = map.append("svg")
    .attr("xmlns:xlink","http://www.w3.org/1999/xlink")
    .attr("width", width)
    .attr("height", height);

    const g = svg.append('g');

    /*
    const graticule = d3.geoGraticule();
    */
    const graticule = d3.geoGraticule10();
    //console.log(grat.coordinates[4]=grat.coordinates[3]);

    svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(error, world) {
  if (error) throw error;

    svg.selectAll("path")
       .data(topojson.feature(world, world.objects.countries).features)
       .enter().append("path")
       .attr("class",".border")
       .attr('fill', d => color( Math.random() * 10 ))
       .attr("d", path);

});


function zoomed(){
  g.attr("transform", d3.event.transform);
}
  </script>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	background: white;
	}

	.stroke {
	fill: none;
	stroke: #000;
	stroke-width: 1.5px;
	}

	.fill {
	fill: #fff;
	}

	.graticule {
	fill: none;
	stroke: #777;
	stroke-width: .5px;
	stroke-opacity: .5;
	}

	.land {
	fill: #222;
	}

	.boundary {
	fill: none;
	stroke: #fff;
	stroke-width: .5px;
	}

	</style>
	<body>
	<div id="map"></div>
	<script src="https://unpkg.com/d3@4"></script>
	<script src="https://unpkg.com/d3-geo-projection@2"></script>
	<script src="https://unpkg.com/topojson-client@3"></script>
	<script>

	const map = d3.select("#map");
	const width = map.node().getBoundingClientRect().width;
	const height = width / 2;

	const color = d3.scaleThreshold()
	.domain(d3.range(9))
	.range(d3.schemeCategory10);

	const projection = d3.geoNaturalEarth2().rotate([-11.5,0]);

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

	const zoom = d3.zoom()
	.scaleExtent([1, 40])
	.translateExtent([[0,0], [width, height]])
	.extent([[0, 0], [width, height]])
	.on("zoom", zoomed);

	const svg = map.append("svg")
	.attr("xmlns:xlink","http://www.w3.org/1999/xlink")
	.attr("width", width)
	.attr("height", height);

	const g = svg.append('g');

	/*
	const graticule = d3.geoGraticule();
	*/
	const graticule = d3.geoGraticule10();
	//console.log(grat.coordinates[4]=grat.coordinates[3]);

	svg.append("path")
	.datum(graticule)
	.attr("class", "graticule")
	.attr("d", path);

	d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(error, world) {
	if (error) throw error;

	svg.selectAll("path")
	.data(topojson.feature(world, world.objects.countries).features)
	.enter().append("path")
	.attr("class",".border")
	.attr('fill', d => color( Math.random() * 10 ))
	.attr("d", path);

	});


	function zoomed(){
	g.attr("transform", d3.event.transform);
	}
	</script>
	</body>