Aardbevingen NL - DatavizFest

Basic starting boilerplate for DatavizFest participants who want to work with the Earthquake data using D3.

This setup already loads in the data, and has two very basic approaches: a time based approach, and a geo based approach.

Just uncomment the lines for the approach that you want to use to get started, or you can come up with your own approach of course!

forked from janwillemtulp's block: Aardbevingen NL - DatavizFest

forked from anonymous's block: Aardbevingen NL - DatavizFest

<!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)

</script>
</body>

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

https://d3js.org/d3-scale-chromatic.v1.min.js