qaisarmehmood/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from anonymous's block: fresh block

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

body {
  position: absolute;
  margin: 0px;
  font: 16px sans-serif;
}

svg {
  background-color: #4682b4;
}

.info {
  color: #000;
  position: absolute;
  top: 450px;
  left: 800px;
}

path {
  fill: #555555;
  stroke: #aaaaaa;
}

path.quake {
  fill: crimson;
}

</style>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/d3-tile.v0.0.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>

<body>
<script>

var width = 960, height = 500;

var data;  // declare a global variable

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .on("mousemove", mousemoved);

var layer1 = svg.append("g");
var layer2 = svg.append("g");

var info = d3.select("body").append("div")
    .attr("class", "info");

// NEW: Title
svg.append('text')
    .attr('x', width / 2)
    .attr('y', "1.5em")
    .style('font-size', '1.5em')
    .style('text-anchor', 'middle')
    .text('Earthquakes in the last week')

var projection = d3.geoAlbersUsa();

var path = d3.geoPath()
    .projection(projection);
var Oklahoma = "https://raw.githubusercontent.com/deldersveld/topojson/master/countries/us-states/OK-40-oklahoma-counties.json"

d3.json(Oklahoma, function(error, Oklahoma) {
  if (error) throw error;

  var tiles = d3.tile()
      .size([width, height])
      .scale(projection.scale() * tau)
      .translate(projection([0, 0]))
      ();

  svg.selectAll("image")
      .data(tiles)
    .enter().append("image")
      .attr("xlink:href", function(d) { return "http://" + "abc"[d[1] % 3] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })

      .attr("x", function(d) { return (d[0] + tiles.translate[0]) * tiles.scale; })
      .attr("y", function(d) { return (d[1] + tiles.translate[1]) * tiles.scale; })
      .attr("width", tiles.scale)
      .attr("height", tiles.scale);


});
   //Earthquake map
var base = "https://gist.githubusercontent.com/pbogden/935370a5272acff2618b/raw/f4d102d819066bb21a0021b4cbab6502e86bf587/";
  var usgs = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";

  // Read and plot the earthquake data
var url = base + "quakes.json";
d3.json(url, plotQuakes);
//d3.json(usgs, plotQuakes);

  // Read and plot the state & county boundaries
d3.json(base + "ok.json", plotState);
function plotQuakes(error, json) {
  if (error) console.log(error);

  // Assign the json to a global so we can manipulate it in the console
  data = json;
  // Filter the small earthquakes
  var features = data.features.filter(function(d) { return (+ d.properties.mag >= smallest) });

  var layer2 = svg.append("g");

  // Plot the earthquakes
layer2.selectAll("path.quake")
      .data(features)
    .enter().append("path")
      .attr("class", "quake")
      .attr("d", path)
}
function plotState(error, ok) {
  if (error) console.log(error);

  var objects = ok.objects.ok;
  var all = topojson.merge(ok, objects.geometries);
  var layer1 = svg.append("g");
layer1.append("path")
      .datum(all)
      .attr("class", "state")
      .attr("d", path);

layer1.append("path")
      .datum(topojson.mesh(ok, objects, function(a, b) { return a !== b; }))
      .attr("class", "county-border")
      .attr("d", path);
 }


</script>

</body>


</script>
	!DOCTYPE html>
	<meta charset="utf-8">
	<title>Class 5</title>
	<style>

	body {
	position: absolute;
	margin: 0px;
	font: 16px sans-serif;
	}

	svg {
	background-color: #4682b4;
	}

	.info {
	color: #000;
	position: absolute;
	top: 450px;
	left: 800px;
	}

	path {
	fill: #555555;
	stroke: #aaaaaa;
	}

	path.quake {
	fill: crimson;
	}

	</style>

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="//d3js.org/d3-tile.v0.0.min.js"></script>
	<script src="https://d3js.org/topojson.v2.min.js"></script>

	<body>
	<script>

	var width = 960, height = 500;

	var data; // declare a global variable

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.on("mousemove", mousemoved);

	var layer1 = svg.append("g");
	var layer2 = svg.append("g");

	var info = d3.select("body").append("div")
	.attr("class", "info");

	// NEW: Title
	svg.append('text')
	.attr('x', width / 2)
	.attr('y', "1.5em")
	.style('font-size', '1.5em')
	.style('text-anchor', 'middle')
	.text('Earthquakes in the last week')

	var projection = d3.geoAlbersUsa();

	var path = d3.geoPath()
	.projection(projection);
	var Oklahoma = "https://raw.githubusercontent.com/deldersveld/topojson/master/countries/us-states/OK-40-oklahoma-counties.json"

	d3.json(Oklahoma, function(error, Oklahoma) {
	if (error) throw error;

	var tiles = d3.tile()
	.size([width, height])
	.scale(projection.scale() * tau)
	.translate(projection([0, 0]))
	();

	svg.selectAll("image")
	.data(tiles)
	.enter().append("image")
	.attr("xlink:href", function(d) { return "http://" + "abc"[d[1] % 3] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })

	.attr("x", function(d) { return (d[0] + tiles.translate[0]) * tiles.scale; })
	.attr("y", function(d) { return (d[1] + tiles.translate[1]) * tiles.scale; })
	.attr("width", tiles.scale)
	.attr("height", tiles.scale);


	});
	//Earthquake map
	var base = "https://gist.githubusercontent.com/pbogden/935370a5272acff2618b/raw/f4d102d819066bb21a0021b4cbab6502e86bf587/";
	var usgs = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";

	// Read and plot the earthquake data
	var url = base + "quakes.json";
	d3.json(url, plotQuakes);
	//d3.json(usgs, plotQuakes);

	// Read and plot the state & county boundaries
	d3.json(base + "ok.json", plotState);
	function plotQuakes(error, json) {
	if (error) console.log(error);

	// Assign the json to a global so we can manipulate it in the console
	data = json;
	// Filter the small earthquakes
	var features = data.features.filter(function(d) { return (+ d.properties.mag >= smallest) });

	var layer2 = svg.append("g");

	// Plot the earthquakes
	layer2.selectAll("path.quake")
	.data(features)
	.enter().append("path")
	.attr("class", "quake")
	.attr("d", path)
	}
	function plotState(error, ok) {
	if (error) console.log(error);

	var objects = ok.objects.ok;
	var all = topojson.merge(ok, objects.geometries);
	var layer1 = svg.append("g");
	layer1.append("path")
	.datum(all)
	.attr("class", "state")
	.attr("d", path);

	layer1.append("path")
	.datum(topojson.mesh(ok, objects, function(a, b) { return a !== b; }))
	.attr("class", "county-border")
	.attr("d", path);
	}


	</script>

	</body>


	</script>