SELECTED ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

03
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
--
>>
<<
--

Agata's Blog

Python+pandasとD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
<< 折れ線グラフをアニメーションで表示する | main | 【D3.js】Chordダイアグラムの作成 >>
過去30日間に世界で発生した地震を可視化する
0
    JUGEMテーマ:JavaScript

    アメリカ地質調査所 (USGS: United States Geological Survey) の公開データをもとに、世界で過去30日間に発生したマグニチュード2.5以上の地震を可視化しました。楕円のサイズが地震の規模を示しています。日本で発生した地震はオレンジで表しています。



    サンプルページ

    var dataSet = [];
    
    // X,Y軸を表示できるようにグラフの周囲にマージンを確保する
    var margin = {top: 40, right: 20, bottom: 40, left: 20};
    var width = 1200 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    
    // ツールチップ用の設定
    var div = d3.select("body")
      .append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);
    
    d3.csv("./js/30Days_MagnitudeOver2.5.csv", function(error, dataSet){
      // SVGの表示領域を生成
      var svg = d3.select("#MyGraph")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
      
      // CSVファイル内の時刻情報をJavaScriptのDate形式にパース
      var format = d3.time.format("%Y-%m-%dT%X.%LZ");
      time_start = new Date(format.parse(dataSet[0].time));
      time_end = new Date(format.parse(dataSet[dataSet.length - 1].time));
      
      // 時間軸のスケール関数を生成
      var time_scale = d3.time.scale()
        .domain([time_start, time_end])
        .range([0, width]);
    
      // 地震の規模を楕円のサイズで表すためのスケール関数
      var r_scale = d3.scale.linear()
        .domain([0.0,10.0])
        .range([0.0, 200.0]);    
            
      // 散布図を描画
      svg.selectAll("ellipse")
        .data(dataSet)
        .enter()
        .append("ellipse")
        .attr("rx", 0)
        .attr("ry", 0)
        .attr("cx", function(d,i){
          var tmp = new Date(format.parse(d.time));
          return time_scale(tmp);
        })
        .attr("cy", 150)
        .attr("stroke","#A0A0A0")
        .attr("fill", function(d,i){
          if (d.place == "Japan"){return "orange"}
          else{return "#D0D0D0"};
        })
        .on("mouseover", function(d){ // マウスオーバー時にツールチップを表示
          div.transition()
            .duration(500)
            .style("opacity", 1.0);
          div.html("Location: " + d.place + "
    Magnitude: " + d.mag) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { // マウスアウトするとツールチップを非表示 div.transition() .duration(500) .style("opacity", 0.0); }) .transition() .delay(function(d,i){ return i*2; }) .attr("rx", 5) .attr("ry", function(d,i){ return r_scale(d.mag) }); // 時間軸を描画 svg.append("g") .attr("class", "axis") .attr("transform", "translate(0,320)") .call(d3.svg .axis() .scale(time_scale) .orient("bottom") .tickFormat(function(d,i){ var fmtFunc = d3.time.format("%b-%d"); return fmtFunc(d); }) ) .selectAll("text") .attr("transform", "rotate(45)") .attr("dy", 10) .attr("dx", 10) .style("text-anchor", "start"); })
    このエントリーをはてなブックマークに追加
    | D3.js | 11:08 | comments(0) | - | - |
    スポンサーリンク