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

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

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

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

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

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

この記事はHTML5 Advent Calendar 2012の10日目の記事です。遅くなってすみませんSVG filterとは、SVGの画像要素やrect、circleなどの要素に対して、様々なエフェクトを掛ける仕様です。 W3Cでは「W3C Recommendation」となっています。 Filter Effects – SV…

京都に会社説明会で来ています。いろいろばたばたしている中での京都なので同僚にはお土産を買って帰るつもりです。2日連続で今日は2日目なのですが、15時半からの遅めのスタートなため、電源と無線のある喫茶店を探したところ、 Ogawa Coffee The Cafe 河原…

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

これは、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…

毎日アドベントカレンダーを書いている気持ちになってきます。 子育てエンジニア advent calendar 2012 9日目の参加エントリです。 うちには4歳の娘と2歳の息子がいます。 ちなみに上の娘が17kgなのに、息子は18kg以上あるという逆転現象が発生しています。 …

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

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

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

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