All examples By author By category About

vswetha01

Full window Github gist

Final Project Earthquake Data visualization

The dataset comes from USGS for the earthquakes. The graphic shows the earthquakes in the world over the past 15 years. The magnitudes range from 6.0 and above.Though the earthquake in Nepal killed over 5,000 people and counting, the death toll still hasn't approached the hundreds of thousands killed in history's deadliest quakes. Early earthquake detection reduces the damage.

Process:

The dataset is from USGS http://earthquake.usgs.gov/earthquakes. The Columns in my database are time, latitude, longitude, depth, magnitude, place. I transformed the data using the Python pandas framework to develop Exploratory plots. I Grouped the data using Pnadas dataframe.

<html>

<title>Earthquake Map</title>
    <link rel="stylesheet" href="style.css">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/c3/0.1.29/c3.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.1.29/c3.css" rel="stylesheet" type="text/css">
 
  </head>
  <style>
  /*svg {
  
}*/
body, html {
      width: 960px;
      height: 100%;
    }

svg {
      width:100%;
      height:100%;
      float: left;
      font: 10px sans-serif;
    }
/*svg1 {
    background-color: #111;
    cursor: pointer;
  }
*/
  .land {
    fill: #333;
    stroke: #555;
    stroke-width: 1;
  }

.earthquake {
    fill-opacity: 0.6;
  }

path { 
    stroke-width: 1;
    fill: none;
}

#Stream1, #Nebo1D {
    stroke: #009390;
}

#Stream1Legend, #Nebo1DLegend {
    fill: #009390;
}

#Stream2, #Nebo2D {
    stroke: #8dc63f;
}

#Stream2Legend, #Nebo2DLegend {
    fill: #8dc63f;
}

#Stream3, #Nebo1S {
    stroke: #132d46;
}

#Stream3Legend, #Nebo1SLegend {
    fill: #132d46;
}

#Stream4, #Nebo2S {
    stroke: #aaa813;
}

#Stream4Legend, #Nebo2SLegend {
    fill: #aaa813;
}

#Stream5, #Nebo3 {
    stroke: #619dd4;
}

#Stream5Legend, #Nebo3Legend {
    fill: #619dd4;
}

.pn1d, .pn2d {
  fill: none;
  clip-path: url(#clip);
}

.pn1d {
  stroke: #009390;
}

.pn2d {
  stroke: #1b4164;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}
  </style>
  <div id="chart1"></div>
  <div id="chart2"></div>
  <body>
    
      
   <div id="chart_bar" style="float:left;height:300px;width:30%;" ></div>
   <div id="chart_donut" style="float:left;height:300px;width:30%" ></div>
   <div id="chart_year" style="float:left;height:300px;width:30%" >
     <text x="50%" y="50" id="heading" font-size="1.5em" text-anchor="middle" font-family="futura">Magnitude and Depth by year</text>
   </div>

// var chart = c3.generate({
//     data: {
//         columns: [
//             ['Lulu', 50],
//             ['Olaf', 50],
//         ],
//         type : 'donut'
//     },
//     donut: {
//         title: "Dogs love:",
//     }
// });

var width1  = 960,
        height1 = 480;

// Create a selection for the container div and append the svg element
    var div = d3.select('#chart1'),
        svg1 = div.append('svg');

svg1.append('text')
    .attr('x', svg1.node().getBoundingClientRect().width / 2)
    .attr('y', 20)
    .attr('text-anchor', 'middle')
    .style('font-size', '1.9em')
    .text('Earthquakes 2000-2015');

//var parseDate_eq = d3.time.format("%d/%m/%y %H:%M").parse;
    svg1.append('g').classed('map', true);
    svg1.append('g').classed('dots', true);

// Set the size of the SVG element
    svg1.attr('width', width1).attr('height', height1);

// var zoom = d3.behavior.zoom()
    // .scaleExtent([1, 8])
    // .on("zoom", zoomed);

// svg1
//     .call(zoom)
//     .call(zoom.event);
    // Create and configure a geographic projection
    var projection = d3.geo.equirectangular()
      .translate([width1 / 2, height1 / 2]);

// Create and configure a path generator
    var pathGenerator = d3.geo.path()
      .projection(projection);

// Retrieve the geographic data asynchronously
    d3.json('land.geojson', function(err, data) {

// Throw errors on getting or parsing the file
      if (err) { throw err; }

// Land
      var land = svg1.select('g.map').selectAll('path.land').data([data]);

land.enter().append('path').classed('land', true);
      land.attr('d', pathGenerator);
      land.exit().remove();
    });

// function zoomed() {
//   svg1.select('g').attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
// }
// d3.select(self.frameElement).style("height", height + "px");
// Load the Earthquake data
    // https://earthquake.usgs.gov/earthquakes/search/
    // https://earthquake.usgs.gov/earthquakes/map/doc_aboutdata.php

var drawChart = function(csvdata){
    //d3.csv('earthquakes.csv', function(err, csvdata) {

//if (err) { throw err; }

// Parse the data
      csvdata.forEach(function(d) {
        d.coords = [+d.longitude, +d.latitude];
        d.magnitude = +d.mag;
      });

csvdata.sort(function(a, b) {
        return a.magnitude > b.magnitude ? -1 : 1;
      });

// Radius scale
      var rScale = d3.scale.sqrt()
        .domain(d3.extent(csvdata, function(d) { return d.magnitude; }))
        .range([1, 10]);

var cScale = d3.scale.sqrt()
        .domain(rScale.domain())
        .range(['#ECD078', '#C02942']);

var circles = svg1.select('g.dots').selectAll('circle.earthquake').data(csvdata);

circles.enter().append('circle')
        .classed('earthquake', true);

circles
        .attr('r', function(d) { return rScale(d.magnitude); })
        .attr('cx', function(d) { return projection(d.coords)[0]; })
        .attr('cy', function(d) { return projection(d.coords)[1]; })
        .attr('fill', function(d) { return cScale(d.magnitude); });

circles.exit().remove();
    //});
};

var mydata =  {};
d3.csv('earthquakes.csv', function(err, eqdata) {
      //debugger;
      if (err) { throw err; }
      drawChart(eqdata);
      mydata =  eqdata;

//
//       0
  
//   Date {Tue Nov 29 2011 02:44:46 GMT-0800 (PST)}
// 1
  
//   Date {Mon Dec 24 2012 16:52:09 GMT-0800 (PST)}

});

console.log(mydata);

var svg = d3.select("#chart2").append("svg");

svg.append('text')
    .attr('x', svg.node().getBoundingClientRect().width / 2)
    .attr('y', 15)
    .attr('text-anchor', 'middle')
    .style('font-size', '1.4em')
    .text('Earthquakes 2000-2015');

// console.log(document.getElementById("chart1").width.animVal.value);
// console.log(document.getElementById("chart1").height.animVal.value);
var marginFocus = {top: 290, right: 10, bottom: 80, left: 40},
    marginContext = {top: 10, right: 10, bottom: 300, left: 40},// 910 390 50 550  {top: 430, right: 10, bottom: 170, left: 40}
    width = 960 - marginFocus.left - marginFocus.right,
    heightFocus = 480 - marginFocus.top - marginFocus.bottom,
    heightContext = 480 - marginContext.top - marginContext.bottom;
    legendOffset = 550;
    console.log(width, heightFocus,heightContext,legendOffset);

var parseDate = d3.time.format("%d/%m/%y %H:%M").parse;

var xFocus = d3.time.scale().range([0, width]),
    xContext = d3.time.scale().range([0, width]),
    yFocus = d3.scale.linear().range([heightFocus, 0]),
    yContext = d3.scale.linear().range([heightContext, 0]);

var xAxisFocus = d3.svg.axis().scale(xFocus).orient("bottom"),
    xAxisContext = d3.svg.axis().scale(xContext).orient("bottom"),
    yAxisFocus = d3.svg.axis().scale(yFocus).orient("left");

var levelFocus = d3.svg.line()
    .interpolate("linear")
    .x(function(d) { return xFocus(d.date); })
    .y(function(d) { return yFocus(d.level); });

var levelContext = d3.svg.line()
    .interpolate("linear")
    .x(function(d) { return xContext(d.date); })
    .y(function(d) { return yContext(d.level); });

// .attr("width", width + marginFocus.left + marginFocus.right)
//     .attr("height", heightFocus + marginFocus.top + marginFocus.bottom);

svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", heightFocus);

var focus = svg.append("g")
    .attr("class", "focus")
    .attr("transform", "translate(" + marginFocus.left + "," + marginFocus.top + ")");

var context = svg.append("g")
    .attr("class", "context")
    .attr("transform", "translate(" + marginContext.left + "," + marginContext.top + ")");

d3.csv("PiezoNeboNestSimple.csv", function(error, data) {
    data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.level = +d.level;
    });

xFocus.domain(d3.extent(data.map(function(d) { return d.date; })));
  yFocus.domain([d3.min(data.map(function(d) { return d.level; })) -2,0]);
  xContext.domain(xFocus.domain());
  yContext.domain(yFocus.domain());

// Nest the entries by piezo
    var dataNest = d3.nest()
        .key(function(d) {return d.piezo;})
        .entries(data);

legendSpace = width/dataNest.length; // spacing for legend // ******

var brush = d3.svg.brush()
    .x(xContext)
    .on("brush", brushed);

focus.selectAll("g").data(dataNest)
    .enter()
    .append("g")
    .attr("id", function(d) { return d.key.replace(/\s+/g, '') })  //the replace stuff is getting rid of spaces
    .append("path")
    .attr("class", "line")
    .attr("d", function(d) { return levelFocus(d.values); });

context.selectAll("g").data(dataNest)
    .enter()
    .append("g")
    .attr("class", "line")
    .attr("id", function(d) { return d.key.replace(/\s+/g, '') })  //the replace stuff is getting rid of spaces
    .append("path")
    .attr("d", function(d) { return levelContext(d.values); });

focus.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + heightFocus + ")")
      .call(xAxisFocus);

focus.append("g")
      .attr("class", "y axis")
      .call(yAxisFocus);

context.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + heightContext + ")")
      .call(xAxisContext);

context.append("g")
      .attr("class", "x brush")
      .call(brush)
    .selectAll("rect")
      .attr("y", -6)
      .attr("height", heightContext + 0);

function brushed() {
  console.log(brush.extent());
  xFocus.domain(brush.empty() ? xContext.domain() : brush.extent());
  focus.selectAll("path.line").attr("d", function(d) { return levelFocus(d.values); }); 
  focus.select(".x.axis").call(xAxisFocus);

var filteredData = mydata.filter(function(entry){
        //return parseDate(entry.time)

return (Date.parse(entry.time) >= Date.parse(brush.extent()[0])) && (Date.parse(entry.time) < Date.parse(brush.extent()[1]));
      });

drawChart(filteredData);

}

});

var chart = c3.generate({
    bindto: '#chart_bar',
    data: {
        x:'x',
        columns: [
        
            ['x', 'Indonesia', 'Japan', 'PapuaNew Guinea', 'Chile', 'Vanuatu', 'Fiji region', 'Tonga' , 'Mexico','Russia'],
             [ '# of Earthquakes',257, 203, 174, 120, 83, 72, 54, 53, 52]
        ],
        // ,

// x:"country",
        // url: 'distbycountry_top25.csv',
        type: 'bar'
        
    },
    title: {
        text: "Earthquakes by country:",
    },
    color: {
        pattern: ['#dbdb8d']
        //, '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5','#aec7e8', '#ff7f0e', ]
    },

axis: {
        x: {
            type: 'categorized',
            categories:['Indonesia', 'Japan', 'PapuaNew Guinea', 'Chile', 'Vanuatu', 'Fiji region', 'Tonga' , 'Mexico','Russia'],
            tick: {
                rotate: 75,
                multiline: false
            }
            //,
            //height: 130
            
        }
    }
});

d3.select('#chart_bar svg').append('text')
    .attr('x', d3.select('#chart_bar svg').node().getBoundingClientRect().width / 2)
    .attr('y', 15)
    .attr('text-anchor', 'middle')
    .style('font-size', '1.4em')
    .text('Earthquakes by country');

var chart = c3.generate({
    bindto: '#chart_donut',
    data: {
       // x:'x',
        columns: [
        
            ['6.00 - 7.00', 2281], ['7.0-8.0', 233] , ['8.0-9.0', 21]
            
        ],
        type: 'donut'
        
    },
    // donut: {
    //     title: "Earthquakes by magnitude:",
    // },
    color: {
        pattern: ['#dbdb8d','#8c564b', '#17becf']//#dbdb8d
    },
});

d3.select('#chart_donut svg').append('text')
    .attr('x', d3.select('#chart_donut svg').node().getBoundingClientRect().width / 2)
    .attr('y', 15)
    .attr('text-anchor', 'middle')
    .style('font-size', '1.4em')
    .text('Earthquakes by magnitude');

var chart = c3.generate({
    bindto: '#chart_year',
    data: {
       url: 'year_max_depth_mag.csv',
       type: 'bar'
    },
    
    color: {
        pattern: ['#dbdb8d', '#17becf' ]//'#8c564b'
    },
    axis: {
        x: {
            type: 'categorized',
          categories: [ '2000', '2001', '2002', '2003', '2004', '2005', '2006' , '2007','2008', '2009','2010', '2011', '2012', '2013', '2014', '2015']
        }
    }
});

d3.select('#chart_year svg').append('text')
    .attr('x', 144)
    .attr('y', 15)
    .attr('text-anchor', 'middle')
    .style('font-size', '1.4em')
    .text('Maximum mag/depth by year');

</script>

</body>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/c3/0.1.29/c3.js