background preloader

D3.js

Facebook Twitter

Video. Enjalot.github. Enjalot.github. #17 axisを使ってみよう (2) D3.js tutorial - 1 - Introduction. About d3.js. By Yosiya Hinosawa スライドの URL: D3.js とは・・・ ブラウザ向け javascript のライブラリ Data Visualization 用途 (グラフ、チャート etc...) minify して 140+KB D3.js GitHub で公開 スターの数 7位!

about d3.js

(13,490+個) @ GitHub BSD License どういうことができるの? Streamgraph word cloud Forced Directed Graph 統計地図 production な例 github.com calendar view NYTimes.com The Facebook Offering: How It Compares - NYTimes.com 作者 Mike Bostock もともと Protovis という別な Data Viz Lib 作ってた。 特徴 (ライブラリとしての) all in namespace d3 学習曲線は急坂型 宣言的に書ける = not 手続き的 = if とか for が(ほぼ)無い。 (雰囲気のみ) Selection css 互換セレクターで DOM を選択 d3.select('body').selectAll('div') 上の式の返り値が Selection オブジェクト Data Binding Selection に対して data を bind する。 Array = [4, 3, 5, 6, 10, 14] d3.select('body').selectAll('div') .data(array) Data-Driven Update data を使って Selection (DOM) を update する array = [4, 3, 5, 6, 10, 14] d3.select('body').selectAll('div') .data(array) .style('width', (d) -> d * 10) .style('height', 20) .attr('class', 'bar') .style メソッドは css 属性.attr メソッドはタグの属性を更新する。

属性の値に関数を入れた場合は、bind されたデータを引数としてその関数が呼ばれ、その返り値がセットされる。 Enter と Exit (私見) データビジュアライゼーション「d3.js」 最近、「データビジュアライゼーション」に興味を持ち始め d3.js というjavascriptのデータビジュアライゼーションライブラリの使い方を学び始めました。

データビジュアライゼーション「d3.js」

海外では、結構有名なライブラリらいしいのですが、日本では利用者が少ないようなので、勉強がてら紹介をしてみたいと思います。 D3 Intro. #01 Google Apps Scriptとはなにか? Epicyclic Gearing. Polar Plot. Rotating Voronoi. Data-Driven Delight: An Intro to D3.js at Front-End London. Source: Mike Bostock's Craig Retroazimuthal Anna Powell-Smith, Front-End London, 17/1/13 My D3 projects: A JavaScript library for creating data visualisations.

Data-Driven Delight: An Intro to D3.js at Front-End London

d3jsではじめるデータビジュアライゼーション入門. D3.js と SVG によるデータビジュアライゼーション. データビジュアライゼーション(D3.js)を学ぶための教材まとめ. D3.js. D3.js - 日本語ドキュメント. D3.js - Data-Driven Documents. Tutorials · mbostock/d3 Wiki. Wiki ▸ Tutorials Please feel free to add links to your work!!

Tutorials · mbostock/d3 Wiki

Tutorials may not be up-to-date with the latest version 4.0 of D3; consider reading them alongside the latest release notes, the 4.0 summary, and the 4.0 changes. Introductions & Core Concepts Specific Techniques D3 v4 Blogs Books Courses D3.js in Motion (Video Course)Curran Kelleher, Manning Publications, September 2017D3 4.x: Mastering Data Visualization Nick Zhu & Matt Dionis, Packt. Talks and Videos Meetups Research Papers D3: Data-Driven DocumentsMichael Bostock, Vadim Ogievetsky, Jeffrey HeerIEEE Trans.

Gallery · mbostock/d3 Wiki. Wiki ▸ Gallery Welcome to the D3 gallery!

Gallery · mbostock/d3 Wiki

More examples are available for forking on Observable; see D3’s profile and the visualization collection. Please share your work on Observable, or tweet us a link! Visual Index Basic Charts Techniques, Interaction & Animation Maps Statistics Examples. Epicyclic Gearing.