「 D3.js 」 一覧

簡単にグラフが作成できるC3.jsをRailsでつかってみた

2015/04/27   -D3.js, Railsで使えるGem
 ,

By: Nguyen Hung Vu – CC BY 2.0 C3.js C3.jsはD3.jsをベースにしたグラフ描画のライブラリ. データを与えるだけできれいなグラフが描ける上に、カス …

d3.jsで選択されたデータ範囲のグラフを表示する〜d3.brush

2014/01/12   -D3.js
 ,

参考(というかほぼそのまま) 【D3.js】選択されたデータ範囲のグラフを表示する(d3.svg.brush) コントロール用のグラフ領域を作成する このとき、便宜上、上をfocus、下をconten …

d3.jsのグラフにマウスオーバーでツールチップをつける

2014/01/12   -D3.js
 

決め打ちで スタイルでフォントサイズを指定した ツールチップがはみ出す場合の条件と処理を追加

 

Rails4とD3.jsでローソク足グラフを描く〜d3.js編

2014/01/12   -D3.js, Railsで使えるGem
 ,

前回 Rails4とD3.jsでローソク足グラフを描く〜Rails準備編 jsonデータ こんなかんじで

  y_scale …

Rails4とD3.jsでローソク足グラフを描く〜Rails準備編

2014/01/11   -D3.js, Railsで使えるGem
 ,

By: Manuel Calavera – CC BY 2.0 前回 Rails4で複雑な検索〜Ransack こちらのサンプルを使用させてもらいました。 datawarehouse.we …

no image

D3.jsのBarChartをCoffeeScriptでクラス化(仮)

2013/01/21   -D3.js
 ,

    グラフを描くにはデータセットの数字だけじゃなくて、描画領域の大きさとか幅マージンの値とかいろんな設定が必要なわけで、ただ、データセットの数字とマージンの数字はにんげんにとっ …

気になるD3.jsサンプル

2013/01/19   -D3.js
 

Hierarchical Bars バーをクリックするとその内訳がまたバーチャートになる         Collapsible Indented Tree 開閉できる階 …

no image

Rails3.2からBackbone.jsとD3.jsを使う一例

Backbone.jsからD3.jsを使う d3.jsで力指向グラフを使って遊ぶ2のクラス構成でいけた 今のところattrとかonとかのメソッドだけ抽象化したクラスを作って継承させてる [crayon …

D3.jsでマウスオーバーでオブジェクトをちょっと明るくする

2013/01/16   -D3.js
 ,

D3にはd3.select(this)という便利なイディオムがあるのです 色はd3.rgbというオブジェクトにすると、brighter …

no image

d3.jsで力指向グラフを使って遊ぶ2

2013/01/14   -D3.js
 

力指向グラフ(force layout)でノードの追加・削除をやってみた     緑のボックスをダブルクリックで追加・グレーのボックスをダブルクリックで削除 Backbone.js …

Inkscapeでsvgのグラデーションとフィルターを作成してみた

2013/01/11   -D3.js, ミドルウェア
 

    Inkscapeといえば無料で使えるきれいな線がかけるソフトという認識 SVGを勉強しているとそのフィルタエディタがとても便利だった 参考にしたページ www.atmark …

d3.jsで力指向グラフを使って遊ぶ~force layout & zoom & pan

2013/01/07   -D3.js
 ,

参考 D3をはじめよう 参考 Force Layout forceレイアウトのスケルトン forceレイアウトではオブジェクトに力が作用してその結果をシミュレートできる forceでは、デフォルトで指 …

d3.jsでrectに角丸・半透明・グラデーション・ドロップシャドウ・ライティング効果を追加~主にsvgのこと

2013/01/07   -D3.js
 

基本になるrectを追加 SVG 1.1 仕様 (第2版) 日本語訳 API Reference d3.jsで四角形rectを作成するには最低限width、height、色を指定すればいい 色はcss …

no image

d3.jsでグラフ描画するときの枠組み作成のメモ

2012/12/23   -D3.js
 ,

前の記事 svgでビジュアライゼーションことはじめ~d3.js svgで棒グラフを作成する~d3.js Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize Tree図をい …

Tree図をいろいろ試してみる~d3.js

2012/09/22   -D3.js
 

  前提 Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize これで取得してきたJSONを使っていろいろ試してみた と言っても、まだ指定のJSONを置き換えただ …

d3.jsで棒グラフを作成する

2012/09/19   -D3.js
 ,

  前提 SVGでビジュアライゼーションことはじめ~d3.js   データの数だけ棒を表示する 前回、一つの棒に必要な要素をハッシュにしたものを配列でdata()に渡せば、each …

svgでビジュアライゼーションことはじめ~d3.js

2012/09/19   -D3.js
 , ,

  d3js.org/ nvd3.com/ 参照 www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_20.htm   環境 ubuntu serv …