Webグラフ / 地図作成ツール

【JavaScript】D3.js / TopoJSON / DataMaps [2] ~ DataMaps Plugin編 ~

DataMaps Plugin [1] デフォルトで配備されているプラグイン 1-1) bubbles : バブル チャート 1-2) legend : 凡例(マウスオーバー時のダイアログが表示) 1-3) arc : arc(アーク) = 弓型(フライトで飛行場から飛行場に表示されるのに使われる?) 1-4) labels…

【JavaScript】D3.js / TopoJSON / DataMaps [1] ~ 世界地図を作成する ~

必要なもの D3.js * 以下の関連記事を参照のこと。 http://blogs.yahoo.co.jp/dk521123/35423681.html TopoJSON 導入方法 (1) 以下をインポートする(かダウンロードしてインポートする) <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script> DataMaps * ここからが本題 ライセンス * MIT https://github.com/mar…

【JavaScript】D3.js ~ 円グラフを作成する ~

サンプル * アニメーション、なんちゃってTooltip * とっかかりとして一番いいかも <html> <head> <meta charset="UTF-8"> <style> </style> </head> <body> <script src="">http://d3js.org/d3.v3.js"> <script> var dataset = [ {graphLegend:"001", graphValue:10, graphColor:"LightPink"}, {graphLegend:"002", graphValue:20, graphColor:"Lig</body></html>…

【JavaScript】D3.js ~ 縦棒グラフを作成する ~

サンプル * 軸あり、アニメーション、なんちゃってツールチップ <meta charset="utf-8"> <style> .bar:hover { fill: steelblue; } .axis { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .tooltip { border: 1px solid </meta>…

【JavaScript】D3.js ~ 折れ線グラフを作成する ~

サンプル 基本的な折れ線グラフ <html> <head> <meta charset="UTF-8"> <style> .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .line { fill: none; stroke: steelblue; stroke-width: 1.5px; } </style> </head> <body> <script src="">http://d3js.org/d3.v3.js"> <script> var margin = {top: 2…</body></html>

【JS】D3.js ~ 入門編 ~

■ はじめに * D3.js について、まとめる 目次 【1】D3.js 1)使用上の注意 【2】公式サイト 1)日本語サイト 2)API リファレンス 【3】開発に必要なツール 【1】D3.js * Data Driven Documentの略 * Protovis の後継ライブラリ。 Protovis について…

【JavaScript】D3.js / TopoJSON / DataMaps [3] ~ DataMaps Custom Plugin編 [1] ~

はじめに http://blogs.yahoo.co.jp/dk521123/35446731.html では、既存のプラグインを紹介したが、独自でプラグインを実装できる サンプル 例1:地図上に棒グラフ * 負の値は未対応(積み上げ縦棒グラフで対応版は以下の関連記事に記載) http://blogs.yahoo.…