D3 Examples - dataviz

xxxxxxxxxx
 
<!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.dichth/200)})
        .style("fill", function(d) { return qType(d.depth)})
        .style("opacity", 0.3)
    }
    
        d3.csv("aarbevingen_gem_ind.csv", function(row) {
      return {
        date: d3.timeParse("%e-%m-%Y %H:%M:%S")(row.DD_MM_YYY),
        depth: +row.DEPTH,
        evalMode: row.EVALMODE,
        lat: +row.X.replace(",", "."),
        location: row.LOCATION,
        lon: +row.Y.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,
        dichth: row.BEV_DICHTH
      };
    },
    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>
​
    