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.
| [{"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"}] |
| # -*- 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() | |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .stroke { | |
| fill: none; | |
| stroke: #000; | |
| stroke-width: .5; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/d3.geo.tile.v0.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| /** | |
| Based on Mike Bostock's http://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> |
