D3.jsのtransitionで遊んでみる
地図ばかりいじってきましたが、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秒また遷移という風になります。
サンプル
今回の記事の内容を使い、サンプルを作ってみました。
よければどうぞ。
Osaka.vim#1に参加した話
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さん、お疲れ様でした。
参加者の皆様もお疲れ様でした。
またどこかでお会いしましょう。
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と同じなので、ソース自体はこちらを参照くださいませ。
動く方はこちらです。マウスでグリグリしてみてください。
動くサンプル
ひとこと
記事が手抜きすぎる!
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
まだ解決はできていません。つらみ。
次回は何をしよう。。。
momonga.vim#4に参加しました
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返してくれます。
これで、カーソル位置に上手く挿入するか、クリップボードに入れるみたいなことできたら、
たまには使える気がする。ただ、オフラインでは機能しないですね。
2次会、3次会(カラオケ)
2次会はサイゼリアでしたね。Vimmerが集まりました。
ご飯食べ終わったら、早速進捗出そうとする人もいて、Vimmerすごい。
こちらはというと、りんごさんに「Mathematica」というので作った、
図形をどんどん変化させていくようなものを見せてもらい、「SUGOI」となっておりました。
最近、地図にしろ図形にしろ、データを視覚化しようとすることにテンション上がるようになってきているのをひしひしと感じているので、興味深かったです。
D3.jsでも似たようなことできたりしないかなぁなんて考えました。
カラオケは、あんまり歌ってません。
いつもなら歌うんですけどね。緊張してたんですね。そういうことにしておきましょう。
7時〜5時までという長時間のカラオケ。
全員PC出すという異様な光景。
キーボード打ちながら歌うthincaさんは、まるで弾き語りをしているようでした。(キーボード違い)
ももんがさんのMacがあああ、とか事件もありました。
朝5時過ぎに解散。
そこから初秋葉を体験しておりました。
早朝すぎてどこも開いてません。なので、ラブライブの聖地巡りを軽くしました。
良いです。
全体的に
あまりお話できませんでしたが(苦手なのです)、
楽しい時間を過ごすことができました。
また機会があれば参加したいと思います。(年1回ぐらいなら...)
Vimmerの知り合いができるのは良いものですね。
あ、あとツイッターフォローしてくれた方々はありがとうございます。
VimとかjsとかPHPとか、声優とかラブライブとかミルキィホームズとか、テイルズウィーバーとか、
将棋とか、爬虫類とか、こいつ一体何なんだとかいう多種多様なツイートになりますが、
生温い目で見ていただければと思います。
(仲良くしていただければと思います)
主催のももんがさん、thincaさんお疲れ様でした。
参加者の皆様もお疲れ様でした。
月末のOsaka.vimもよろしくお願いします。
レイヤー8はあかん！(隠語) レイヤー8使っていこう。
D3.jsで地図にイベントをつける
先日の記事では日本地図をとりあえず描いてみました。
あれからちょいちょいと弄りまして、地図上にcircleを追加。
地図にマウスオーバーすると色を変えるようなことをしてみました。
イベントを追加する
イベントを追加する時には.on('event_name', function(){});のように追加します。
ここで、前回のコードからデータの指定部分を修正します。
var features = topojson.feature(data, data.objects.japan); map_svg.appnend('path') .datum(features) //以下略
前回は、`datum(features)``としていましたが、地図は描けていましたが、
この状態でイベントを追加しても、地図全体を指してしまい、上手くいきません。
append('path')で、一つのpath要素で描いている状態だったのだと思います。
修正
var features = topojson.feature(data, data.objects.japan).features; map_svg.selectAll('path') .data(features) .enter() .appned('path') // 以下略
topojson.feature(data, data.objects.japan)で取得できるオブジェクトのfeatreusの要素を取り出している感じです。
あとは以前と同じくattr({ })を指定し、その後でイベントを追加します。
// 略 .on('mouseover', function(){ d3.select(this) .attr('fill', 'red'); }) .on('mouseout', function(){ d3.select(this) .attr('fill', '#669966'); });
マウスオーバーされた時、都道府県が赤になります。
マウスアウトすると、元の色(#669966)に戻しています。
このthisがどうも、今回であればpathひとつひとつの要素を持っているような感じでした。
さらに地図にcircleなどを追加
していますが・・・。これは次回。
間違いなどあるかと思いますが、そこは申し訳ありません。
D3.jsで地図を描く
以前買った、インタラクティブ・データビジュアライゼーションはひとまず読了しました。
ちゃんと覚えたか?と問われれば、まだですが、少し感想を。
感想
D3.jsのチュートリアルの拡張のような内容で、
チュートリアルにある内容はもちろん、パイチャートやスタック、ジオコーディングまで、
幅広く基礎が学べる内容でした。
ページ数も250Pに及ばないぐらいで、調度良い分量でした。
さすがに1回では学びきれないので、少しずつ覚えていけたらと思っています。
そういえば、フォースレイアウトなんかも項目としてあって、すごく感動しました。
改めてD3.js使いこなせたらかっこよさそうと思いました。
Sample
いろいろ調べまして、日本地図の描画を行ってみました。
TopoJSONで地図を描くなど、googleとかいう素晴らしいサイトで検索すれば、
大体内容は同じです
コード
// width height var w = 500, h = 400, // projection projection = d3.geo.mercator() .center([139.5, 35.7]) .translate([w/2, h/2]) .scale([800]), // path generator path = d3.geo.path() .projection(projection), // svg svg = d3.select('body') .append('svg') .attr({ 'width': w, 'height': h }); // json d3.json('./japan.topojson', function(data){ // features var features = topojson.feature(data, data.objects.japan); svg.append('path') .datum(features) .attr({ 'stroke': 'black', 'stroke-width': '0.5', 'd': path }) .style('fill', '#669966'); });
w hは、そのまま横幅と高さに使います。
次にgeo系のやつです。projectionとpath。。
ちゃんと意味理解できてないので、そのうち。
そして、描画するエリアとして、svg要素を追加します。
d3.select('body')で、body要素を選択し、
.append('svg')で、svg要素を追加。
attrとして、横・縦を決めてやります。
d3.json()は、見たままですが、JSONを読み込みます。
他にはd3.csv()だとCSVなんか読み込めたりします。
いろいろあって便利です。
読み込んだデータを使って、
topojson.feature(data, data.objects.japan)で、フィーチャーを作成。
あとは似たようなことをしてます。
また要素追加→datumで今作ったフィーチャーを入れてやる。
attributes設定して、styleで・・・といった感じです。
すいません。今回は説明雑です。
Git扱えるようにと、Githubでレポジトリ作って、サンプル公開してみました！
Gitもちゃんと扱えるようになりたいところです。本当に。
※記事書いてから、少しいじっているので、↑のコードではなくなっています 作ったサンプル
