Bradleykingz/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="world.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.js"></script>
    <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: "Open Sans", sans-serif;
    }
    .state {
      stroke-width: 1;
      stroke: darkslategrey;
      fill: white;
      transition: all 0.25s ease-in-out;
    }

    .state:hover {
      cursor: pointer;
      fill: #555555;
    }

    div.tooltip {
      position: absolute;
      text-align: center;
      width: 60px;
      min-height: 28px;
      padding: 8px 12px;
      font: 12px sans-serif;
      background: lightgray;
      border: 0px;
      border-radius: 8px;
      pointer-events: none;
    }
  </style>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    let worldMapPath = "https://raw.githubusercontent.com/Bradleykingz/working-with-d3/master/files/world.geo.json"
    const width = 960,
          height = 500;

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)

    const projection = d3.geoMercator()
        .translate([width / 2, window.innerHeight / 1.3])
        .scale([150]);

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

    d3.json(worldMapPath, (err, worldMap)=> {
      svg.selectAll('path')
        .data(worldMap.features)
        .enter()
        .append('path')
        .attr("d", geoPath)
        .style('transition', "all 0.2s ease-in-out")
        .attr('class', 'state');
    })


  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="world.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v2.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.js"></script>
	<style>
	body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	font-family: "Open Sans", sans-serif;
	}
	.state {
	stroke-width: 1;
	stroke: darkslategrey;
	fill: white;
	transition: all 0.25s ease-in-out;
	}

	.state:hover {
	cursor: pointer;
	fill: #555555;
	}

	div.tooltip {
	position: absolute;
	text-align: center;
	width: 60px;
	min-height: 28px;
	padding: 8px 12px;
	font: 12px sans-serif;
	background: lightgray;
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
	}
	</style>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	// Feel free to change or delete any of the code you see in this editor!
	let worldMapPath = "https://raw.githubusercontent.com/Bradleykingz/working-with-d3/master/files/world.geo.json"
	const width = 960,
	height = 500;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)

	const projection = d3.geoMercator()
	.translate([width / 2, window.innerHeight / 1.3])
	.scale([150]);

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

	d3.json(worldMapPath, (err, worldMap)=> {
	svg.selectAll('path')
	.data(worldMap.features)
	.enter()
	.append('path')
	.attr("d", geoPath)
	.style('transition', "all 0.2s ease-in-out")
	.attr('class', 'state');
	})


	</script>
	</body>