【D3.js】サーマーウォーズのワールドクロックを作る
アノ時計っぽいものを作ってみました。 example 解説 基本的には下記事のコードをちょこちょこっと改良しただけです。 【D3.js】 SVGで地球儀を描く 地軸を傾けながらSVGで地球儀を表示する ポイントとしては地形を裏用(グレー)と表用(ピンク)に２重に描画しているところでしょうか。 clipAngleメソッドを使って描画される範囲を変えています。 ・裏用地形描画 var projection180 = d3.geo.orthographic() .scale(windowWidht/4) .rotate([0,0,0]) .translate([windowWidht / 2, windowHeight / 2]) .clipAngle(180); var backPath = d3.geo.path().projection(projection180); //地形(裏) va
【D3.js】 LeafletにSVGをオーバーレイする。
Leafletは、モバイルフレンドリーでインタラクティブな地図をWeb上に表示するJavaScriptライブラリです。最近、海外での存在感が高まっているような気がします。 今回は、D3で作成したsvg要素をLeaflet上にオーバーレイしてみました。 (まだ、ソースのコメントに書いたこと以上の知識がないので、サンプルコードのみで詳しい解説はありません) サンプル D3.jsとともにLeaflet.jsとleaflet.cssを読み込んでください。 <!-- leafletのcssを読み込む --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6H
D3.js と GeoJSON でポリゴンを描く
こちらの記事を参考にして、東京都のポリゴンを描いてみます。 D3.jsとTopoJSONで地図を作る 違いは２点です。 イギリスではなく「東京都」のポリゴンを使う TopoJSON に変換せず GeoJSON を使う 作成したものは下記のページに置いてみました。 http://s.kitazaki.name/apps/tokyo-polygon/ 「２３区」と「島しょ部除く」のデータはすんなり表示されると思いますが、 「全域」のデータは大きいのでかなり時間がかかります。 これは TopoJSON を使う動機付けになりそうです。 目次 データを探す ツール類のインストール データの変換 データの読み込み ポリゴンの表示 ポリゴンのスタイル設定 インタラクションの追加 終わりに データを探す まずは境界線を持つポリゴンデータを探します。 国土交通省の国土政策局という部署が「国土数値情報ダウンロ
「エンジニアのための データ可視化[実践]入門 ~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)
D3.js と TopoJSON で地図を作る
D3.js と TopoJSON で地図を作る 2012年12月30日 Mike Bostock (訳:FoD5 ) このチュートリアルの解説 D3.js 日本語化プロジェクトについて D3.jsとTopoJSONで地図を作る このチュートリアルでは D3 と TopoJSON を使って、シンプルな地図を一から作る方法について学習します。オンラインでフリーの地理データが得られるサイトを いくつか紹介し、そのデータを、画面表示効率がよくて使いやすいフォーマットに変換する方法を解説します。このチュートリアルでは thematic mapping（主題図）については触れません。 しかし製作過程で居住地域へのラベルの付け方も説明しますので、そのテクニックを応用すれば graduated symbol maps（等級別記号図） や choropleths（コロプレス／統計表現地図） 等の地図的なデ
D3.jsで地図を作る。
DEMO PAGE ウェブサイトで地図を扱うときgoogle mapカスタマイズしたり、leaflet.jsを使ったりしてたのですが、 データビジュアルで地図をよりインタラクティブなものにしたいという思いもあり、 今回はd3.jsを使って地図を作ってみました。 Let’s make mapを参考に、地図を作ってみました。 今回使ったライブラリー: D3.js TopoJson 1. データをダウンロードする Natural Earthという無料で世界地図に関する様々なデータをダウンロードできます。 今回は北海道、本州などと色分けする日本地図を作りたいので、「1:10m Cultural Vectors」から「Admin 0 – Details」にある Download map subunits からデータをダウンロードします。 2.データをjsonに書き換える。 JavaScriptでデー
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
タッチ操作に対応した画像ビューワーをJavaScriptで作るならD3.jsが便利
スマホやタブレットで写真を表示していると、ピンチでズームしたり、ドラッグで移動したりができて便利なので、あれを Web 上で実現してみたくなった。 最近のブラウザーでは touchstart や touchmove イベントでタッチ情報を取れたり、イベントの touches でマルチタッチを扱えたりするので、実現するための基盤はそろっている。 適当なライブラリーがあるかと思って探してみたが、意外と苦労してしまった。 Hammer.js が使えない タッチを扱うためのライブラリーとしては Hammer.js がメジャーらしい。スワイプ・ピンチ・ドラッグなど、各種イベントにも対応していて、これを使えば一発解決してくれそうだ。 ところが、画像ビューワーを作るには不向きだった。困ったのは次の 2 点。 ピンチやドラッグは個別には動くが、組み合わせたときに「表示位置」と「倍率」の関係を自前で計算する
【D3.js】地図上にHexbin(六角形)を表示する
地図上に表示するポイントが多くなるとゴチャゴチャして見難くなります。 「そんな時は六角形にまとめて表示すると見やすくなるよ！」と聞いたのでやってみました。 国土数値情報サイトがらいただいた竜巻等の突風（点）情報を表示しています。竜巻等の突風の多いエリア程、色が濃く表示されます。 example サンプルコード D3.jsと一緒にHexbinプラグインを読み込んでください。 <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/d3.hexbin.v0.min.js"></script> window.onload = function(){ 日本地図データの読み込み d3.json("japan.topojson", function(json) { d3main(json); }
D3の魅力
d3.js Advent Calendar 2013 6日目の参加記事です。 技術的なことはちょっと置いておいて、個人的なD3愛を語ってみました。 例えば、大学で私は、コンピュータに手を触れる前に 紙の上でプログラムを完全に理解しなければならないと教わった。 でも私はそういうふうにはプログラムできなかった。 私が好んだやりかたは、紙の前ではなく、コンピュータの前に座って プログラミングすることだった。もっと悪いことに、 辛抱強く全てのプログラムを書き上げて正しいことを確認するなんてことは せずに、私はめちゃくちゃなコードをおっぴろげて、 それを次第に形にしてゆくのだった。 私が教わったのは、デバッグとは書き間違いや見逃しをつかまえる 最終段階の工程だということだったが、 実際に私がやっていたのは、プログラミングそのものがデバッグという具合だった。 （中略） プログラミング言語はプログラムを
「D3.js」を使ったデータビジュアライゼーション
Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取ることは困難です。そこで、データの見せ方や伝え方が重要になってきます。 D3.jsとは D3.jsは、Mike Bostock（mbostock）が作成したデータ可視化用途で人気のJavaScriptライブラリで、データをDOMと結びつけ、データ駆動によりグラフを作成することができます。ソースコードはGithubで公開されており、人気を表すStarの数がGithubに公開されているリポジトリ全体で6番目に多いことからも、注目の高さが伺えます（2013/10現在）。ライセンスは修正BSD
D3.js の d3.svg.line() を試してみた
circles.enter() .attr('cx', function(d, i) { return i * 280 / n + 10; }) のような座標を計算する関数が何箇所かに散らばっていた。 これ、d3.svg.line() を使ったらまとめられるし、便利な interpolate の機能も使えるよ、というのが今回のお話。 d3.svg.line() の使い方 たとえば var line = d3.svg.line() .x(function(d, i) { return i; }) .y(function(d, i) { return d * d; }); としておくことにする。line.x() とすると function(d, i) { return i; } を返してくれるので、関数を再利用してコードが読みやすくなる。line.y() も同様。 さらに、line([5,2,
D3.js勉強会（地図入門）を開催しました。
example D3.js勉強会（地図入門）が無事終了しました。 前回は、ネタ不足で時間が余りましたが、今回はそんなこともなくそれなりに内容のある勉強会になったのではないかと。 逆に時間が足りず伝えきれなかった部分もあるとは思うのですが、目標であった「塗り分け地図(コロプレス図)の作成」まで出来たので良しとしようかなと。 勉強会で使用したスライドとコードを置いておきます。 D3で地図を描こう！ 1 D3で地図を描こう！ 2 サンプルコード (サンプルコードはローカル環境では動きません。サーバーにアップロードするか、同梱したserver.jsを使用してください) スライドの方は内容をまとめきれず、口頭で補足・説明した部分も多いので、これだけみてもよくわからないかもしれません。 まぁ、それでも多少参考になれば良いかなぁと。 ひとまず、やりたかったD3 geoに関する勉強会が開催できたので満足で
Webでもできるデータビジュアライゼーション
2013/8/10に大阪で開催された「まにまにフェスティバル（まにフェス）P2」で使用したプレゼン資料ですRead less
D3.jsをつかってData-Drivenにリッチなグラフやチャートを作成しよう - Tech-Sketch
Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。 また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取るのは困難です。 そこで、データの見せ方や伝え方が重要になってきます。 インフォグラフィックスやデータビジュアライゼーションといったキーワードにも注目が集まりつつありますね。 本記事ではD3.jsというJavaScriptのライブラリを利用し、このブログ(Teck-Sketch)のはてなブックマーク数や、世界の国別の人口の比較を視覚的に分かりやすく表現していきたいと思います。 インフォグラフィックス？データビジュアライゼーション？ キーワードとしてインフォグラフィックスとデータビ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アイマス年表 D3.js - AOI-CAT's diary
http://ja.d3js.info/alignedleft/tutorials/d3/
Domain parked by OnlyDomains
http://christopheviau.com/d3list/