群馬県 地域別対前月人口増減
example 先週末のもくもく会で作っていたページです。 週末もくもく会 in 桐生駅 2010年から2013年までの、群馬県内各市町村における毎月の人口増減を色分けして表示しています。 前月に対して人口が増えた場合は青で、逆に人口が減った場合は黒く塗りつぶしています。地域をクリックすると人口データの詳細が確認できます。 作っていてちょっと面白いと思ったのは、人口の増える月減る月が大体決まっているところでしょうか。もっと年によってばらつきがあるものかと思っていました。まぁ、この図では「前月と比較して減ったか増えたか」しか分からず「どのくらい減ったのか」などの比較はできないのですが。地域ごとの傾向をみるにはよいかなと。 しかし、じわりじわりと減っていますね。 追記 ついでに、転入・転出の数値で色塗りしてみました。 でも、『一年のなかで「４月、５月」が、一番、転入数と転出数が多い』という至極
Google Map上にGeoJSONデータを表示する | GUNMA GIS GEEK
Google、地図アプリのデベロッパー向けJavaScript APIでGeoJSONをサポート Google Maps APIでGeoJSONデータがサポートされたらしいので、試してみました。（一部、D3.jsを使用しています） 【参考】 Combining and visualising multiple data sources – Google Maps API — Google Developers ポイントデータを表示 ポイント(点)データは、スタイルを指定しないとマーカーで表示される。 example サンプルコード google.maps.event.addDomListener(window, 'load', function() { //Google Maps初期化 var map = new google.maps.Map(document.getElementByI
群馬県の地図情報システム
今月(3/3より)前橋市で、地図情報が閲覧できるサービスが開始されました。 公開時に上毛新聞で紹介があったみたいなのですが……ぶっちゃけ、Facebookで教えてもらうまでまったく知りませんでした。 グロースハックとまでは言わないものの、どうせならもっとネットでもPRすれば良いのに、とか思うのですがとりあえずブログで紹介してみます。 機能としては、地図上に市の施設のほか、学校区や避難所、都市計画用途地域、道路台帳平面図などさまざまな情報を表示できたり、作図ツールを使って自ら色々書き込んだり書き込んだ地図を印刷して使ったりすることができます。 「Google Mapでよくね？」みたいな話もあるわけですがGoogle Mapは色々と利用に制限があったりしますし、せっかくなので是非活用して欲しいなと思います。 ちなみに、高崎市や群馬県では以前より地図情報システムが公開されているので、一緒に掲載し
「エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化」感想
データの可視化とは、「データに含まれる事実・示唆を効率よく発見する技術」、「データから発見した事実・示唆を明確に伝える技術」ということができます。本書では、データ可視化の基本に始まり、何を可視化すべきで、誤った考え方は何かなどを解き明かしたあと、JavaScriptライブラリD3.jsの使い方、D3.jsによるWebの可視化のさまざまなケーススタディまで、エンジニアの方がさまざまな業務の現場で直面するであろうデータ可視化の考え方と手法をわかりやすく解説します。 @AntiBayesianさんより献本をいただきました。 ありがとうございます。 オーライリーから出版されたD3本と発売日が近かったこともあって、「D3本」としての印象が強いようですが、本書は「データ可視化」に関する入門書です。 「データの中から重要な事実・示唆を見つけ出す」「見つけた情報を正しくわかりやすく伝える」といったデータビ
![「エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化」感想](https://cdn-ak-scissors.b.st-hatena.com/image/square/f7cc07f2bc834e0079b4e8b12b2c8dca05f1fd0c/height=288;version=1;width=512/https%3A%2F%2Fgunmagisgeek.com%2Fblog%2Fwp-content%2Fuploads%2F2014%2F02%2F5163XBvWrkL._SL160_.jpg)
なわばりの数理モデル
生物が餌場を争ってできる縄張り,コンビニが顧客を囲い込んでできる商圏,結晶が核から成長してできる単結晶領域,河川が雨水を受け持つ流域,救急病院や公立図書館などの公共施設がサービスを受け持つ地区など,いくつかの個体が勢力を競い合ったり分担し合ったりして空間を分け合う姿は,身の回りのいたるところで観察できる。この姿を,「なわばり」を表す空間分割図形として捉えることによって,自然界や人間社会における多くの現象が統一的視点から解析できるとともに,さまざまなものづくりに役立つことを紹介する。 ボロノイ図に関する書籍です。 以前、Google Map上にD3を使ってボロノイ図を描くというのを記事を書きましたが、D3を使えば比較的簡単にボロノイ図を書く事が出来ると知ってもっと活用できないかと思い購入しました。 読んでみると思っていた以上に活用範囲が広く、画像処理や、複雑な図形の中に最大の大きさで文字を描
Code for Americaに学ぶ、2014年に必要とされるスキル
「Code for America」については、以下の記事を参照してください。 米政府をハックする「Code for America」 Fellowsのスキルセットから需要を探る 「Code for America」では、毎年、全米から募集してきたエンジニア/デザイナーを厳選して自治体へ派遣する、「Fellowship」というプロジェクトを行っています。 今年も650名の募集の中から30名のエンジニア/デザイナーが選ばれています。Fellowに選ばれたエンジニア/デザイナーはcfaのサイトでプロフィールが掲載されるのですが、多くのFellowがLinkedInへのリンクも貼っているのでLinkedInのプロフィール画面から各人の詳細なスキルを確認することができます。 2014 Fellows そこで各人の「スキル」タグを収集すれば、2014年にCfAに必要と判断された需要の高い技術が見て取
日米のオープンデータを比較してみた
【2014/04/03 追記】 data.go.jpが急死(休止)しているので、data.go.jpに関しては4/02移行更新してていません。 【2014/05/16 追記】 data.go.jpが再開したので、スクレイピングも再開しました。 アメリカのオープンデータカタログサイト「data.gov」と、日本のオープンデータカタログサイト「data.go.jp」で、公開されているオープンデータの比較を行ってみました。 公開されているデータのフォーマット(ファイル形式)で、数の多いもの上位20をツリーマップとして表示しています。 赤い方がdata.go.jpのデータで、青い方がdata.govのデータです。 日本の場合、公開されているデータセットの８割以上が「PDF」「HTML」「XML」、アメリカの場合は「HTML」「ZIP」「XML」が半分ぐらいといったところです。 アメリカもフォーマッ
前橋市のオープンデータを使ってカレンダー(サンプル)を作ってみた
example 年始の記事でこんなことを書きましたが、願いが通じたのか、群馬県前橋市でオープンデータへの取り組みが開始されました。 前橋市におけるオープンデータの取組について ｷｬｰゞ(^o^ゝ)≡(/^ｰ^)/”””ﾊﾟﾁﾊﾟﾁ 誠にめでたいことであります。 そんなわけで、公開されたイベントデータを使ってとりあえずカレンダーを作ってみました。例によってIE ver.9以上、Chrome推奨です。 「全て終わったイベントのデータしかないじゃないか」とか「日時データには月日だけじゃなく年も付けて欲しい」とか、諸々言いたい事はありますが、今後の展開に期待したいと思います。 (できれば高崎市でも同様にオープンデータへの取り組みが始まると嬉しいのですが) ところで、今回のカレンダーは「Fullcalendar.js」と「Google Maps API」を使って作ってみたのですが、この組み合わせはな
2013年に話題になったデータビジュアライゼーション作品
2013年はデータビジュアライゼーション作品が盛んに発表された年でした。 (海外では) 様々なサイトで、去年流行したビジュアライゼーション作品の紹介記事が掲載されます。 2013年に発表されたインフォグラフィック総集編（動画あり） Data and visualization year in review, 2013 The Best Scientific Visualizations of 2013 The Most Amazing, Beautiful and Viral Maps of the Year そこで個人的に、去年みた視覚化作品の中から印象に残ったものを紹介します。 東京風速 東京都の風の流れを可視化した作品。この作品は見たことのある方が多いのではないでしょうか。 世界風速 こちらは、全世界の風の流れを地球議上に表示した作品。とても奇麗です。 Twitter Co. Con
GISの参考書はどこにあるのか？
GIS、それもQGISの参考書を探しております。 ネットを検索して見つけたリソースで、少しづつ少しづつ勉強していっているのですが、どうにも知識が断片的・パッチワークになりがちなので、参考書を購入しようかなと思い立ったのですが、その過程でちょっと気づいたことがあるったので記事にしてみます。 専門の方からすると当たり前の事なのかもしれませんが、私のように専門外のエンジニアでGISを学ぼうと思っている方には驚きの事実なんじゃないかと思うので。 驚いたこと、それは…… GISの参考書は書店の「コンピュータ書籍」コーナーには置いてない！ （本屋によって違うかも） そもそも入荷されていないケースが多いのですが、たとえ在庫があったとしてもオライリー本が並んでる棚の周辺を探し回っても、その周辺には置いてないんです。 では、いったいどのコーナーにあるのか？ これがよくわからないんですよねー。 書店で、書籍の
PDFから表データをぶっこ抜く「Nitro Cloud」
DATA GO JPに並んでいるデータセットが「PDFばかりじゃないか！」とお嘆きの方へ。 Nitoro Cloud PDF to Excel PDFで公開されているデータというのは、わりと扱いにくかったりします。 ドキュメント内で表組みされているデータを取得しようと、表を選択してExcelにコピペしても表のレイアウト情報はコピーされないため整形しなおす必要があったりするので、しごくメンドウです。 「Nitro Cloud」は、PDF内の表データをぶっこ抜いてExcelファイルに変換してくれるクラウドサービスです。 かなりの精度で表データを抜き出してくれるため、非常に便利です。 サンプル 月５ドキュメントまで無料で使用できるので、PDFからデータを取得したいと考えている方は、利用してみてはいかがでしょうか。 関連記事 ひとりオープンデータソンやってみました。
日本版「DATA.GOV」が出来たそうなのですが、ここらでちょっと整理が必要ではないかと思います。
政府、オープンデータ活用サイトを12月20日に開設 全省庁１万のデータ群を開放する「ＤＡＴＡ.ＧＯＶ」日本版 日本版「DATA.GOV」ができたそうです。 DATA GO JP これはこれで、とてもありがたいんですが、今までの「Open Data METI」とか「Databox」とかはどうなるんでしょうか。 Open DATA METI | 経済産業省のオープンデータカタログサイト 経済省の統計利活用サイト データボックス 経済産業省はちょっと似たようなサイト作りすぎだと思います。「アイデアボックス」とか。 オープンガバメント・アイディアボックス オープンデータアイディアボックス 他にも「日本版CKAN」や「 ビッグデータ・オープンデータ活用推進協議会オープンデータポータル」とか、「LinkData」とか「CityData」など、官民含めると、かなり多数のデータカタログサイト／データポータ
地理空間情報作成・編集・共有サイト「geojson.io」
geojson.ioは、地理空間情報(GeoJSON)の作成・編集・共有が行えるWebサービスです。 エディタを使ってマーカーの設置や、ライン(線)、ポリゴン(面)情報を作成し属性情報の編集などを行うことができます。地理情報の編集中は常にgeojsonhintを使ってエラーチェックが行われるので、テキストエディタなどでJSONを編集するのに比べて安全です。読み込めるデータ形式としては「GeoJSON, TopoJSON, KML, CSV, GPX, OSM XML」をサポートしています。 詳しい操作方法は、作者さんが書かれている記事を見てください。 geojson.io – macwright.org 動画チュートリアル 作成したGeoJSONデータは、iframeを使ってサイトに埋め込んだり、パーマリンクで共有することができます。 geojson.ioはオープンソースプロジェクトとして
【D3.js】全国の熱中症発生数を表示してみた（tSVデータ読み込み）
とりあえず、色々やってみて覚えよう！ってことで。 「国立環境研究所」よりいただいた熱中症発生数のデータを可視化。 ダウンロードしたtsvファイルの文字コードをUTF8にコンバートしてD3に読み込ませています。 //熱中症データの読み込み d3.tsv("2017_3_6_16_38.tsv", function(data) { //文字データを数値に変換 data.forEach(function(d){ d['指標値(単位:人/10万人)'] = +d['指標値(単位:人/10万人)'] * 100000; }); var svg = d3.select('svg'); var w = svg.node().clientWidth; var h = svg.node().clientHeight; var radius = (w/11); //サークルの半径 var margin = r
ひとりオープンデータソンやってみました。
オープンデータ Advent Calendar 2013 13日目の参加記事です。 @_ujigisさんが書かれていた”「地理空間情報オープンデータソン」したらどうかな？“の記事に感銘を受けまして、ひとりオープンデータソンをやってみました。 ターゲット 今年の11月に福井市役所のサイトがオープンバイデフォルトとなりました。ライセンス条件の範囲内であれば、福井市のサイトに掲載されている情報を自由に利用できるようになっています。 今回は、福井市で公開されている情報を、使いやすいデータセットにコンバートする作業をおこなってみます。 元データ 公私立保育園(認定こども園含む)一覧 元データはTableで作成された表データと、GoogleMap上にマッピングされた場所データです。 これはこれでありがたい情報ですが、このままでは決して使いやすいデータというわけではありません。 せっかく、場所情報(緯度
スクレーパー共有サイト「ScraperWiki」がリニューアルして凄い事に！
以前、オープンデータまで待てない人の、スクレーパー共有サイト(ScraperWiki)という記事を書きましたが、スクレーパー(クローラー)共有サイトのScraperWikiが大幅にリニューアルされていました。 データを取得するだけでなく、データの可視化、分析などまでも行えるデータサイエンスのプラットフォームとなることを目指すそうです。 ScraperWiki is a platform for doing data science on the web We help individuals and businesses to get, clean, visualise, analyse and manage data from thousands of sources. For science, journalism, lead generation—whatever you need.
D3.jsとFabric.jsを使ってcanvasに描画する
d3.js Advent Calendar 2013 4日目の参加記事です。 以前も、Fabric.jsについては書いたことがあるのですが、D3とFabricの組み合わせにはいろいろな可能性を感じるので、布教のつもりで改めて記事にしたいと思います。 Fabricは、HTML5のcanvas要素を使いやすくするJavaScriptのグラフィックライブラリです。 最近では、Canvas は、私たちが、全く 驚くべき グラフィックス をウェブ上で作ることを可能にしました。しかし、 CanvasのAPIが提供するのは、残念ながら低水準です。 もし、私たちが単に基本的な図形を canvas上にほとんど描きたいと思わず、そのことを忘れてしまえば別ですが、 どんな形にせよインタラクションが必要になったり、 いかなる点であれ、絵の変更が必要になったり、もっと複雑な図形を 描くことが必要になったら、状況は一
Qiitaソーシャルグラフの視覚化。
……失敗かな。 example 各ユーザーのフォローデータはAPIから取得しました。 Qiita API document 関係性(フォローの状態)を Force Layoutにしてみましたが、ぶっちゃけあまり見やすくありません。 分かり易く表示するなら、もっと別の表現を使用した方がよさそうですね。 サンプル pathの先頭に矢印を付けるのと、アイコン画像を丸く切り取るのに、svgのdef要素とclipPath要素を使用しています。 <svg> <clipPath id="cut-off-circle"> <circle cx=0 cy=0 r=15 /> </clipPath> <defs> <marker id="licensing" viewBox="0 -5 10 10" refX="15" refY="-1.5" markerWidth="6" markerHeight="6"
【D3.js&Three.js】各都道府県の人口に合わせて高さを変えてみた（3D地図）
example 昨日の記事の続きです。 各都道府県の人口データを元にMeshの厚みを変えてみました。 人口の多い県ほど高く表示されます。 サンプル d3.json("japan.geojson", function(json) { d3main(json); }); function d3main(json) { var container; var camera, scene, renderer; var mesh; initScene(); function initScene() { container = document.createElement('div'); document.body.appendChild(container); //シーンの追加 scene = new THREE.Scene(); //カメラの設定 camera = new THREE.Perspec
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Earthを使ったストーリマップをブラウザ上で作成できるサービス「Tour Builder」
