【D3.js】ドロネー三角分割図を作成してみた
example ボロノイ図と対になるドロネー図をGoogle Map上に表示してみました。 D3がドローネ図を描画するために必要な座標の計算を行ってくれるので、簡単に表示することができます。 【参考】 ドローネ図 サンプル ドローネ図を描いている部分だけ。 //ボロノイ変換関数 var voronoi = d3.geom.voronoi() .x(function(d){ return d.x } ) .y(function(d){ return d.y } ); //ドロネー座標データ取得 var delaunay = voronoi.triangles(positions); //ドロネー図パス描画 var du = svgoverlay.selectAll(".du") .data(delaunay) .enter() .append("path") .attr("class", "
ボロノイ図を使ってラベルの重なり合いを解消する
画像をクリックすると、デモページに飛びます。 見づらいラベル 地図上に沢山のラベルを並べると、位置によっては重なり合ってとても見ずらくなります。 このラベルの配置位置をボロノイ図を利用して重なり合わないように配置してみます。 母点から中心点へ まず、ポイントを母点としたボロノイ図を描きます。 各ボロノイのセル（ボロノイ領域）の中心点を求め、母点から中心点へのラインを引きました。 ボロノイ領域の中心点は、母点から見て空きスペースの方角となります。 この角度を利用してラベルを配置します。 中心点に向けてラベルを配置 単純にラインに沿う角度でテキストを回転(rotate)させました。 重なり合いは解消されましたが、必ずしも見やすくはありません。 （これはこれで活用方法がありそうですが） ラベル開始位置をずらす 母点からボロノイ領域の中心点の方角へ、ラベルの開始位置を少しずらして配置した例です。
福岡市のオープンデータを使用して交通危険個所マップを作成しました。
Civic Tech Advent Calendar 2013 11日目 参加記事です。 Civic Tecとはなんぞや？という方はこちらを。 最近のオープンデータ促進の流れを受けて、いくつかの自治体でデータの公開がおこなわれています。 その中の一つ、福岡市のオープンデータ(サンプル)にて公開されている交通危険個所データをGoogle Map上にヒートマップとして表示してみました。 example SVGを使用しているので、IE9以上Chrome推奨です。 データの入手元は以下です。 福岡市サンプルデータサイト I02交通危険箇所、D01小学校 以前、福岡市のサンプルデータを使用して「防犯危険箇所ヒートマップ＆ボロノイ図」を作成したことがあるのですが、今回はもう少し実用的なものができないか試してみました。 使用用途としては、小学校までの通学路上の交通危険個所のチェックを想定してます。 Go
D3で切り開くジオ・データ・ビジュアライゼーションの可能性
D3で切り開く ジオ・データ・ビジュアライゼーション の可能性 第12回 ジオメディアサミット〜ジオデータビジュライズの世界〜 Yuichi Yazaki / visualizing.jp / toy-by-algorithm.com 自己紹介 矢崎裕一 インターフェイス・デザイナー／コーダー／トイ・コンサルタント インフォグラフィック vs データ・ビジュアライゼーション インフォグラフィック 人が手作業かグラフィックアプリで描いている。 手元にあるデータの特性を作者が理解し、その特徴を最大化するために表現が選ばれる。 そのため、別のデータを使用して再作成するのが容易ではない。 表示についてのルールとその例外処理について作者以外の外部からすべてを推測することが難しい。 参照したデータとの関連性の証明が難しい。 インタラクションが（ほぼ）ない。 あるデータセットが、予め用意されたアルゴリズ
D3.js勉強会（地図入門）を開催しました。
example D3.js勉強会（地図入門）が無事終了しました。 前回は、ネタ不足で時間が余りましたが、今回はそんなこともなくそれなりに内容のある勉強会になったのではないかと。 逆に時間が足りず伝えきれなかった部分もあるとは思うのですが、目標であった「塗り分け地図(コロプレス図)の作成」まで出来たので良しとしようかなと。 勉強会で使用したスライドとコードを置いておきます。 D3で地図を描こう！ 1 D3で地図を描こう！ 2 サンプルコード (サンプルコードはローカル環境では動きません。サーバーにアップロードするか、同梱したserver.jsを使用してください) スライドの方は内容をまとめきれず、口頭で補足・説明した部分も多いので、これだけみてもよくわからないかもしれません。 まぁ、それでも多少参考になれば良いかなぁと。 ひとまず、やりたかったD3 geoに関する勉強会が開催できたので満足で
東京風速
About Control | «前日 – 1時間前 – 1時間後 – 翌日» – 最新 – 現在地 Overlay | None – Temp – Hum – WV – IN – NO – NO2 – NOX OX – SO2 – CO – CH4 – NMHC – SPM – PM2.5 Air Data | 東京都環境局環境改善部大気保全課 Map Data | 国土数値情報（行政区域データ）国土交通省 Author | Cameron Beccario @cambecc, Facebook, はてな Source | github.com/cambecc/air Modules | node.js, D3.js, when.js Inspiration | HINT.FM wind map 免責事項 | 正確な情報を提供するためのものではありません
Let’s Make a Map
Note: This article was written in 2012 and uses old versions of D3 and TopoJSON. I recommend you read my newer tutorial, Command-Line Cartography, instead! In this tutorial, I’ll cover how to make a modest map from scratch using D3 and TopoJSON. I’ll show you a few places where you can find free geographic data online, and how to convert it into a format that is both efficient and convenient for d
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
