Microsoftのデータ可視化ツール「SandDance」がオープンソース化
公式サイト 概要 SandDanceは、WebGLを用いたBIツールで巨大なデータセットを素早く可視化し、複数のビュー間を滑らかなアニメーションでトランジションさせることで新たな知見を得ることができるBIツールだそうです(公式サイトより) サンプル画像でもカッコいいアニメーションが目を引きます。 deck.glのショーケースページで紹介されていて、個人的に興味を持っていたのですが、先日Microsoftの公式ブログでオープンソース化されることが発表されました。 Microsoft open sources SandDance, a visual data exploration tool - Open Source Blog Github やたらパーティクルが飛び交ってカッコいいです。 慣れないと無意味な3Dチャートとか作ってしまいかねない危うさはありますが、内部ではDeck.glやVeg
Uber社の全部盛りデータ可視化ツールスイート「Vis.gl」一覧
Vis.gl – Uber Vis Team Uber社がオープンソースとして公開している可視化ツールでは「deck.gl」が有名ですが、他にもUber社の持つ巨大なデータセットを分析するために作成されたさまざまなデータ可視化ツールがオープンソースとして公開されています。「Vis.gl」はそれらUber社が作成し公開している可視化ツールをまとめた呼び名で、現在では11点ほどのデータ可視化に有用なツールが公開されており今なお増え続けています。 ここでは、「Vis.gl」スイートとして公開されているツールを一通りざっと紹介したいと思います。（一部、Vis.gl以外でUber社が公開しているツールも含んでいます） ■データビジュアライゼーションフレームワーク ・deck.gl WebGLを用いて大量のデータを可視化することに長けたフレームワーク。 レイヤーベースのコンポーネントとして作られていて
データビジュアライゼーションの作り方
主なお仕事 日経:Visual Data 本日の目録 VDataコンテンツの作り方 D3.js バッドノウハウ集 Z-indexが効かない問題 Pathのトランジション 折り返さない問題 svgをpngに変換(つらい) VDataコンテンツの作り方 制作フロー 企画発案（記者より） データ収集・分析・整形 デザイン案やモックを作って打ち合わせ デザイン決定 実装 宣伝用の素材等作成 (SNSに流す用のグラフィックスや動画など) 作成チーム ＰＭ１人 デザイナー３人 エンジニア２人 ２ライン(デザイナー１、エンジニア１) 作成期間（２週間〜４週間）、速報(６時間) 一点物が多い これらの条件を踏まえ、日経ビジュアルデータではD3.jsというライブラリを採用しています。 D3.js データビジュアライゼーションライブラリ 特徴 Data-Driven Document デファクトスタンダード
【D3.js】サーマーウォーズのワールドクロックを作る
アノ時計っぽいものを作ってみました。 example 解説 基本的には下記事のコードをちょこちょこっと改良しただけです。 【D3.js】 SVGで地球儀を描く 地軸を傾けながらSVGで地球儀を表示する ポイントとしては地形を裏用(グレー)と表用(ピンク)に２重に描画しているところでしょうか。 clipAngleメソッドを使って描画される範囲を変えています。 ・裏用地形描画 var projection180 = d3.geo.orthographic() .scale(windowWidht/4) .rotate([0,0,0]) .translate([windowWidht / 2, windowHeight / 2]) .clipAngle(180); var backPath = d3.geo.path().projection(projection180); //地形(裏) va
大阪市のオープンデータを使って、ひったくり事件発生個所を視覚化してみた。
[2016/6/8 data update] 以前、大阪都構想住民投票結果の地図を作った際に、大阪市のオープンデータの中に犯罪発生個所データがあるのを発見したので、そのなかから「ひったくり発生個所」データを視覚化してみました。 大阪市市民の方へ 大阪市の犯罪発生情報 example データの読み込みと整形処理が結構重いので、ページが表示されるまでに時間がかかります。 画面上位にある「被害者の年齢」や「事件発生時刻」のヒストグラムは、バーをクリックするとデータの絞り込みを行えます。グラフの空白部分をクリックすると、絞り込みを解除します。 地図上のエリアをクリックすると下に事件に関するデータを表示します。 めんどうだったこと 公開されているcsvの町名の一部が旧漢字だったため、e-statから取得した町丁目境データと名寄せするのがめんどくさかったです。 本来は新漢字に寄せた方がよいのでしょうが
新しい地理院地図のソースコードがGitHubに公開されていたので、Fx0(FirefoxOS)にアプリとしてインストールしてみた。
国土地理院、「地理院地図」がスマホ対応、「触地図」特設サイトや西之島のGIFアニメも登場 スマートフォンやタブレット端末に対応して使いやすくなった地理院地図ですが、そのソースコードがGithubにて公開されています。 gsi-cyberjapan/gsimaps (利用する場合の注意点については、README.mdを参照ください) すごい……すごいぞ国土地理院！ これで、誰でも自分専用の地理院地図を作って利用することができますね！ すでに「地図タイルを追加する方法」を書かれている方も。 地理院地図に地図タイルを追加して公開する方法 そこで自分も、最近買ったばっかりのFx0に地理院地図をアプリとしてインストールしてみました。 やったこと 下記からzipファイルをダウンロード。 gsi-cyberjapan/gsimaps １．Firefox Developer EditionのWebIDEで
D3.jsはなぜ人気があるのか？ そして、なぜ難しいのか？
個人的なD3愛についてはこちらに。 日本ではまだまだ知名度の低いD3.jsですが、海外ではGithubの人気レポジトリランキングで上位(現在7位)に上がるなど非常に注目度の高いライブラリです。 JavaScriptには他にも多数のChartライブラリが存在しているのですが、その中でなぜD3がこんなにも注目されているのか？ その理由を考えてみました。 結論 なんかスッゲー長くなったので先に結論を書いておきます。 他のChartライブラリより柔軟性が高いコードが簡潔に書けるJavaScriptの面白さを味わえる理解が進む程に惹かれる設計の妙 以上。以下、詳細。 柔軟性 データをグラフとして表示するには、データを画面上の座標に変換しなければなりません。散布図として表示するためにはデータの値を画面上のXY座標変換する必要がありますし、円グラフとして表示するには値の割合からそれぞれの内角の角度などを
【D3.js + node.js】 ブログのデータをGithub風のカレンダーに表示する
example WordPressもくもく勉強会@群馬 #1で作成したものです。 サンプルコードが公開されているのでそれを元に作成しました。 Githubのカレンダー表示機能はD3.jsで作成されているのですが、そのBlog版のようなものです。 ↓これ 色がついているセルが記事を描いた日、同じ日に書いた記事が多いほど濃い緑色で表示されるようになってます。 セルにマウスオーバーすると記事のタイトルが表示されクリックするとその日のブログ記事へ飛びます。 カレンダーにしてみると、ブログ記事を頑張って書いた月とそうでもない月が一瞥できてなかなか面白いですね。 データセットの作成 WordPressのダッシュボードから「ツール→エクスポート」を選択し、投稿記事をエクスポートします。 エクスポートしたxmlファイルをnode.jsを使ってjsonに変換しました。 変換スクリプトは、以前RSSリーダーを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
