Old school D3 from simpler times

All examples By author By category About

aaronboogaard

Full window Github gist

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

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

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

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