2014年05月11日

D3.js timer()サンプル 棒グラフが サイン波で動きます ≪SVG版≫

テーマ:javascript
前回の正弦波のアニメーションは、CSS版でした。
SVGを使用して波の動きをつくってみました。

描画エリアのサイズは、前回のCSS版より小さめにしてみました。

で、サンプルはこちら → D3.jsサンプル SVGでサイン波を うねうね動かす



<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>D3.js サイン波 サンプル SVG版</title>
  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<svg id="prt" width="570" height="210"></svg> // SVG描画エリアを確保
<script type="text/javascript">
  var dataset = [ 0, 10, 20, 30, 40, 50, 60, 70, 80, 90,
      100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200,
      210, 220, 230, 240, 250, 260, 270, 280, 290, 300, 310,
      320, 330, 340, 350, 360 ];
  var width = 10;
  var height = 100;
  var a = 0;

  var svg = d3.select("#prt");

  svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("width", width)
    .attr("height", function(d) {
      var aa = Math.sin( d / 180 * Math.PI ) * 100;
      return Math.abs(aa); })
    .attr("x", function(d, i) { return i*(width+5)+10 })
    .attr("y", function(d){  // 棒の描画開始位置(Y方向)を決めます
      var aa = Math.sin( d / 180 * Math.PI ) * 100;
      if ( aa < 0 ) { aa = 0; }
      return 105 - aa })
    .attr("fill", "cyan")
    .attr("stroke", "blue")
    .attr("stroke-width", "2");

  d3.timer(function(){
  svg.selectAll("rect")
    .data(dataset)
    .attr("height", function(d) {
      var aa = Math.sin( (d+a) / 180 * Math.PI ) * 100;
      return Math.abs(aa); })
    .attr("y", function(d){
      var aa = Math.sin( (d+a) / 180 * Math.PI ) * 100;
      if ( aa < 0 ) { aa = 0; }
      return 105 - aa });
   a = a + 1.0;   // 動きの間隔(正弦波の角度;単位はデグリー)を指定
   if ( a >= 360 ) { a = a - 360; }
  });
</script>
</body>
</html>


うねうねするのを 見ていると 癒されます (笑


AD
いいね!した人  |  コメント(0)  |  リブログ(0)
最近の画像つき記事
 もっと見る >>
2014年05月10日

D3.js timer()サンプル 棒グラフが サイン波で動きます

テーマ:javascript

D3.jsのアニメーションの練習に作ってみました。
下の図のようなサイン波を描く棒グラフが動きます。

d3.timer()を使用して、繰り返しの動作を実現しています。




もっと上手くできるような気がします。。

動きは、こんなカンジになります。 → サンプルを動かす

 ※ SVG版も作りました! → この記事です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>D3.js サイン波 サンプル</title>
  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
  <style type="text/css">

    div.bar {
      display: inline-block;
      width: 20px;
      height: 100px;
      margin-right: 2px;
      background-color: mediumspringgreen;
    }
  </style>
</head>
<body>
<script type="text/javascript">
  var dataset = [ 0, 10, 20, 30, 40, 50, 60, 70, 80, 90,
      100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200,
      210, 220, 230, 240, 250, 260, 270, 280, 290, 300, 310,
      320, 330, 340, 350, 360 ];
  var a = 0;

  d3.select("body").selectAll("div")
    .data(dataset)
    .enter()
    .append("div")
    .attr("class", "bar")
    .style("height", function(d) {
      var barHeight = Math.sin( d / 180 * Math.PI ) * 100 + 100;
      return barHeight + "px";
    });

 d3.timer(function(){
   d3.select("body").selectAll("div")
     .data(dataset)
     .attr("class", "bar")
     .style("height", function(d) {
       var barHeight = Math.sin( ( d + a) / 180 * Math.PI ) * 100 + 100;
       return barHeight + "px";
     });
   a = a + .7;
   if ( a >= 360 ) { a = a - 360; }
 });
</script>
</body>
</html>





インタラクティブ・データビジュアライゼーション ―D3.jsによるデータの可視化
Scott Murray
出版社: オライリージャパン
AD
いいね!した人  |  コメント(0)  |  リブログ(0)
2014年05月06日

HTML5 FileAPI フォルダ内ファイルのファイル名取得

テーマ:javascript
HTML5ではFileAPIが実装されたということで、
指定フォルダ内にあるファイルのファイル名を取得したいと思い、
いろいろ検索してサンプルを探しましたが、
どうやら フォルダ情報を取得する機能はまだ実装されていないようです。

ただ、Chromeでは試験的に?フォルダ情報を扱うことができるようですね。
(AndroidのChromeは試してみましたがダメでした)

(参考サイト) directory:フォルダ指定によるローカルファイル群の属性取得
で。ちょっと、この参考サイトのサンプルソースをコピペしただけで動くように補って 勝手に貼らせていただきます。Chromeプラウザでしか動きませんので、ご注意ください。
<!DOCTYPE html>
<html>
<head>
  <title>テスト</title>
</head>
<body>
<script>
    function fileListDirectory(files) {
        var ファイル数 = files.length;
        var ファイル名 = new Array();
        var パス     = new Array();
        for (i=0; i<ファイル数; i++) {
            ファイル名[i] = files[i].name;
            パス[i]       = files[i].webkitRelativePath;    // 行A
        }
        var 表示内容 = "";
            for (i=0; i<ファイル数; i++) {
            if (ファイル名[i] == ".") {                     // 行B
                表示内容 += "フォルダ:";
            }
            else {
                表示内容 += "ファイル:";
            }
            表示内容 += パス[i] + "<br>";
        }
        document.getElementById('表示場所').innerHTML = 表示内容;
    }
</script>
<p><input  type="file"
    webkitdirectory directory                             
    onChange="fileListDirectory(this.files)"></p>
<div id="表示場所" class="red">結果がここに表示されます。</div>
</body>
</html>


ちなみにー。
HDDにあるファイルやフォルダ情報をすべて抽出してくれるフリーのツールを利用しています。
でも、抽出対象にHDD丸ごと全部を指定すると とんでもなく時間がかかることがあります。
僕が欲しい情報以外のファイル情報を取得したり、メモリ操作が最適化されてないかったりして遅いんじゃないかな?
と思い、DOMをメモリ代わりに使ったりして、ちょー高速にディレクトリ構造を抽出するツールを作りたくなったんですね。

んー、も少し待ちますか。HTML5のFileAPI仕様の充実を。


(追記) Ruby版をつくってみました。 → サンプルはこちら
AD
いいね!した人  |  コメント(0)  |  リブログ(0)
2014年05月03日

D3.js 初心者のための参考サイト(まとめ)

テーマ:javascript
D3.jsの使い方を調べるならこのサイト!をまとめてみました。


D3 入門 | スコット・マレイ | alignedleft
米・サンフランシスコ大学 教養学部の助教授、Scott Murryによる D3.js チュートリアル。邦訳。


D3.js Data-Driven Documents
DOM、SVGの基本から始まり、D3.jsのスケール、軸、transition、behaviorまで学習できます。日本語。


D3.js入門(棒グラフをつくってみる) ヘウレーカを廻って
D3.jsの記述仕方をざっと確認したい時に便利かと思います。日本語。


データ・ドリブン・ドキュメント
D3.jsの作者Mike Bostockの同名サイト(http://d3js.org/)の邦訳サイト。
チュートリアルと豊富なサンプル(動作確認できます)。


 ・三つの小円 : データと要素とセレクション(enter,update,exit)について

 ・セレクションの仕組み : セレクションがどのように実装されているのかという観点から分かりやすく説明


D3 wiki 日本語 Home
APIリファレンスがあります。邦訳。


GUNMA GIS GEEK ~群馬県の片隅でオープンデータとデータビジュアライゼーションとGISに戯れるエンジニアのブログ。~
清水正行による豊富なサンプル。日本語。
地理情報関連のデータビジュアライゼーション記事が多い。


D3.js例文辞典
古籏一浩によるサンプル。日本語。
ポイントを絞ったサンプルとなっていますので、参考にしやすいです。日本語。
(書籍化のために書き溜めているのでしょうか。)



<アニメーション サンプル>
24 circles demonstration
タイトルの通り、24個の円(ボール)が派手に動きまわります。美しいです。
transition() delay() duration()


ScimprBlog
サンプルを動かして見せてくれていないみたい。
でも、ソースは参考になります。

D3.js timer()サンプル 棒グラフが サイン波で動きます
僕がつくったサンプルです。タイトルの通り、d3.jsのtime()を使用してアニメーションさせています。こちらはCSSの値を操作して、棒グラフの高さを変えています。なので、下のSVG版より軽快に動きますね(見た目わかりにくいかもですが・・)。


D3.js timer()サンプル 棒グラフが サイン波で動きます ≪SVG版≫

で、これが↑のSVG版です。ちょっと形が変わりますが、正弦波です。癒されますヨ





以下、参考。


D3.jsとTopoJSONで地図を作る (邦訳)



初学者のみなさまの参考になれば幸いです。




インタラクティブ・データビジュアライゼーション
D3.jsによるデータの可視化


記事にある Scott Murrayの本です。
WEBのチュートリアルに加え、いろいろ追記があります。
内容はWEBの通り、平易で読みやすいです。
上級者には 物足りないかも・・ですね。




エンジニアのための データ可視化[実践]入門
D3.jsによるWebの可視化 (Software Design plus)






すべての人に知っておいてほしい
JavaScriptの基本原則






パーフェクトJavaScript
(PERFECT SERIES 4)


JavaScript解説書の良書だと思います。
言語仕様から応用まで。
クライアントサイドはもちろん、サーバサイドも解説。
膝元に置いておきたい1冊ですね。
(このタイトル、、ネーミングも くすぐられます・・)

いいね!した人  |  コメント(0)  |  リブログ(0)

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。