D3.js バージョン 3.0 とTopoJSON で地図を作る

3.0の新機能紹介文を訳してみました。 https://github.com/mbostock/d3/wiki/JP-3.0 その後、 D3.js 作者 Mike Bostock氏自身によるチュートリアル が公開されました 原文: "Let's make a Map" http://bost.ocks.org/mike/map/ 続きを読む
1
Mike Bostock @mbostock

D3 3.0 has landed! Amazing new d3.geo by @jasondavies, better transitions, xhr, and more! https://t.co/IoM4poaw #d3js

2012-12-22 02:28:46
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

おお、ついに d3.js バージョン3がリリースだ\(^o^)/ https://t.co/J3pOT4RB http://t.co/5CAOivii

2012-12-22 03:59:50
拡大
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

よし、さっそく予定変更。バージョン3の紹介文訳そう。

2012-12-22 04:13:30
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

うわー、翻訳の前に地図の投影図法について調べてるだけでこんな時間になった。久米ラジの始まる前にとても終わりそうにない。

2012-12-22 11:23:53
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

モルワイデ図法くらいしかわからん \(^o^)/ http://t.co/q4P2nxfQ

2012-12-22 12:18:22
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

なんでvan der grintenがヴァン・デル・グリテンとなってるんだろう?グリンテンでなくて。うーん。まぁwikipediaにあわせとくか…。

2012-12-22 12:25:24
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

transitionは、米国英語ではやっぱり「トランシション」が一般的なようだけど、どうなんだろ。こんど youtube でd3.jsのチュートリアル聴くときに確認してみよう(ほとんど聴き取れないけど)。でもカタカナ表記に関しては「トランジション」が圧倒的に多いね。

2012-12-22 17:04:57
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

とりあえず荒訳は終わった。もう少しいじってアップしよう。

2012-12-22 17:05:39
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

次は 2.xから3.0へのアップグレード法のページ、と思ったけど、どうしようか。結構分量あるし、そもそも日本人でアップグレードに困るほど2.xを使いこんでる人はそう多くないだろう。ていうかそういう人は普通に原文読めるはずだ!やっぱAPIの訳優先だな。

2012-12-22 19:35:11
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

D3.js API リファレンスの訳をしながらその分量に圧倒されて思うことは、このライブラリの機能の豊富さと奥深さ。もし、「ちょっと手軽に JavaScriptで地図を作りたい」と思ってこのライブラリに手を出したらきっと後悔すると思う。

2012-12-22 19:39:47
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

言ってみれば D3.jsは、「ちょっと手軽に地図を作るためのツールやテンプレート」を作るためのライブラリだと思う。たとえば http://t.co/ZDyTpDWN とか http://t.co/o3VgVUBi みたいな。

2012-12-22 19:45:39
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

両者の関係は、JavaScript と jQuery、あるいは jQuery と jQuery プラグインの関係に似てるかもしれない。

2012-12-22 19:46:20
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

そうした出来合いのツールに飽き足らない人が低レベルのところから視覚化アプリを作りたいために使うのが D3.js 、ということになると思う。

2012-12-22 19:47:23
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

作者自身が語っているように、D3.js は JavaScriptの関数型言語としての側面に強く依存して作られたライブラリであり、使用者にも関数型プログラミングの心得を要求している。

2012-12-22 19:49:23
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

もちろん JavaScript の一般的知識、オブジェクトの扱い、特に DOM 操作に習熟していることは前提だ。

2012-12-22 19:50:21
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

でもまぁ、D3.js を勉強しながらそうした知識を身につけていうというのもアリだと思うので気軽に tryするのは全然悪くない。触っていて楽しいライブラリなのは間違いない。

2012-12-22 19:52:28
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

最近は日本語の情報も増えてきたので、d3.js で検索すれば結構チュートリアルのたぐいは見つかる。英語が読めればそれこそwebページでもyoutubeでも無数に見つかる。

2012-12-22 19:54:54
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

というか、なぜかこの D3.js、「チュートリアルを作ってみたい」と思わせるライブラリのようで、毎週のように新しいチュートリアルが見つかる。もちろんライブラリを使って本来の用途のデータ視覚化、マップを作成するサイトもやまほど。

2012-12-22 19:56:50
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

ただ、本家サイト( http://t.co/Y98YMyCq )の情報もはんぱなく、実際ここのトップページから順に見ていくのが一番早道のような気もする。トップページの和訳は一応完成している(下手くそな日本語訳だけど) http://t.co/Jx1WIUBu

2012-12-22 19:58:41
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

書籍も2冊でている。いずれもo'reillyから。"Interactive Data Visualization for the Web" http://t.co/QBzlbVyx と"Getting Started with D3" http://t.co/7LxtYSCJ

2012-12-22 20:02:11
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

"Interactive Data Visualization for the Web"は、つい最近出たばかりのEarly Release版(草稿版)だけで、まだざっとしか目を通してないけど、わりと良い本じゃないかと思う。

2012-12-22 20:03:37
H.Sakai 🚲UberEats大阪🍔🍱🍜 @FoD5

Data Visualizationの基本的な考え方から始まって、セットアップ手順や関数、アプリの作り方を一つ一つ丁寧に解説している。今のEarly Release版は250頁中の186頁まで埋まってる。

2012-12-22 20:06:09