D3.jsで地図を描画
D3.jsとは、JavaScriptでグラフや図などを描画するためのライブラリです。 このライブラリの機能の１つとして、地図を描画することができるため、今回はそれを使って遊んでみようと思います。 https://d3js.org/ データはベクトル形式のものを用意します。 ベクトル形式のデータは国土交通省のものを使います。 国土数値情報 行政区域データ http://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03.html ここから京都府の行政区分データを取得します。 必要なものは以下の3つのファイルです。 拡張子がshp: 経度・緯度の情報が含まれる 拡張子がdbf: 市町村名などの情報が含まれる 拡張子がshx: 上の2つのデータの対応関係の情報が含まれる これらのデータはD3.jsでは直接扱えないため、変換する必要があります。
【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); //地図を描画
D3.jsで埼玉県地図を描くときの基本（topojson） - Qiita
D3.jsで日本地図を描くときの基本(geojson) D3.jsで埼玉県地図を描くときの基本（topojson) D3.jsで埼玉県の地図上に市町村ラベルを描く 前回はGeoJSONフォーマットのデータを使って、D3.js(v4)で日本地図を描く方法を紹介しました。今回はTopoJSONフォーマットのデータを使って地図を描く方法を紹介したいと思います。同じ日本地図ではアレなので、今回は埼玉県の地図を描くことにします。 今回作成した埼玉県地図 https://s3-ap-northeast-1.amazonaws.com/kuki-app-bucket/japanmap/saitama.html １．TopoJSONについて GeoJSONは経度緯度の配列をデータとして持っていて、ポイントやライン、ポリゴンを描くことができました。TopoJSONはアーク（弧線）の配列を持っています。しかも
D3.jsで日本地図を描くときの基本(geojson) - Qiita
D3.jsで日本地図を描くときの基本(geojson) D3.jsで埼玉県地図を描くときの基本（topojson) D3.jsで埼玉県の地図上に市町村ラベルを描く D3.jsは便利で地図も簡単に描けますし、さらに高度なこともできます。ここでは基本的なことをまとめたいと思います。D3 v4で動作するソースコードを示します。サイト上にはD3 v3のものが多く、参考になるものが少なかったため誤りがあるかもしれませんがご了承ください。 今回作成したD3.jsプログラム https://s3-ap-northeast-1.amazonaws.com/kuki-app-bucket/japanmap/japan.html １．データの入手 地図のデータは通常shapefileのフォーマットとして提供されていることが多いようです。それをWebに描画する時は、GeoJSONフォーマットに変換して使います。
D3.jsを使って地図を作成(Windows版) - inutchの日記
久しぶりにコードを書きたくなり、普段仕事がインフラ系なのでなんかビジュアル系のものがやりたくてD3.jsで地図を描くことにしました。Webのチュートリアルが古かったり、mac前提だったりして環境設定でいろいろはまったのでメモ。2017年2月5日時点でのWindows 10でのメモです。 エディタ＋実行環境 Visual Studio Community 2015 にしました。JavaScriptでもインテリセンスが強力だし、F5を押したらIIS Expressを起動してくれるし。 「新規作成」>「Webサイト」>「ASP.NET空のWebサイト」でプロジェクト作成して、「追加」>「新しい項目の追加」>「HTMLページ」 その他ツール類の準備 各ツールの利用目的などの詳細は後で。 QGIS Welcome to the QGIS project! GISデータとして一般的なSHAPEファイル
D3.jsで地図のデータビジュアライズに挑戦！ - Qiita
講習 D3.jsの特徴 https://d3js.org/ データに基づいて、DOM（Document Object Model）を操作する、という考え方 各種チャート、グラフに必要な計算やデータ整形を賄ってくれる 表示はユーザーが自分で頑張って描く→自由！ ウェブ標準のリソースのみを利用しているのでライブラリがなくなっても困らない ブラウザ上で動く（これ大事！） SVGかCanvasでいったらSVG（ http://visualizing.jp/openvisconf2013-miguel/ ） 最近ヴァージョン4.0がでた 各機能が小さいライブラリに分割された CartoDBやMapboxなどのサービスとの違い 地形データを自分で用意する Leatlet.js（OpenStreetMap）やMapboxとの連携もできる ユーザーインターフェイスも自分で用意する 描画の自由さ たくさんの
D3.jsで日本地図を作成しデータを反映するサンプル（コロプレス地図） ｜ Tips Note by TAM
前回の記事「D3.jsの使い方とグラフを作成するサンプル」に引き続き、今回もD3.jsを使用します。 今回はD3.jsを使用してブラウザ上に日本地図を作成し、 CSVファイルに記載された果物の都道府県別出荷量のデータを反映してみます。 ⇒サンプルデモ（平成25年産 主要果樹都道府県別出荷量） まずは必要なデータを準備します。 [準備1] 地図データの取得（日本地図の座標データ / JSONファイル） 日本地図は座標データを元にSVGの要素を使用してパスを作成します。 ひとつひとつ座標データを設定するのは大変なので、フリーの地理データを使用します。 フリーの地理データは下記のサイトで取得できます。 ●Natural Earth このサイトで取得できるデータはShape形式なので、 これをブラウザ上で使用するために、Shape形式→GeoJSON→TopoJSONの順番で変換します。 GeoJ
PHPとMySQLで取得した値をD3.jsを使って描画するときの備忘録
タグ 1000万@typeAbemaTVairbnbAWAblocklyC++Century21CodeCampCREATOR'S HIVE （クリエイターズハイブ）CSSCTOCygamesC言語d3.jsDeNADIVEINTOCODEDMM英会話dockerDODADTPデザイナーDYMECCESESLintFintechfreeeGMOGMOペパボGoogleGoogleアナリティクスHTMLIE対策illustratorIoTIT企業IT求人ナビJACリクルートメントJavaJavaScriptjoevlogjQuerykakaku.comKLabLINELinkedinMERYMiidasmixiMySQLNHN PlayArtNianticNNTNON STYLEnoteNOVANYLONOB訪問offerboxoptPairsPhotoshopPHPphpmyadminpi
d3.jsで作ったバーンダウンチャート - Qiita
概要 d3.jsを使ってバーンダウンチャートを作ってみました。短いコードでデータをビジュアル化できるd3.jsは素晴らしいですね!! いろいろ試した結果、出来上がったJavaScript部分のコードをこちらに掲載します。 機能概要 サーバサイドからJSONデータを受け取りd3.jsを使ってSVG領域にバーンダウンチャートを描画します。予定線をグレー、実績線をオレンジ、工数合計線をグリーンとして折れ線グラフを作ります。各データのポイント部はマウスオーバー時に数値を表示します。 動作イメージ フィルタ条件に対応したJSONをAjaxで出力し、d3.jsによりSVG領域を再描画します。d3.jsの処理が高速なので、ストレス無く快適に操作できます。 JSONデータの例 データベースにはチケット毎に以下の項目を時系列に格納しています。各項目を日付毎にサマライズしたJSONを生成しd3.jsに渡します
JavaScript で始めるデータ ビジュアライゼーション –D3 連携編–
ArcGIS API for JavaScript を用いてデータ ビジュアライゼーションの手法とそれを実現する機能についてご紹介していく「JavaScript で始めるデータ ビジュアライゼーション」シリーズの第６弾です。 これまで紹介したサンプル コードとデモを確認したい方は GitHub リポジトリをご覧ください。 第１弾から様々な表現手法をお伝えしてきましたが、今回は少し趣向を変えて、データ ビジュアライゼーションを強みとするオープンソース JavaScript ライブラリである D3.js との連携例をご紹介します。 D3.js とは？ データ ドリブン ドキュメント（Data Driven Document）を略して「D3」と呼ばれている通り、データを操作し、可視化することに優れたライブラリです。Web サイトや Web アプリで採用される 2D ベクター グラフィックの標準形
Fisheye Distortion
It can be difficult to observe micro and macro features simultaneously with complex graphs. If you zoom in for detail, the graph is too big to view in its entirety. If you zoom out to see the overall structure, small details are lost. Focus + context techniques allow interactive exploration of an area of interest (the focus) in greater detail, while preserving the surrounding environment (the cont
Webでもできるデータビジュアライゼーション
ビッグデータによる価値創造を実現するデータ収集・蓄積・分析クラウドサービス “簡単！賢く！データを活かす！”東芝データレイクサービスの取り組みのご紹介griddb
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
D3.jsで日本地図を描き、都道府県別に色を塗る - Qiita