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…

前章までの基本式 時刻におけるイベント発生の確率密度関数： 時刻までにイベントを体験する累積分布関数： 生存関数： (2.2.2) すなわち 時刻までイベントを体験せず、時刻で体験するハザード比/ハザード関数： (2.3.1) ただし if が連続確率変数： (2.3.2)…

fluent-plugin-forestはタグを動的に扱うことができて、非常に便利なプラグインです。 マジで @tagomoris ++ です。 <match service.*> type forest subtype file remove_prefix service <template> time_slice_format %Y%m%d%H compress yes path /var/log/${tag}.*.log </template> </match> と書いておく…

2012/11/18に法政大学市ヶ谷キャンパスにて東京Node学園祭2012が開催されました。 昨年はお手伝いのような、スタッフのようなふわっとした立ち位置^1でしたが、今回はもう半歩だけスタッフのような立ち位置で参加しました。 今年はスタッフミーティングにも…

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

「start presentation」押してください 改善おまちしております github Hatena Presentation作ったった そもそも HTMLで発表資料作るphantomjsでrenderしてslideshareにうｐするの面倒 hatenaで記事書くように スライド作れたら、「ブログにうｐ」する手間も…

今年はNode学園祭を来週に控え、CROSSの準備をしたり、Fluentd meatup #3に参加したりしてたら、家族マイルがゼロになり、昨年のように日曜出勤扱いで取り組めないは、娘がこじらせた風邪に感染したりして、散々な状況でのNode KnockOutへの参戦となりました…

東京Node学園祭2012 アドベントカレンダーの10日目の記事です。 他の方のように、ベンチマークやコアっぽいところばかりなのですが、僕は少し軽めで最近調べているd3周りについてちょっと便利なツールを作ってみました。 d3jsは非常に優れたvisualizationツ…

ChromeのSocket APIが気になると書いたのですが、その後いろいろ子供の寝かしつけで寝落ちたりしてる間に、 @komasshu さんに先をこされて悔しかったので、作ってみました。 chrome の socket APIを使ってNodeのexpressのようなことができます。 githubに上…

WebSocketやchrome.socket、AudioやVideo APIなどが進んできたせいで、JavaScriptで生データを触ることが増えてきています。 その時に使えるのがArrayBufferというオブジェクトなんですがいまいち整理がついてないので、MDNを訳しながら、まとめてみました。…