var data = {
  nodes: [
    { name: 'Alice' },
    { name: 'Bob' },
    { name: 'Eve' }
  ],
  links: [
    { source: 0, target: 1 },
    { source: 0, target: 2 },
    { source: 1, target: 2 }
  ]
};

nodesにはAlice、Bob、Eveの3要素。
linksにはnodesのどの要素が、どの要素と繋がりがあるかを表しています。
例のデータだと、
source: 0, target: 1で、nodesの0番目(Alice)から1番目(Bob)へと繋がるようなイメージ。
Alice → Bob、Alice → Eve、 Bob → Eveと繋がるので、結果は三角形が出来上がります。

このようなデータだと良さ気です。

データを使って、作る

svg要素を作るところはカット。
force、line、circleを作ります。

var force, line, circle;

force = d3.layout.force()
  .nodes(data.nodes)
  .links(data.links)
  .size([200, 200])
  .linkDistance([100])
  .charge([-100])
  .start();

line = d3.selectAll('line')
  .data(data.links)
  .enter()
  .style({
    // お好みの線の色と太さ
  });

circle = d3.selectAll('circle')
  .data(data.nodes)
  .enter()
  .attr('r', 20)
  .call(force.drag);

forceのnodes、linksでデータを指定してやります。
linkDistanceはnodes同士の間隔。
chargeは反発力みたいな。そんな感じです。
正の値を入れると面白い動きをします。
そして、circleの最後のcall(force.drag)。
これで、マウスドラッグが可能になります。

tick

最後にtickを。

force.on('tick', function () {
  line.attr({
    'x1': function (d) { return d.source.x; },
    'y1': function (d) { return d.source.y; },
    'x2': function (d) { return d.target.x; },
    'y2': function (d) { return d.target.y; }
  });

  circle.attr({
    'cx': function (d) { return d.x; },
    'cy': function (d) { return d.y; }
  });
});

これで大体完成となります。
意味なんかはreference読むのが一番かなぁと思っていますが、
きの基本形覚えてしまえば、いろいろ応用が利くはずです。

サンプル

今回もサンプルを作りました。
今回は、TwitterのREST APIから自分のアカウントのフォローしているアカウント一覧を取得。
jsonファイルに落とし込んで、フォローしている人との繋がりを描画しました。
要するに、0が自分で、targetをフォローしているユーザとするだけです。

{ source: 0, target: 1 },
{ suurce: 0, target: 2 }
// ....

nodeはcircleではなく、imageを使用し、フォローしている方のアイコンを表示しています。

デモはこちら (URL間違ってたから修正w) ※重いので注意
ソースはこちら

最後に

難しそうなものですが、案外やってみると簡単に作れてしまいます。
どちらかというと、データに何を使うか、繋がりをどう表すのかが重要になりそうです。

今度は何をしよう。。。

2014-07-03

D3.jsのtransitionで遊んでみる

D3.js JavaScript

地図ばかりいじってきましたが、transitionを使い、
図形を遷移させて遊んでみたいと思います。

SVGと、図形の描画

ここはD3の基本的なところです。
まずはいつも通り、svg要素を作成します。

// svg
var svg = d3.select('body').append('svg').attr({width: 500, height: 500});

次に図形を追加しましょう。
今回はcircle要素を追加します。

// circle
var circle = svg.append('circle')
  .attr({
    cx: 100,
    cy: 100,
    r: 20,
    fill: 'red'
  });

これで、X座標100、Y座標100に半径20で赤色の円が描画できます。

図形を遷移させる

使うのは3つです。

transition: 遷移開始
duration(ms): 遷移にかける時間をミリ秒で指定
ease('linear'): どのように動かすのか

easeは何パターンかあるのですが、詳しくはこちらのEasingの項を参照。

// transition
circle.transition()
  .duration(1000)
  .ease('linear')
  .attr({
    cx: 200,
    cy: 200,
    r: 50,
    fill: 'blue'
  });

例えば、このように書いたとすると、
1秒間かけて、X,Y = (200, 200)に移動させつつ、半径を50、色を青にする。
となります。

遷移が終わった時に何かしたいと思うと、このように書くことができます。

// 上記コードの続き
  .each('end', function () {
    d3.select(this).remove();
  });

こうすると、遷移が終わった段階で、遷移させていた図形を削除することが可能です。

さらに、transitionは続けて書くことができます。

circle.transition()
  .duration(1000)
  .attr(/* 何か */)
  .transition()
  .duration(500)
  // 略

この例だと、1秒かけて遷移、その後0.5秒また遷移という風になります。

サンプル

今回の記事の内容を使い、サンプルを作ってみました。
よければどうぞ。

デモはこちら
ソースはこちら

2014-06-30

Osaka.vim#1に参加した話

Vim

6/28(土)、待望のOsaka.vim#1が開催されました。
待ちに待った、関西Vim勉強会です。

集合

12時ぐらいに、iyuuyaさん、haya14busaさん、thincaさんと合流。
からのランチ(パスタ)。＋プリン。
プリンのあの、もうちょっと！もうちょっと食べたい！っていう絶妙な量。
便利。
13:00〜スタート!

本編

タイムテーブル

13:00 ~ 13:30
参加者自己紹介
13:30 ~15:00
thincaさんによるライブコーディング
15:00 ~ 15:30
休憩
15:30 ~18:00
フリータイム

thincaさんによるライブコーディング

scratchバッファを作って、簡単にメモをとるぷらぎん。
普通Vimは一度編集して、保存せず閉じようとすると、「保存してないよ！？いいの！？」
といちいちうるさい。それをなくすような感じ。
で閉じたやつは保持しておいて、コマンドからリストで選択できる感じ。
Unite化もしてた。
途中からユーストで配信。
配信中にUnite.vimの直してくれるShougoさんすごい。
ライブコーディングならぬ、ライブプルリク。すごい。

フリータイム

もくもく会の予定だったのだけれども。。。
発表したい人が多く、もくもく会というより、発表聞いてた。

t-codeについて

kozo2さん
無連想漢字直接入力
 http://ja.wikipedia.org/wiki/%E7%84%A1%E9%80%A3%E6%83%B3%E5%BC%8F%E6%BC%A2%E5%AD%97%E7%9B%B4%E6%8E%A5%E5%85%A5%E5%8A%9B
これのVimぷらぎんの紹介。 + t-codeやろうぜ！覚えようぜ!

miv

itchynyさん
NeoBundleLazy遅いよね! miv作りました。
既存のものに対して不満を持とう
確かに、どこかしら不満を持つことは良いことように思える。

これからはじめるVim プラグイン開発

haya14busaさん
初心者向けのぷらぎん作成講座。
めっちゃ参考になった、すごい。
資料はここ

懇親会 18:10 〜 21:00ぐらい

近くの鉄板焼きのお店で。
ダニエルさんの話がおもしろかった。
日本語のプログラミング言語はないのか的な話で、
英語も日本語もできるから、なんか申し訳なくなるというか、フェアじゃないよねっていう話。
なかなかおもしろい考え方で驚き。

関数型言語の勉強会があるらしいですよ!

iyuuyaさん、bouzuyaさんに聞いたSIerについての話。
などなど。

JavaScript生で書くのもいいけど、Coffieおすすめ！
試してみたいところ。

コードが汚いんです! -> Haskellやると綺麗になるよ。
はっ・・・！

グループチャットの話では、Slack推しされていたので、
早速今日導入してみました。
コード書ける、外部連携多い、意外とページプレビューも良い感じだった。
ただ、英語ばかりなので、いきなり導入は難しそげ。

22:00 ぐらいから ~ 5:30ぐらいカラオケ.vim

カラオケ。進捗だめです！今回は結構歌ってしまった。
というのもSwiftやろうと思ってたら、iBooksがフリーズするとかいう謎の現象に見舞われる。
つらみ。
D3.jsやるか！→OS X10.10に上げてからapacheがどうなってたのか確認しておらず、
localhostがIts' works!に。つらみを感じた。
どこのhttpd.conf読んでて、どこのvhosts読んでるんだよくそが！DocumentRootどこだよおおお！
という状態をとりあえず、Macに標準で入ってるapacheに変えてひとまず回避。

全体的な感想

かなり勉強になりました。
進捗は出ていませんが!

前にも書いたけど、Vimはあくまでテキストエディタ。
だからこそ、いろんな人が集まるし、いろんなことしてる人がいる。
言語ひとつとってもバラバラだろうし、中にはAtom触ってる人もいる。いろんな興味が沸く仕掛けがここにはあります Vimmer コミュニティー。

終始わいわいと、良い雰囲気でありつつ、懇親会でもかなり交流していた印象。
良い#1だったと思います。
次回にも期待。

次回

予定では8月だそうですが、平日開催の可能性もあります。
まだ何も決まっていないので、何も言えませんが、Osaka.vimが続くことを祈っています。

KPTも書ける人は書きましょう。次回のために。

主催のiyuuyaさん、管理者のhaya14busaさん、ライブコーディングして下さったthincaさん、お疲れ様でした。
参加者の皆様もお疲れ様でした。

またどこかでお会いしましょう。

2014-06-19

D3.jsで地図を手動で回転させる

JavaScript D3.js

前回は自動で回転させましたが、今回は手動で回転させてみます。
手動で回転させる際に参考にしたのは、D3.jsのexampleのこちらになります。
ほぼソースは同じですね。

exampleとの差異

exampleのソースを見てみると...

var feature;

var projection = d3.geo.azimuthal()
    .scale(380)
    .origin([-71.03,42.37])
    .mode("orthographic")
    .translate([640, 400]);

var circle = d3.geo.greatCircle()
    .origin(projection.origin());

こんな感じのコードになってました。
projectionの辺りですが、azimuthalを指定しています。
が、これを指定するとどうもそんなfunctionないよと怒られます。
ついでにoriginも怒られます。
circleの方もgreatCircleで怒られたり。。。

ですので、projectionは

// projection
    projection = d3.geo.orthographic()
      .scale(200)
      .translate([w /2, h / 2])
      .clipAngle(90),

こんな感じに。前回と同じものを。circleも同じく、svgにappendする形です。
ここ以外はほぼ弄っていないので…。

イベント処理の追加

このexampleでは、

mousedown
mouseup
mousemove

など、イベントを結構使っています。

mousedownに、その時点のX座標とY座標を取得したり、
mousemove、mouseupの連携で、mousedownからupまでの
X、Yの差を取り、最後にその差を適用させるというようなやり方になります。

書くのは良いんですが、ほぼexampleと同じなので、ソース自体はこちらを参照くださいませ。

動く方はこちらです。マウスでグリグリしてみてください。
動くサンプル

ひとこと

記事が手抜きすぎる!

2014-06-17

D3.jsで地図を回転させる

JavaScript D3.js

前回まで弄っていた日本地図から少し離れ、今回は別の投影法を試してみます。

orthographic

D3.jsには、様々な投影法が用意されています。
その中でも今回はorthographicを使用してみます。
この投影法を使うと、地球儀みたいなものが作れちゃいそうです。 exampleはこちら

地図を描画し、回転させるところまでやってみます。

投影法の指定

前回の日本地図ではメルカトル図法を採用していました。
今回はこのような指定をします。

var projection = d3.geo.orthographic()
  .scale(200)
  .translate([w / 2, h / 2])
  .clipAngle(90)
  .rotate([x, y, z]);

d3.geo.orthographic()とした部分と、clipAngle()、rotate()以外は前回と同じです。

clipAngle(度数)は、指定した角度分の陸地が見えるようなイメージです。
90と指定すると、90度分だけ描画されます。
180を指定すると、180度分描画されるので、裏側で見えないはずの陸地まで描画されます。
なかなか面白いことになります。

海に色をつける

陸地以外が白では味気ないので、海に色をつけてみます。
こちらを参考にさせていただきました。
ということで、地図を描画する前に円を描画しておきます。

svg.append('circle')
  .attr({
    cx: w / 2,
    cy: h / 2,
    r: 200,
    fill: '#333399'
  });

描画する

世界の地形データから、あらかじめtopojsonを作成しておきます。
あとは、日本地図の時と同じです。
マウスオーバーで国を赤で表示します。

var features = topojson(data, data.objects.world).features;

var earth = svg.selectAll('path')
  .data(features)
  .enter()
  .append('path')
  .attr({
    // いろいろ指定
  })
  .on({
    'mouseover': function () {
      // 処理
    },
    'mouseout': function () {
      // 処理
    }
  });

回転させる

ここまではほぼほぼ日本地図の時と同じです。
次は地図を回転させてみます。
d3.timer()使用し、一定時間ごとに処理させます。

d3.timer(function () {
  x += 5;
  y += 1;
  z += 1;
  projection.rotate([x, y, z]);
  earth.attr('d', path);
}, 500);

500ミリ秒毎に、xを+5、yとzを+1させるようにしてみました。
動きはしているのですが、どうもError: Invalid value for attribute d=""が出ているようで...。
まだ解決はできていません。つらみ。

作ったサンプル

次回は何をしよう。。。

2014-06-08

momonga.vim#4に参加しました

Vim

momonga.vim#4に行ってきた

momonga.vimに行ってきました。
兵庫→東京です。正直出費は素晴らしいことになっております。
ですが、良い刺激になったと思います。

写真撮ってないのが悔やまれる。
ただ、モモンガが本当にいたんだ。嘘じゃない。本当にいたんだ!(ぬいぐるみ)

やったこと

とりあえず.vimrcを整理しようと思いました。
というのも、理解していないことが溢れているのが問題でして、
理解しながら整理したいなぁと思っていたんです。
結局:helpを読み漁るハメになりました、本当にありがとうございます。

もう一点、webapi-vimを使ってみようと思い、使ってみたりしてました。
D3.jsなど、地図を描いてることが最近楽しいので、緯度経度は切ることができません。
例えば、地図の中心を「兵庫県神戸市にしたい!」と思っても、緯度経度を暗記してる人なんて早々いませんよね。

そこで、GoogleさんのAPIで、ジオコーディングのAPIを使い、逆ジオコーディングしてやろうと。
まだ途中だし、ごちゃごちゃだし辛みしかない。
とりあえずechoするだけ。

function! s:getLonLat(address)
  let url = 'http://maps.googleapis.com/maps/api/geocode'
  let parameter = 'address='. a:address.'&sensor=false'
  "use webapi-vim
  let res = webapi#http#get(url. '/'. 'json?'. parameter)

  if res.status !~"^2.*"
    return ['error', 'Failed']
  endif

  let content = webapi#json#decode(res.content)
  let results = content.results
  let location = results[0].geometry.location
  let dict = {'Lon': location.lng, 'Lat': location.lat}
  echo dict.Lon
  echo dict.Lat
endfunction

適当にGetLonLatコマンド作って、
:GetLonLat 兵庫県神戸市みたいにしたらLonLat返してくれます。
これで、カーソル位置に上手く挿入するか、クリップボードに入れるみたいなことできたら、
たまには使える気がする。ただ、オフラインでは機能しないですね。

f:id:lisia:20140608182931g:plain

2次会、3次会(カラオケ)

2次会はサイゼリアでしたね。Vimmerが集まりました。
ご飯食べ終わったら、早速進捗出そうとする人もいて、Vimmerすごい。
こちらはというと、りんごさんに「Mathematica」というので作った、図形をどんどん変化させていくようなものを見せてもらい、「SUGOI」となっておりました。

最近、地図にしろ図形にしろ、データを視覚化しようとすることにテンション上がるようになってきているのをひしひしと感じているので、興味深かったです。
D3.jsでも似たようなことできたりしないかなぁなんて考えました。

カラオケは、あんまり歌ってません。
いつもなら歌うんですけどね。緊張してたんですね。そういうことにしておきましょう。
7時〜5時までという長時間のカラオケ。
全員PC出すという異様な光景。

キーボード打ちながら歌うthincaさんは、まるで弾き語りをしているようでした。(キーボード違い)

ももんがさんのMacがあああ、とか事件もありました。

朝5時過ぎに解散。
そこから初秋葉を体験しておりました。
早朝すぎてどこも開いてません。なので、ラブライブの聖地巡りを軽くしました。

f:id:lisia:20140608183734j:plain

f:id:lisia:20140608183812j:plain

f:id:lisia:20140608183747j:plain

良いです。

全体的に

あまりお話できませんでしたが(苦手なのです)、
楽しい時間を過ごすことができました。
また機会があれば参加したいと思います。(年1回ぐらいなら...)

Vimmerの知り合いができるのは良いものですね。
あ、あとツイッターフォローしてくれた方々はありがとうございます。
VimとかjsとかPHPとか、声優とかラブライブとかミルキィホームズとか、テイルズウィーバーとか、
将棋とか、爬虫類とか、こいつ一体何なんだとかいう多種多様なツイートになりますが、
生温い目で見ていただければと思います。
(仲良くしていただければと思います)

主催のももんがさん、thincaさんお疲れ様でした。
参加者の皆様もお疲れ様でした。

月末のOsaka.vimもよろしくお願いします。

レイヤー8はあかん！(隠語) レイヤー8使っていこう。

ぷらす。
Vim以外の進捗はこんな感じになりました。サンプル

Yosemite

その他

force layout

作ってみる

データの用意

データを使って、作る

tick

サンプル

最後に

SVGと、図形の描画

図形を遷移させる

サンプル

集合

本編

thincaさんによるライブコーディング

フリータイム

t-codeについて

miv

これからはじめるVimプラグイン開発

懇親会 18:10 〜 21:00ぐらい

22:00 ぐらいから ~ 5:30ぐらい カラオケ.vim

全体的な感想

次回

exampleとの差異

イベント処理の追加

ひとこと

orthographic

投影法の指定

海に色をつける

描画する

回転させる

momonga.vim#4に行ってきた

やったこと

2次会、3次会(カラオケ)

全体的に

これからはじめるVim プラグイン開発

22:00 ぐらいから ~ 5:30ぐらいカラオケ.vim