【D3.js】D3.jsを使ってSVGで地図を描く
//プロジェクション設定 var projection = d3 .geoMercator() //投影法の指定 .scale(16000) //スケール（ズーム）の指定 .rotate([-0.25, 0.25, 0]) //地図を回転する [x,y,z] .center([139.0032936, 36.3219088]); //中心の座標を指定 //パスジェネレーター生成 var path = d3.geoPath().projection(projection); //地図用のステージ(SVGタグ)を作成 var map = d3.select("body") .append("svg") .attr("width", 960) .attr("height", 500); //地理データ読み込み d3.json("gunma.geojson", drawMaps); //地図を描画
TEDで学ぶデータビジュアライゼーション
TEDに公開されている日本語字幕の付いた動画のなかから、データビジュアライゼーションに関連する動画をピックアップしてみました。 視覚化 データビジュアライゼーションの美 私のデータセットであなたのマインドセットを変えてみせます 人間性を巧みに描く 人類の知識を表す視覚的表現の歴史 データで描く、示唆に富む肖像画 データの中に自分を見つけるには 統計 誤った統計を見抜く３つの方法 統計を好きになるべき理由 統計に騙される陪審員たち データ分析 ハリウッドに潜む性差別のデータ ビックデータを使ったNYCでの最悪な駐車場の見つけ方 アンドレア・シュライヒャー 「データに基づく学校改革」 地図 スティーブ・ジョンソンの感染地図 広げる価値のあるアイデアの地図作り （場所を示すだけではなく）私達が何者かを示す地図 分かりやすい地図のデザイン
巨大な地理空間データをサクッと可視化できる、Uber社製オープンソースwebGIS「Kepler.gl」
kepler.gl Uber社では、自社で集めた地理空間データを可視化するためのフレームワーク deck.gl をオープンソースとして公開していますが、deck.glを用いて作成されたwebGIS「Kepler.gl」のver.1.0が公開されました。 webGLに対応したブラウザであれば、サイトにアクセスするだけで利用できるので大規模な位置情報などを可視化するソフトウェアをお探しの方は試してみてはいかがでしょう。 1分でわかるKepler.glの使い方 「Add Data」ボタンでデータを追加して、「Add Layer」ボタンで可視化方法を選ぶというのが基本的な操作方法になります。 csvデータをアップロード 「Add Data」ボタンをクリックし、下記画像の赤枠で囲まれた部分に、緯度、経度のデータが含まれるcsvファイルをドラッグ＆ドロップします。 レイヤーを追加 「Add Layer
D3.js version.4を学ぶための学習リソースの紹介。
この記事は「D3.js Advent Calendar 2016」 参加記事です。 D3.jsメジャーバージョンアップ 2016年6月28日に、約４年ぶりとなるメジャーアップデート、D3.js ver.4が公開されました。 ながらく利用されてきたver.3から大幅な変更が行われ、とくに命名規則が大きく変わったため、ver.3のコードはver.4ではほとんど動かなくなっています。 どちらを使うべきか 各種プラグインなどのver.4への移行はだいぶ進んでいるとはいえ、ネット上のドキュメントなどはいまだver.3を対象としたものが多く、また現在出版されている日本語の参考書は全てver.3を元に書かれています。 しかし、ver.4には、ver.3での反省点も含め、アルゴリズムの最適化や、モジュール化、ver.3にはなかった便利な機能が多数追加されているので、個人的にはver.4をお勧めします。 私
【修正されました】埼玉県の「オープンデータ」がいろんな意味で凄い！
【追記】2015/7/13 12:00 利用規約が見直され、改めてオープンデータとして公開されたそうです。 7月7日に掲載しました「広報情報データの利用申請」につきましては、県民の皆様・関係機関からのご要望、ご指摘を踏まえ、利用申請等なしに誰もが本データを利用できる方式に変更いたしました。広報情報データのご利用の際は、以下の利用条件に従ってご利用ください。 広報情報データの利用について – 埼玉県 クリエイティブコモンズライセンスにおけるCC-BYで提供されることになりました。 今回の件に関する私の見解は以下記事に記載しました。 オープンでないものはオープンデータではない。 【追記】2015/7/9 19:00 いったん公開をとりやめることになったようです。 【元記事】 「オープンとはなんぞや？」という哲学的な問いすら浮かぶ事例をみかけたので記事にしてみた。 おさらい Open Defin
【D3.js】d3.zoomオブジェクトを使って Pan/Zoon を実装する。
D3.js v4ではd３.zoomオブジェクトを使用することで、簡単にパン／ズームを実装することができます。 var w = 900; var h = 500; var data = d3.range(0, 100).map(function(d){ return {"x": ~~(Math.random() * w ), "y": ~~(Math.random() * h), "r": ~~(Math.random() * 90) + 10 }; }); var svg = d3.select("svg") .attr("width", w) .attr("height", h) //ズーム対象とするレイヤーを生成 var zoomLayer = svg.append("g") //カラージェネレーター var color = d3.scaleOrdinal(d3.schemeCateg
【D3.js】「全ツイート履歴」からWord cloudを作ってみた。
嗜好がバレる。 自分のすべてのツイートをダウンロードできるようにしました 日本の皆さんにも「全ツイート履歴」が使えるようになりました 全ツイートのダウンロードが可能になっていたので、ダウンロードしたtweets.csvを使ってワードクラウドを作成してみました。 example データセット作成 過去の全ツイートから固有名詞を抜き出して出現回数順にランキングにしたデータを作成します。 2007年から使っているわりに、累計ツイート数が10,939件と少ないのでテキスト処理系コマンドとExcelを使って行いました。ツイート数が多い場合は、以下の方法では難しいかもしれません。 まず、Windowsで処理しやすいようにS-JISに変換します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
