Old school D3 from simpler times

All examples By author By category About

janwillemtulp

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!

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