block by rveciana 6832422

Crisi sísmica de la costa de Vinaròs

Full Screen

Aquesta animació representa els sismes davant la costa de Vinaròs des de mitjans de setembre.

L’estrella indica la posició aproximada de la planta Castor, situada segons les diferents fonts a 22 quilòmetres de la costa davant de Vinaròs. Els números dins els cercles representen la magnitud del sisme en l’escala de Richter.

Les dades de les magnituds i epicentres estan tretes de la pàgina de l’Institut Geològic de Catalunya.

Entrada al blog per entendre la part tècnica.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.stroke {
  fill: none;
  stroke: #000;
  stroke-width: .5;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/d3.geo.tile.v0.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
/**
Based on Mike Bostock's //bl.ocks.org/mbostock/4150951
*/
var width = 960,
    height = 500;

var projection = d3.geo.mercator()
    .center([0.5491, 40.4942])
    .scale(20000);

var path = d3.geo.path()
    .projection(projection);

var tile = d3.geo.tile()
    .scale(projection.scale() * 2 * Math.PI)
    .translate(projection([0, 0]))
    .zoomDelta((window.devicePixelRatio || 1) - .5);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

  var tiles = tile();

  var defs = svg.append("defs");

var magnitudeScale = d3.scale.linear().domain([2,5]).range([5,30]);
d3.json("data.json", function(error, locations) {

  svg.append("g")

    .selectAll("image")
      .data(tiles)
    .enter().append("image")
      .attr("xlink:href", function(d) {
        return "https://a.tiles.mapbox.com/v3/mapbox.world-bright/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
      .attr("width", Math.round(tiles.scale) + 1)
      .attr("height", Math.round(tiles.scale) + 1)
      .attr("x", function(d) { return Math.round((d[0] + tiles.translate[0]) * tiles.scale); })
      .attr("y", function(d) { return Math.round((d[1] + tiles.translate[1]) * tiles.scale); });

  svg.append("g")
      .append('path')
      .attr("d","m 0,0 -8.47858,-5.22254 -8.31623,5.47756 2.34696,-9.67752 -7.77927,-6.21653 9.92909,-0.75852 3.50829,-9.31953 3.78972,9.20873 9.94748,0.45679 -7.58687,6.44982 z")
      .attr("stroke","black")
      .attr("stroke-width",2)
      .style("fill", d3.rgb(90, 90, 90))
      .attr("transform", "translate("+projection([0.66879, 40.33503])[0]+","+projection([0.66879, 40.33503])[1]+")");

  var locationsG = svg.append("g");


  function addLocation(loc){
    locationsG.append('circle')
      .attr('class','location')
      .attr("r", 5)
      .attr("cx", projection([loc.lon, loc.lat])[0])
      .attr("cy", projection([loc.lon, loc.lat])[1])
      .style("fill", d3.rgb(255, 0, 0).darker(2))
      .style("opacity", 0.8)
      .transition()
      .duration(1000)
      .attr("r", magnitudeScale(loc.magnitude))
      .transition()
      .delay(2000)
      .duration(2000)
      .style("opacity",0.3);

    locationsG
      .append("text")
      .text(loc.magnitude)
      .attr("x", projection([loc.lon, loc.lat])[0] - 10)
      .attr("y", projection([loc.lon, loc.lat])[1] + 5)
      .attr("font-family", "sans-serif")
      .attr("font-size", "12px")
      .attr("fill", "black")
      .style("opacity",0)
      .transition()
      .duration(1000)
      .style("opacity",1)
      .transition()
      .delay(2000)
      .duration(2000)
      .style("opacity",0);
  }

  //addLocation({"lat": "40.43", "magnitude": "2.7", "lon": "0.7", "datetime": "2013-10-09T06:43:16"});

  var intDate = new Date("2013-09-10T00:00:00Z");
  var maxDate = new Date("2013-10-04T00:00:00Z");
  var usedLocations = new Array();

  var dateTitle = svg
    .append("text")
    .attr("id", "dataTitle")
    .text(intDate.toLocaleDateString())
    .attr("x", 70)
    .attr("y", 20)
    .attr("font-family", "sans-serif")
    .attr("font-size", "20px")
    .attr("fill", "black");

  var interval = setInterval(function() {

    dateTitle.text(intDate.toLocaleDateString());

    for (i = 0; i<locations.length; i++){
      var locationDate = new Date(locations[i].datetime);

      if (locationDate <= intDate && usedLocations.indexOf(locations[i].datetime) == -1){

        usedLocations.push(locations[i].datetime);
        addLocation(locations[i]);
      }

      if (intDate>maxDate){
        clearInterval(interval);
      }

    }

    intDate.setDate(intDate.getDate() + 1);
  }, 1000);

});

</script>

data.json

[{"lat": "40.43", "magnitude": "2.7", "lon": "0.7", "datetime": "2013-09-10T06:43:00"}, {"lat": "40.41", "magnitude": "2.8", "lon": "0.69", "datetime": "2013-09-13T08:35:00"}, {"lat": "40.38", "magnitude": "2.7", "lon": "0.71", "datetime": "2013-09-18T02:19:00"}, {"lat": "40.36", "magnitude": "2.9", "lon": "0.75", "datetime": "2013-09-19T21:08:00"}, {"lat": "40.38", "magnitude": "3.6", "lon": "0.69", "datetime": "2013-09-24T02:21:00"}, {"lat": "40.33", "magnitude": "3.0", "lon": "0.69", "datetime": "2013-09-25T07:59:00"}, {"lat": "40.41", "magnitude": "2.8", "lon": "0.69", "datetime": "2013-09-29T07:43:00"}, {"lat": "40.38", "magnitude": "2.9", "lon": "0.72", "datetime": "2013-09-29T18:36:00"}, {"lat": "40.32", "magnitude": "3.6", "lon": "0.79", "datetime": "2013-09-30T00:15:00"}, {"lat": "40.32", "magnitude": "3.9", "lon": "0.77", "datetime": "2013-09-30T04:21:00"}, {"lat": "40.33", "magnitude": "2.9", "lon": "0.78", "datetime": "2013-10-01T03:31:00"}, {"lat": "40.37", "magnitude": "4.2", "lon": "0.73", "datetime": "2013-10-01T05:32:00"}, {"lat": "40.33", "magnitude": "2.9", "lon": "0.77", "datetime": "2013-10-02T11:27:00"}, {"lat": "40.34", "magnitude": "4.1", "lon": "0.81", "datetime": "2013-10-03T01:29:00"}, {"lat": "40.4", "magnitude": "4.3", "lon": "0.67", "datetime": "2013-10-03T01:06:00"}, {"lat": "40.33", "magnitude": "3.3", "lon": "0.78", "datetime": "2013-10-03T05:13:00"}, {"lat": "40.33", "magnitude": "3.7", "lon": "0.77", "datetime": "2013-10-04T10:49:00"}, {"lat": "40.34", "magnitude": "3.6", "lon": "0.76", "datetime": "2013-10-04T11:55:00"}]

get_data.py

# -*- coding: utf-8 -*-
#http://jramosgarcia.wordpress.com/2013/10/01/que-es-el-proyecto-castor/
import urllib
import json
import dateutil.parser
import datetime

def get_data(url):
    filehandle = urllib.urlopen(url)
    html = filehandle.read()
    filehandle.close()

    lines = html.splitlines()

    for i in range(len(lines)):
    
        if lines[i].find('Latitud') > 0:
            lat = lines[i].strip().split(" ")[1].replace("º","")
        if lines[i].find('Longitud') > 0:
            lon = lines[i].strip().split(" ")[1].replace("º","")   
        if lines[i].find('mol del dia') > 0:
            date = lines[i + 1].strip().replace("</div>","")
        if lines[i].find('Hora origen') > 0:
            hour = lines[i].strip().split(" ")[4]                   
        if lines[i].find('Magnitud') > 0:
            magnitude = lines[i+1].strip().split(" ")[0]

    date_array  = date.split("/")
    hour_array = hour.split(":")

    date_time = datetime.datetime(int(date_array[2]),int(date_array[1]),int(date_array[0]),int(hour_array[0]), int(hour_array[1]))

    data = {'lat':lat, 'lon':lon, 'datetime': date_time.isoformat(), 'magnitude': magnitude}
    return json.dumps(data)

if __name__ == "__main__":
    url_list = [
    'http://www.igc.cat/web/gcontent/ca/sismologia/sismescomact/comhistcat/20130910175510/comact.html',
    'http://www.igc.cat/web/gcontent/ca/sismologia/sismescomact/comhistcat/20130913095842/comact.html',
    'http://www.igc.cat/web/gcontent/ca/sismologia/sismescomact/comhistcat/20130918142943/comact.html',
    'http://www.igc.cat/web/gcontent/ca/sismologia/sismescomact/comhistcat/20130920104607/comact.html',
    'http://www.igc.cat/web/gcontent/ca/sismologia/sismescomact/comhistcat/20130924091301/comact.html',
    'http://www.igc.cat/web/gcontent/ca/sismologia/sismescomact/comhistcat/20130925125029/comact.html',
    'http://www.igc.cat/web/gcontent/ca/sismologia/sismescomact/comhistcat/20130929084140/comact.html',
    'http://www.igc.cat/web/gcontent/ca/sismologia/sismescomact/comhistcat/20130929192416/comact.html',
    'http://www.igc.cat/web/gcontent/ca/sismologia/sismescomact/comhistcat/20130930005900/comact.html',
    'http://www.igc.cat/web/gcontent/ca/sismologia/sismescomact/comhistcat/20130930051316/comact.html',
    'http://www.igc.cat/web/gcontent/ca/sismologia/sismescomact/comhistcat/20131001045206/comact.html',
    'http://www.igc.cat/web/gcontent/ca/sismologia/sismescomact/comhistcat/20131001055709/comact.html',
    'http://www.igc.cat/web/gcontent/ca/sismologia/sismescomact/comhistcat/20131002121626/comact.html',
    'http://www.igc.cat/web/gcontent/ca/sismologia/sismescomact/comhistcat/20131002232928/comact.html',
    'http://www.igc.cat/web/gcontent/ca/sismologia/sismescomact/comhistcat/20131003012732/comact.html',
    'http://www.igc.cat/web/gcontent/ca/sismologia/sismescomact/comhistcat/20131003031301/comact.html',
    'http://www.igc.cat/web/gcontent/ca/sismologia/sismescomact/comhistcat/20131004113222/comact.html',
    'http://www.igc.cat/web/gcontent/ca/sismologia/sismescomact/comhistcat/20131004120323/comact.html'
    ]

    f = open("data.json","w")
    f.write("[")
    json_data = ""
    for url in url_list:
     json_data = json_data + get_data( url ) + ", "
       
    f.write(json_data[0:-2])
    f.write("]")
    f.close()