Class05

<!DOCTYPE html>
<meta charset="utf-8">
<title>class 3 - states</title>
<style>
body {
 position: absolute;
 margin: 0px;

}
svg {
 background-color: lightgreen;
}
.info {
 font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
 color: red;
 position: absolute;
 top: 450px;
 left: 800px;
}
path {
 fill: grey;
 stroke:#555555 ;
}
</style>

<body>
<script>
 var width = 960, height = 500;
 var data; 
 
 var colors = d3.scaleOrdinal()
    .domain( ["A", "B", "C", "D"] )
    .range(["#fe9929", "#ec7014", "#cc4c02", "#8c2d04"]);
 var legend = d3.legend()
    .translate([ width / 4 , height / 4 ])
    .colors(colors)
    .cb(function() { console.log("Done!"); });
 
 var svg = d3.select("body").append("svg")
   .attr("width", width)
   .attr("height", height)
   .on("mousemove", mousemoved);
 var layer = svg.append('g');
 var layer2= svg.append('g');
 
 layer2.call(legend);
 
 var info = d3.select("body").append("div")
   .attr("class", "info");
 var projection = d3.geoAlbersUsa();
 var path = d3.geoPath()
   .projection(projection);
 var pathQuake = d3.geoPath()
   .pointRadius(5)
   .projection(projection);

data = json.objects.us.geometries.map(function(d) { return topojson.feature(json, d); })
 
 layer.selectAll("path")
     .data(data)
   .enter()
     .append("path")
     .attr("d", path);
}
function mousemoved() {
 info.text(formatLocation(projection.invert(d3.mouse(this)), projection.scale()));
}
function formatLocation(p, k) {
 var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f");

}
  </script>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v2.min.js