「FOSS4G Hokkaido」にてD3.jsに関する講演をさせていただくこになりました。
FOSS4G 2014 Hokkaido 「FOSS4G Hokkaido」は地理空間情報を扱うオープンソースソフトウェアのカンファレンスです。 主催であるOSGeo財団日本支部様にご依頼いただき、6/27〜6/29に行われる「FOSS4G 2014 Hokkaido」にてD3.jsに関する講演を行わせていただくことになりました。 二日目「6/28(土) ジオメディアサミット in FOSS4G Hokkaido」にて13:00より「D3.jsを用いた地理情報のビジュアライズ」という内容でお話させていただきます。 Web系のイベントでD3.jsのライトニングトークを行ったり、自分でも勉強会を主催したことはあるのですが、実のところGIS関係のイベントに参加するのは今回が初めてで、結構緊張してます（＾＾；） 現在絶賛講演資料作成中なのですが、もしこのブログを読んでいる方のなかで「D3.jsに関
【D3.js】隣接する区画を表示する
d3.json("ken.topojson", function(json) { draw(json); }); function draw(json){ //geoデータ var geodata = json.objects.ken; //geometrieから隣接するパスのインデックス情報を取得 var neighbors = topojson.neighbors(geodata.geometries); var projection = d3.geo .mercator() //投影法の指定 .scale(2000) //スケール（ズーム）の指定 .translate([500,450]) //表示位置調整 .center([139.0032936, 36.3219088]); //中心の座標を指定 var path = d3.geo.path().projection(projec
オンブラウザで3分で始める d3.js - 君たちは永遠にそいつらより若い
Day 11 は、Keiichiro Onoさんでした。 スクリプトを書かずに各種グラフデータをD3.jsで扱える形式に書き出す https://github.com/keiono/d3-layout-sample Day 12: d3.js Advent Calendar 2013 こんにちは。くてけんです。 皆様のご利益のある霊験あらたかな記事を拝んでいる日々ですが、d3.js 人口が少な過ぎる昨今のために、私は表題のようなライトな入門記事を書いてみました。「d3.jsっておもしろそうだねー（でもやったこと無い）」とほざく足の重い友人に本記事を押し付けて、d3.js人口の増加をお祈りしたいと思います。 さて、時間も限られているので、気持ちを切り替えてさくさく行きます！ 〜1:00 ヒトのコードを動かしてみる 〜2:00 ちょろっと変えて動かしてみる 〜3:00 ドキュントとすごい人の作
福岡市のオープンデータを使用して交通危険個所マップを作成しました。
Civic Tech Advent Calendar 2013 11日目 参加記事です。 Civic Tecとはなんぞや？という方はこちらを。 最近のオープンデータ促進の流れを受けて、いくつかの自治体でデータの公開がおこなわれています。 その中の一つ、福岡市のオープンデータ(サンプル)にて公開されている交通危険個所データをGoogle Map上にヒートマップとして表示してみました。 example SVGを使用しているので、IE9以上Chrome推奨です。 データの入手元は以下です。 福岡市サンプルデータサイト I02交通危険箇所、D01小学校 以前、福岡市のサンプルデータを使用して「防犯危険箇所ヒートマップ＆ボロノイ図」を作成したことがあるのですが、今回はもう少し実用的なものができないか試してみました。 使用用途としては、小学校までの通学路上の交通危険個所のチェックを想定してます。 Go
D3.jsとOpen Data〜その１地図を描画する - Qiita
この記事はD3.js Advent Calendar 2013の9日目です。Open Dataと大きなことを言いましたが、今回は行政データの基本のキであるところの地図を描画してみます。なわけで地図を描画するところがゴールです。 今回の完成図は下記です。国土交通省から神奈川県の行政区域データを取得しD3.jsで描画します。ついでにホームタウンとしているJリーグチーム毎に色塗りしてみました。(マリノスの最終節については触れるべからず！) サンプルページはこちら D3 Geo Projection D3.jsには地理描画機能がデフォルトで含まれており、さまざまな投影法によって地形データを描画することができます。 https://github.com/mbostock/d3/wiki/Geo-Projections この機能を使って地図を描画します データの入手 まずは国土交通省のページから行政区
「D3.js」を使ったデータビジュアライゼーション
Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取ることは困難です。そこで、データの見せ方や伝え方が重要になってきます。 D3.jsとは D3.jsは、Mike Bostock（mbostock）が作成したデータ可視化用途で人気のJavaScriptライブラリで、データをDOMと結びつけ、データ駆動によりグラフを作成することができます。ソースコードはGithubで公開されており、人気を表すStarの数がGithubに公開されているリポジトリ全体で6番目に多いことからも、注目の高さが伺えます（2013/10現在）。ライセンスは修正BSD
D3.js勉強会（地図入門）を開催しました。
example D3.js勉強会（地図入門）が無事終了しました。 前回は、ネタ不足で時間が余りましたが、今回はそんなこともなくそれなりに内容のある勉強会になったのではないかと。 逆に時間が足りず伝えきれなかった部分もあるとは思うのですが、目標であった「塗り分け地図(コロプレス図)の作成」まで出来たので良しとしようかなと。 勉強会で使用したスライドとコードを置いておきます。 D3で地図を描こう！ 1 D3で地図を描こう！ 2 サンプルコード (サンプルコードはローカル環境では動きません。サーバーにアップロードするか、同梱したserver.jsを使用してください) スライドの方は内容をまとめきれず、口頭で補足・説明した部分も多いので、これだけみてもよくわからないかもしれません。 まぁ、それでも多少参考になれば良いかなぁと。 ひとまず、やりたかったD3 geoに関する勉強会が開催できたので満足で
D3.js と GeoJSON でポリゴンを描く
こちらの記事を参考にして、東京都のポリゴンを描いてみます。 D3.jsとTopoJSONで地図を作る 違いは２点です。 イギリスではなく「東京都」のポリゴンを使う TopoJSON に変換せず GeoJSON を使う 作成したものは下記のページに置いてみました。 http://s.kitazaki.name/apps/tokyo-polygon/ 「２３区」と「島しょ部除く」のデータはすんなり表示されると思いますが、 「全域」のデータは大きいのでかなり時間がかかります。 これは TopoJSON を使う動機付けになりそうです。 目次 データを探す ツール類のインストール データの変換 データの読み込み ポリゴンの表示 ポリゴンのスタイル設定 インタラクションの追加 終わりに データを探す まずは境界線を持つポリゴンデータを探します。 国土交通省の国土政策局という部署が「国土数値情報ダウンロ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ja.d3js.info/alignedleft/tutorials/d3/