個人的なD3愛についてはこちらに。 日本ではまだまだ知名度の低いD3.jsですが、海外ではGithubの人気レポジトリランキングで上位(現在7位)に上がるなど非常に注目度の高いライブラリです。 JavaScriptには他にも多数のChartライブラリが存在しているのですが、その中でなぜD3がこんなにも注目されているのか? その理由を考えてみました。 結論 なんかスッゲー長くなったので先に結論を書いておきます。 他のChartライブラリより柔軟性が高いコードが簡潔に書けるJavaScriptの面白さを味わえる理解が進む程に惹かれる設計の妙 以上。以下、詳細。 柔軟性 データをグラフとして表示するには、データを画面上の座標に変換しなければなりません。散布図として表示するためにはデータの値を画面上のXY座標変換する必要がありますし、円グラフとして表示するには値の割合からそれぞれの内角の角度などを
Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。 また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取るのは困難です。 そこで、データの見せ方や伝え方が重要になってきます。 インフォグラフィックスやデータビジュアライゼーションといったキーワードにも注目が集まりつつありますね。 本記事ではD3.jsというJavaScriptのライブラリを利用し、このブログ(Teck-Sketch)のはてなブックマーク数や、世界の国別の人口の比較を視覚的に分かりやすく表現していきたいと思います。 インフォグラフィックス?データビジュアライゼーション? キーワードとしてインフォグラフィックスとデータビ
D3.js は document ベースでデータを操作するための JavaScript ライブラリです。 D3 を使うことで、 THML, SVG, CSS を利用し、データを表現する事ができます。 D3 が web 標準を強調している理由は、プロプライエタリなフレームワークを使うことなしに、パワフルな視覚化要素と DOM 操作でのデータ駆動アプローチを結びつけ、モダンブラウザで十分に実施することができることです。 Resources はじめに 事例ギャラリー チュートリアル API Reference Release Notes d3.js on Stack Overflow d3-js Google Group ブラウザサポート D3 は、いわゆる "モダン" ブラウザ (一般的に、IE8およびそれ以前を除くすべて) をサポートします。 D3 は、 Firefox, Chrome (C
Fast Multidimensional Filtering for Coordinated Views Status Crossfilter is not under active development, maintenance or support by Square, its original author Mike Bostock, or the recent contributors (Jason Davies, Tom Carden). We still welcome genuine bug-fixes and PRs but consider the current API and feature-set (~1.3.12) essentially complete. A new Crossfilter Organization has been created on
とりあえず、色々やってみて覚えよう!ってことで。 「国立環境研究所」よりいただいた熱中症発生数のデータを可視化。 ダウンロードした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
これは、d3.js API Advent Calendarの2日目の記事です。 d3.js Advent Calendar 2日目 selector api (2/2) .data(), .datum(), .enter() 2日目は、Event APIと上記3つのd3がdata driven documentと呼ばれる所以たるメソッドを紹介します selector APIによって取得した(取得予定の)オブジェクトをメソッドチェインでつなぎ、styleや属性などをsetすることができますが、この際のchain methodの値には色や数値といった定数だけではなく、関数を渡すことができます 一連のchain methodにおいて値として使うことのできる関数の引数として引き渡されるのがまさに.data()や.datum()で引き渡された「データそのもの」となります selector API 2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く