USA earthquake data from year 1900

This data is from The USGS Earthquake Hazards Program.

This dataset is about U.S earthquake incidents from year 1900 which the magnitude of the earthquake are larger than 5.5

forked from loveice622's block: USA earthquake data from year 1900

forked from loveice622's block: earth-USA earthquake data from year 1900

forked from Mike Bostock's block: earth-USA earthquake data from year 1900

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

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

.land {
  fill: #222;
}

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

.state-boundary {
  fill: none;
  stroke: #fff;
}

.head {
    font-size: 20pt;
    font-family: 'Gill Sans MT';
    alignment-baseline: middle;
    fill: #000000;
  }
  
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
 
<script>

var width = 960,
    height = 550;

var projection = d3.geoAlbers()
    .rotate([96, 0])
    .center([-.6, 38.7])
    .parallels([29.5, 45.5])
    .scale(1070)
    .translate([width / 2, height / 2])
    .precision(.1);

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

var graticule = d3.geoGraticule()
    .extent([[-98 - 45, 38 - 45], [-98 + 45, 38 + 45]])
    .step([5, 5]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
  
 svg.append('text')
        .attr('class', 'head')
        .attr('x', 230)
        .attr('y', 20)
        .text('USA earthquake data from year 1900');

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

d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json", function(error, us) {
  if (error) throw error;

svg.insert("path", ".graticule")
      .datum(topojson.feature(us, us.objects.land))
      .attr("class", "land")
      .attr("d", path);

svg.insert("path", ".graticule")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "state-boundary")
      .attr("d", path);
});
  
  
  var parseTime  = d3.timeParse("%Y-%m-%d")
    
  var formatTime = d3.timeFormat("%Y");
    
  d3.csv("us-earthquake-from1900.csv", function(d){
    
  
  // format the data
  d.forEach(function(d) {
      
      d.time=parseTime(d.time.split('T')[0])
      console.log(formatTime(d.time))
      
  });
  
	for(i = 0; i < d.length; i ++){
    
           
		svg.append("circle")
			.attr("cx", projection([d[i].longitude,d[i].latitude])[0])
			.attr("cy", projection([d[i].longitude,d[i].latitude])[1])
			.attr("r", (d[i].mag-5)*4)
			.style("fill", "red")
					
	}
})

</script>

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

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