d3

執筆とイベント主催(と業務と育児)を同時にやってみてわかったこと

今回、D3の本を執筆しつつ、CROSSというイベントを主催しつつ、通常の業務のリーダー(という平社員)をしつつ、2児の父として振る舞った末、完全にオーバーキャパで各所に迷惑をかけてしまいました。 書籍の進行が延び延びになって共著者・出版社に迷惑をお掛…

advent calendar 24日目 selectAll(), data(), enter(), append()に翻弄されるひとたちに

d3

ようやくボクのクリスマスが終わります。 d3は可愛いんですが「selectAll() -> data() -> enter() -> append()」は経験から学ぶのが最も早い、としか答えられません。 クリスマスプレゼントとして、そんな方々のためにUnderstanding selectAll, data, enter,…

d3.js advent calendar 23日目

d3

ボクのクリスマスはまだ終わっていません! データベースエンジニア養成読本に たぶん、最後に「まあ、データってことばに関係するからちょっと混ぜておくか」というノリだと思いますが データ可視化についての内容で寄稿しました。 データ可視化の歴史とかJ…

d3.js advent calendar 22日目

d3 advent calendar 22日目d3でデータをネスト化したりして、いろいろなグラフを描いてみよう!(まとめ) まとめ的な統括的なものです sample garalley見たら載ってることも多いですが、総括して見られることがメリットだと思ってください 注意:面倒なのでco…

d3.js advent calendar 21日目

d3 advent calendar 21日目d3で適当なデータを作ったり、いろいろフォーマットする d3の便利な関数の具体的な使い方 サンプルデータを生成する サンプルデータって必要ですよね。そんな時の方法です var size = 24 * 7 * 14, mean = 100, stdev = 20; var no…

d3.js advent calendar 20日目

d3 advent calendar 20日目d3.layout.tree d3.layout.tree d3.layout.treeは「樹形図」を描くことができる.layoutです 書きたいですよね?樹形図! 概要 このlayoutは、前回紹介したhierarchyの具体的な表現例の1つになります。 従って、ネスト化されたデー…

d3.js advent calendar 19日目

d3 advent calendar 19日目d3.layout.hierarchy d3.layout.hierarchy このlayoutは直接利用するものではなく、d3.layout.treeなど階層構造を表現するためのベースlayoutです。 今日はこのlayoutのAPIにふれて、次回で具体的なlayoutであるtreeの使い方を説明…

DashにD3.jsのドキュメントを追加する方法

d3

Dashというツールがオフラインでも見られていいので使っています。 d3を追加する方法をメモ というほどなんら困らないのですが、 gitにあげてくれている人がいるので $ git clone git://github.com/exlee/d3-dash-gen.git して、その中の.docsetsを追加する…

データ可視化 HandsOn #2を開催しました

まだまだ、ふっくらした開催概要ですし、進め方も全然決まってなく参加者の皆様を戸惑わせながらですが、データ可視化 HandsOn #2を開催しました テーマ 僕自身がいま関心があるものですが「コストパフォーマンス」を可視化する、というテーマで取り組んで頂…

interpolate.js作りました

npmで名前が被ったので「series.interpolate.js」にしました 背景・課題 時系列分析をずっと調べているのですが、時系列データで途中データが飛ぶケースがあります。 例えば、ガチャのデータ、Webサイトのアクセスログ、404の回数のログ、いくらでもあります…

d3のd3.interpolateObjectで返される補間オブジェクトが共有化されてる

issue:1030 d3.interpolateObjectは2つのオブジェクトを補間してくれるので欠損データの扱いとかが楽にできるんですが、バグ?というか、ハマるところ。 var ts = [ {time: new Date(2012, 0, 1), sum: 132435}, {time: new Date(2012, 0, 2), sum: 133450},…

d3.js advent calendar 18日目

d3 advent calendar 18日目d3.layout.pie d3.layout.pieとは 最初は簡単かつ使い勝手の良いlayoutであるPieからですこれは、文字通り、ぶっちゃけダルい円弧のPathを生成するための開始角と終端角の2つを計算してくれます 入出力 このlayoutは 入力: key - v…

d3.js advent calendar 17日目

d3 advent calendar 17日目d3.layout Layoutとは 僕が好きな一節はこの資料のLayoutsのところです(スライド中の直リンクが無いです) Layoutはデータである:最利用可能なデータ生成アルゴリズムであり、表示形式ではない Layoutは多様である:各々のLayoutは…

d3.js advent calendar 16日目

d3 advent calendar 16日目d3.behavior.drag dragとは せっかくのHTMLですし、ドリルダウンで詳細にデータを深掘りしたいですよね。そのインタラクションとしてd3で用意されている一つがd3.behavior.dragです 使い方 基本的には、選択された要素に対して.cal…

d3.js advent calendar 15日目

もう、どんどん、遅れてきていて、今日は17日ですが、15日目のd3.js API Advent Calendarの記事です d3 advent calendar 15日目internal api 内部API 15日目は次のような内部的なAPIについて紹介します d3.functor d3.rebind d3.dispatch 使い所 d3.dispatch…

d3.js advent calendar 14日目

d3 advent calendar 14日目d3.interpolate d3.intepolate() .interpolate()は、15日目で紹介する.transition() (jQueryのanimate的なもの)の内部でも使われている、2つの状態間を計算するAPIです 使い所 連続的に間を埋める必要が有る時 連続的な行列が欲し…

d3.js advent calendar 13日目

d3 advent calendar 13日目d3.svg.axis d3.svg.axis みんな大好きxy軸です。これがないとグラフを書いても意味がわからないので、大事です。でも、位置の調整とか割りと大変だし、tickとかどうすんべー、というのをd3では予期に計らってくれています 基本 d3…

d3.js advent calendar 12日目

d3 advent calendar 12日目d3.svg API (2/2) 12日目は、11日目で紹介しきれなかった、.arc(), .chord()を紹介します d3.svg.arc() 文字通り、円弧を描く(=円弧になるようなPATHを作成する)APIです 実装: 準備 var colors = d3.scale.category20(); /* 色 */v…

d3.js advent calendar 11日目

d3 advent calendar 11日目d3.svg API (1/2) 基本的な使い方 そもそもsvgはいくつかの表現要素を定義しています rect: 矩形: x, y, width, height[, rx, ry] circle: 円: cx, cy, r ellipse: 楕円: cx, cy, rx, ry line: 線分: x1, y1, x2, y2 polyline: pol…

d3.js advent calendar 10日目

これは、d3.js API Advent Calendarの10日目の記事です d3.js advent calendar 10日目Loading API d3のLoading API d3には、チャートを作成するためのデータを取得する方法として、Loading APIを提供していますheader付tsvやcsvをObject Arrayに変換してくれ…

d3.js advent calendar 9日目

これは、d3.js API Advent Calendarの9日目の記事です d3.js advent calendar 9日目 d3.time d3.time.format d3.time.scale d3.time.interval 大きく3つのAPIにわかれますが、特筆すべきはintervalです。これだけ覚えていればいいです! d3.time.format Date…

d3.js advent calendar 8日目

d3.js advent calendar 8日目 Colors d3で色の扱う方法は以下の3つです 離散値・名義などまたは様々な色を使う:d3.scale.categoryXX 連続値・グラデーション:d3.scale.linear / d3.interpolate Colors APIを利用する d3.scale.categoryXX d3.scale.ordinal…

d3.js advent calendar 7日目

d3.js advent calendar 7日目 d3.scale.ordinal 離散的な入出力値の変換に役立ちます「それ、連想配列?」って思った人は正解で、内部では連想配列を保持していて、それに登録/参照を行なっています 基本的な使い方 var os = d3.scale.oridnal() .domain(["…

d3.js advent calendar 6日目

これは、d3.js API Advent Calendarの6日目の記事です d3.js advent calendar 6日目 d3.scale d3.scaleは、おそらく大きの人がd3を使う主目的である「グラフ」を描く際に、X-Y軸や、データをグラフの矩形範囲内に収めるために利用するための重要なAPIです ま…

d3.js advent calendar 5日目

これは、d3.js API Advent Calendarの5日目の記事です。短くてマジすいません。でも、紹介しておきたいAPIなので取り上げました d3.js Advent Calendar 5日目random api d3.random d3.random.normal()で、正規分布を得ることができます。 実例 var n = d3.ra…

d3.js advent calendar 4日目

これは、d3.js API Advent Calendarの4日目の記事です。 d3 advent calendar 4日目 d3にあるその他の Array Operatorの紹介 特筆すべきは、d3.rangeとd3.nestです。特にnestは非常に有用なので覚えて損はないです! d3.split 最初のnull / undefinedで分割さ…

d3.js advent calendar 3日目

これは、d3.js API Advent Calendarの3日目の記事です。 d3.js Advent Calendar 3日目Array API (1/2) Array API JavaScript の Arrayのおさらい d3のArray API (この部分2回に分けます) Array API はいくつもあります ですが、mike bostockはこうおっしゃっ…

d3.js advent calendar 2日目

これは、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によって…

d3.js advent calendar 1日目

これは、d3.js API Advent Calendarの1日目の記事です d3.js Advent Calendar 1日目selector api (1/2) Selector APIとは DOMの操作(HTMLだけではなくSVGの要素も)はSelector APIを叩いて行う基本のキ できること DOMの取得 DOMの追加/削除 DOMの属性/style…

Server Side Visualization

Server-side で作るVisualization @muddydixon / NIFTY Corporation 東京Node学園祭2012 LTセッション @muddydixon { "job": "Web Engineer" , "office": "NIFTY Corporation" , "interest": [ "JavaScript", "HTML" , "hadoop", "Data Mining" , "visualiza…