NieneB/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    var margin = { top: 20, right: 20, bottom: 20, left: 20 };
		var width = 960 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;

    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
    	.attr("transform", "translate(" + margin.left + ", " + margin.top + ")")


    var data = [];

    // UNCOMMENT THE LINES BELOW FOR GEO BASED APPROACH
//     var lat = d3.scaleLinear()
//     	.range([height, 0])

//     var lon = d3.scaleLinear();

//     var mag = d3.scaleSqrt()
//     	.range([1, 5])

    // UNCOMMENT THE LINES BELOW FOR TIME BASED APPROACH
//     var date = d3.scaleTime()
//     	.range([0, width])

//     var mag2 = d3.scaleLinear()
//     	.range([height, 0])

//     var depth = d3.scaleSqrt()
//     	.range([0, 10])

//     var qType = d3.scaleOrdinal()
//     	.range(d3.schemeCategory10)

    function update() {

    }

    function render() {
      var quake = svg.selectAll(".quake")
      	.data(data)
      // UNCOMMENT THE LINES BELOW FOR GEO APPROACH
//       quake.enter().append("circle")
//       	.attr("class", "quake")
//       	.attr("cx", function(d) { return lon(d.lon)})
//       	.attr("cy", function(d) { return lat(d.lat)})
//       	.attr("r", function(d) { return mag(d.mag)})
//       	.style("fill", "red")
//       	.style("opacity", 0.1)

      // UNCOMMENT THE LINES BELOW FOR TIME BASED APPROACH
//       quake.enter().append("circle")
//       	.attr("class", "quake")
//       	.attr("cx", function(d) { return date(d.date)})
//       	.attr("cy", function(d) { return mag2(d.mag)})
//       	.attr("r", function(d) { return depth(d.depth)})
//       	.style("fill", function(d) { return qType(d.type)})
//       	.style("opacity", 0.3)
    }

		d3.tsv("2017_06_Aardbeving_NL.txt", function(row) {
      return {
        date: d3.timeParse("%e-%m-%Y %H:%M:%S")(row.DD_MM_YYY),
        depth: +row.DEPTH,
        evalMode: row.EVALMODE,
        lat: +row.LAT.replace(",", "."),
        location: row.LOCATION,
        lon: +row.LON.replace(",", "."),
        mag: +row.MAG.replace(",", "."),
        objectId: +row.OBJECTID,
        time_string: row.TIME,
        time_hours: +row.TIME.split(":")[0],
        time_minutes: +row.TIME.split(":")[1],
        type: row.TYPE,
      };
    },
    function(result) {
      data = result;

      // UNCOMMENT LINES BELOW FOR GEO APPROACH
//       lat.domain(d3.extent(data, function(d) { return d.lat; }))
//       lon.domain(d3.extent(data, function(d) { return d.lon; }))
//       lon.range([0, ((lon.domain()[1] - lon.domain()[0]) * height) / (lat.domain()[1] - lat.domain()[0])])
// 			mag.domain(d3.extent(data, function(d) { return d.mag}))

      // UNCOMMENT LINES BELOW FOR TIME BASED APPROACH
//       mag2.domain(d3.extent(data, function(d) { return d.mag}))
//       date.domain(d3.extent(data, function(d) { return d.date}))
//       depth.domain(d3.extent(data, function(d) { return d.depth}))

      update();
      render();
    })

  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	var margin = { top: 20, right: 20, bottom: 20, left: 20 };
	var width = 960 - margin.left - margin.right;
	var height = 500 - margin.top - margin.bottom;

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + ", " + margin.top + ")")


	var data = [];

	// UNCOMMENT THE LINES BELOW FOR GEO BASED APPROACH
	// var lat = d3.scaleLinear()
	// .range([height, 0])

	// var lon = d3.scaleLinear();

	// var mag = d3.scaleSqrt()
	// .range([1, 5])

	// UNCOMMENT THE LINES BELOW FOR TIME BASED APPROACH
	// var date = d3.scaleTime()
	// .range([0, width])

	// var mag2 = d3.scaleLinear()
	// .range([height, 0])

	// var depth = d3.scaleSqrt()
	// .range([0, 10])

	// var qType = d3.scaleOrdinal()
	// .range(d3.schemeCategory10)

	function update() {

	}

	function render() {
	var quake = svg.selectAll(".quake")
	.data(data)
	// UNCOMMENT THE LINES BELOW FOR GEO APPROACH
	// quake.enter().append("circle")
	// .attr("class", "quake")
	// .attr("cx", function(d) { return lon(d.lon)})
	// .attr("cy", function(d) { return lat(d.lat)})
	// .attr("r", function(d) { return mag(d.mag)})
	// .style("fill", "red")
	// .style("opacity", 0.1)

	// UNCOMMENT THE LINES BELOW FOR TIME BASED APPROACH
	// quake.enter().append("circle")
	// .attr("class", "quake")
	// .attr("cx", function(d) { return date(d.date)})
	// .attr("cy", function(d) { return mag2(d.mag)})
	// .attr("r", function(d) { return depth(d.depth)})
	// .style("fill", function(d) { return qType(d.type)})
	// .style("opacity", 0.3)
	}

	d3.tsv("2017_06_Aardbeving_NL.txt", function(row) {
	return {
	date: d3.timeParse("%e-%m-%Y %H:%M:%S")(row.DD_MM_YYY),
	depth: +row.DEPTH,
	evalMode: row.EVALMODE,
	lat: +row.LAT.replace(",", "."),
	location: row.LOCATION,
	lon: +row.LON.replace(",", "."),
	mag: +row.MAG.replace(",", "."),
	objectId: +row.OBJECTID,
	time_string: row.TIME,
	time_hours: +row.TIME.split(":")[0],
	time_minutes: +row.TIME.split(":")[1],
	type: row.TYPE,
	};
	},
	function(result) {
	data = result;

	// UNCOMMENT LINES BELOW FOR GEO APPROACH
	// lat.domain(d3.extent(data, function(d) { return d.lat; }))
	// lon.domain(d3.extent(data, function(d) { return d.lon; }))
	// lon.range([0, ((lon.domain()[1] - lon.domain()[0]) * height) / (lat.domain()[1] - lat.domain()[0])])
	// mag.domain(d3.extent(data, function(d) { return d.mag}))

	// UNCOMMENT LINES BELOW FOR TIME BASED APPROACH
	// mag2.domain(d3.extent(data, function(d) { return d.mag}))
	// date.domain(d3.extent(data, function(d) { return d.date}))
	// depth.domain(d3.extent(data, function(d) { return d.depth}))

	update();
	render();
	})

	</script>
	</body>