D3.js でロケールを設定してグラフ軸のラベルの表示を変更する - べにやまぶろぐ
バージョン : D3.js 3.4.5 たとえば Multi-Series Line Chart - bl.ocks.org のような時系列のチャートを描画するとき、元データの期間を見て勝手にラベル（X軸の "April" など）を振ってくれるのは良いんですが場合によっては『1月』、『2月』とか、あるいは『睦月』、『如月』とかが良いよってことがあると思います。 前者の『1月』とか『2月』のような数字と固定文字列で表現できる場合、厳密には Home · d3/d3 Wiki · GitHub の書式で書けるときは var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .tickFormat(d3.time.format("%m月")); とすれば OK です。 しかしながら『睦月』とか『如月』とかのときはそもそも % 記法で呼び出せる値を
D3.js + NVD3 + Sinatra + Heroku で作るインタラクティブなデータ可視化デモ - Qiita
インタラクションの実装 さて昨日は D3.js 日本語訳の全 16 章の内容を駆け足で一気に書き下ろしてみましたが、この内容だけですと静的なプロッティングしかできずなんとも消化不良です。 そこで今回は前々回にも紹介した NVD3 との組み合わせでいよいよ D3.js の肝心の目玉であるインタラクションを実装していきます。 完成形のデモアプリケーションはこちらから閲覧できます。 (うまく表示されない場合はブラウザをリロードしてみてください) Heroku を利用する いままでは画像をペタペタと記事に貼ってきましたがインタラクションを見せるには Qiita に画像を貼るだけでは不十分です。そこでデモアプリケーションとして外部のサイトにデプロイすることを考えます。こんなときに非常に便利なのが Heroku というサイトです。詳細はこの辺りを読めば分かると思いますが要は無料でも使える PaaS サ
ゴールデンウィーク中にD3.jsを学びたい方にお勧めな厳選まとめ
「データビジュアライゼーション（D3.js）を学ぶための教材まとめ」も大分量が増えてきて、初めてD3.jsを学ぶという人にはどこから手をつけて良いものか解りづらくなってきました。 そこで、ゴールデンウィーク中にD3.jsを学んでみたいという方に、いくつか厳選してお勧めしてみたいと思います。 スライドを眺める まずはD3.jsがどんなライブラリなのか把握しましょう。 ・about d3.js チュートリアルを学ぶ とりあえず分量・内容的に下記のチュートリアルがお勧めです。 ・D3 チュートリアル｜スコット・マレイ｜alignedleft 余裕があっていろんなレイアウトのグラフを描いてみたいなら、下記サイトを。 ・svg要素の基本的な使い方まとめ コード共有サイトを使って実践 チュートリアルを手軽に試すなら、コード共有サイトを利用するのが楽チンです。 jsdo.it, jsfiddle, Tr
NVD3
This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizable, staying away from your standard cookie cutter solutions. View more examples » GitHub Repo Download d3.v3.js. This is the only required library for NVD3. Dow
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
D3.js を使ってみる - Qiita
まずはじめに、データ可視化は真の目的ではありません。手段です。 Vitaly Friedman の有名な言葉で、データ可視化の大目的は明瞭かつ効果的に情報とコミュニケーションができるように、データを視覚化できる能力そのものである (The main goal of data visualization is its ability to visualize data, communicating infomation clearly and effectivelty.) というものがあります。 情報を視覚的に伝える 明確に情報を伝える 効果的に情報を伝える こういったことがデータ可視化の要件かと思います。 とくに、何のための可視化なのかという大目的を見失ってはいけません。 この辺の話は以下の「データ可視化勉強会」のスライドがとても素晴らしいのであわせて参照すると良いでしょう。 http:
【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
d3.jsでrectに角丸・半透明・グラデーション・ドロップシャドウ・ライティング効果を追加～主にsvgのこと | | Scimpr Blog
参照ページ SVGで図形やアニメを描画してみよう Diffuseライティングdiffuseライティングはゴムや布など光沢のない質感を表現するらしい リンク先に詳しく書いてあるけどよくわからない Specullerライティングspecullerライティングは金属やプラスチックなどの鏡面反射光を表現するらしい html要素を追加する～foreignObject参照ページ svg要素の基本的な使い方まとめ rectにテキストを重ねるにはsvgのtext要素を使う方法とhtml要素を追加する方法がある html要素を追加すれば自動で折り返しができる.ただし、foreignObjectにはブラウザ間の問題がありそうなので、ほかの場合はsvgのテキストを使うほうがよさそう.
d3.jsで棒グラフを作成する | | Scimpr Blog
データの数だけ棒を表示する前回、一つの棒に必要な要素をハッシュにしたものを配列でdata()に渡せば、each文のようにデータの個数分だけ処理してくれることがわかった SVGでは左上が(0,0)の座標となるので、一番簡単な横向きの棒グラフを作成してみる rectでは左上の点の座標(x,y)と幅(width)と高さ(height)を与えればよかったので、棒グラフを作成するには、 xはすべて0yは一定間隔(棒の高さと少しのすき間)幅はその要素の数値をpxで表す長さ高さは一定の高さ window.addEventListener("load", -> canvas = d3.select "#canvas1" svg = canvas.append("svg") .attr("width", 200) .attr("height", 200) dataAttr = [ {key1:0, key2
可視化ライブラリD3.jsの設計が素晴らしすぎる。 | 三度の飯とエレクトロン
最近名前を聞くことが多くなってきたD3.jsを試してみています。 まだ使い始めたばかりですが、D3.jsの設計の素晴らしさに感動しています。 データを与えればグラフが表示されるというような単純なものではないので、敷居が高く感じていましたが、設計を知るほどによく出来ていて驚きます。 D3.jsとは何か？ そもそも、D3.jsとはなんでしょう？ D3.js – Data-Driven Documents D3.jsは、データをブラウザで可視化するためのライブラリです。 単なるグラフライブラリではなく、もっと抽象的な「可視化」を扱うのが特徴です。 抽象的なレイヤーを扱うので、ライブラリと言っても機能より設計が重要で、D3.jsが支持されている理由はその設計の素晴らしさにあります。実際に描画しながら、その設計の違いについて考えていきます。 企業の時価総額と営業利益の関係をプロット 例題として、企業
「D3.js」を使ったデータビジュアライゼーション
Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取ることは困難です。そこで、データの見せ方や伝え方が重要になってきます。 D3.jsとは D3.jsは、Mike Bostock（mbostock）が作成したデータ可視化用途で人気のJavaScriptライブラリで、データをDOMと結びつけ、データ駆動によりグラフを作成することができます。ソースコードはGithubで公開されており、人気を表すStarの数がGithubに公開されているリポジトリ全体で6番目に多いことからも、注目の高さが伺えます（2013/10現在）。ライセンスは修正BSD
データのビジュアル化を最少の労力で: D3.js
D3.js はきわめて表現力の高いグラフ描画ツールです。Google Chart Tools と同様、JavaScript ライブラリーとして提供されていますが、Chart Tools がオンライン限定のサービスであるのに対し、D3.js はオフラインでも利用できます。 公式サイトのギャラリーにたくさんの例があげられています。 Gallery · mbostock/d3 Wiki · GitHub D3.js の参考資料 日本語で読める D3.js の資料はまだ多くありませんが、公式文書の日本語化が進んでいます。 D3.js - 日本語ドキュメント D3.js の基本をシンプルにまとめたチュートリアルです。 D3 チュートリアル｜スコット・マレイ｜alignedleft 本領はウェブですが D3.js は、たんに見栄えのするグラフを描くだけでなく、ウェブ上でインタラクティブなグラフやリアル
D3.jsはなぜ人気があるのか？ そして、なぜ難しいのか？
個人的なD3愛についてはこちらに。 日本ではまだまだ知名度の低いD3.jsですが、海外ではGithubの人気レポジトリランキングで上位(現在7位)に上がるなど非常に注目度の高いライブラリです。 JavaScriptには他にも多数のChartライブラリが存在しているのですが、その中でなぜD3がこんなにも注目されているのか？ その理由を考えてみました。 結論 なんかスッゲー長くなったので先に結論を書いておきます。 他のChartライブラリより柔軟性が高いコードが簡潔に書けるJavaScriptの面白さを味わえる理解が進む程に惹かれる設計の妙 以上。以下、詳細。 柔軟性 データをグラフとして表示するには、データを画面上の座標に変換しなければなりません。散布図として表示するためにはデータの値を画面上のXY座標変換する必要がありますし、円グラフとして表示するには値の割合からそれぞれの内角の角度などを
「エンジニアのためのデータ可視化[実践]入門 ~D3.jsによるWebの可視化」を執筆しました - PolyPeaceLight
僕のような人間が書いていいのか、とは執筆前・執筆中・そして執筆が終わった今もずっと思っていますが、兎にも角にも書き終わりました。 エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化 (Software Design plus) 作者: 森藤大地,あんちべ出版社/メーカー: 技術評論社発売日: 2014/02/20メディア: 単行本（ソフトカバー）この商品を含むブログを見る 2月20日に書店に並ぶそうです。 内容について うまく伝えられているかはわからないですが下記のようなことを意識して書きました データ可視化は情報との対話であり、「データに存在する事実を掬い上げやすく加工する」「データに存在する事実を効率的に伝える」作業そのものである データ可視化はデータ処理(収集・保持・分析・解析)と企画者(施策・経営)のコミュニケーションを円滑にするものである 上記を実現す
![「エンジニアのためのデータ可視化[実践]入門 ~D3.jsによるWebの可視化」を執筆しました - PolyPeaceLight](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6a8a762f50a4289ebcd4492c54e687513556e4e/height=288;version=1;width=512/http%3A%2F%2Fecx.images-amazon.com%2Fimages%2FI%2F51PyKbKHGoL.jpg)
エンジニアのためのデータ可視化実践入門という本を書いた - あんちべ！
2014/10/14 追記 本書87ページに「母数」という単語が複数回出てきますが、 これは全て「分母」とすべきでした。*1 通常、統計学の文脈では、母数は各確率分布を特徴付ける変数を指す単語であり、 例えば正規分布は平均と分散という二つの母数によって形状が決定されます。 決して母数と分母（あるいは全数）と誤解してはなりません。 しかし母数と分母を混同することは本当によくあることで、 本書はこのような頻出する誤解を訂正し、 皆様が統計を用いる際の失敗を一つでも減らす という目的で執筆に至ったにも拘らず、 まさか本書でこのような重大な失敗をしてしまったことに対し 心からお詫び申し上げ訂正させて頂きます。 なお、問題個所の記述は共著者の森藤氏ではなく 私が記述したものであり、全責任は私にあります。 本を書くに当たり、誤字脱字や言い回しの不備は出来る限り無くすべきですが、 人間であるためミスをす
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
d3.js - ドキュメント
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. リソース 概要 事例集 解説 API Reference Release Notes Plu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://dustinlarimer.com/heroku-dataclips-d3-js-force-directed-graph/
D3.js Plot Map
http://ja.d3js.info/alignedleft/tutorials/d3/