![http://snips.net/blog/posts/2014/01-10-fast-interactive_prototyping_with_d3_js.html](https://cdn-ak-scissors.b.st-hatena.com/image/square/303dd17d1bc2904a854412f552d1762ea6d927b5/height=288;version=1;width=512/https%3A%2F%2Fsnips.ai%2Fstatic%2Fimages%2Fsnips_share_11.png)
circles.enter() .attr('cx', function(d, i) { return i * 280 / n + 10; }) のような座標を計算する関数が何箇所かに散らばっていた。 これ、d3.svg.line() を使ったらまとめられるし、便利な interpolate の機能も使えるよ、というのが今回のお話。 d3.svg.line() の使い方 たとえば var line = d3.svg.line() .x(function(d, i) { return i; }) .y(function(d, i) { return d * d; }); としておくことにする。line.x() とすると function(d, i) { return i; } を返してくれるので、関数を再利用してコードが読みやすくなる。line.y() も同様。 さらに、line([5,2,
I know svg has an in built function to do rounded corners, but I need to do rounded corners on only 2 of the four corners. I know I can draw multiple rectangles on top of each other to imitate that, but that seems kind of cheesy. Any way to do it using clipping or any d3.js method? Right now I have a horizontal bar graph that has rects like: rects.enter().append("rect") .attr("x",function(d,i) { r
Keiichiro Ono UC, San Diego School of Medicine Cytoscape Consortium はじめに まず自己紹介をさせていただきます。私はアメリカ西海岸、カリフォルニア州の最南端に位置するサンディエゴ在住のソフトウェア開発者です。カリフォルニア大学サンディエゴ校(UCSD)と言う大学の医学部で、生物学者や医師に混じって彼らが研究で必要とする各種ツールを開発しております。分野としてはbioinformaticsと呼ばれるものです。 先週の土曜日(3/29/2014)、サンフランシスコにあるGitHub本社にて行われたd3.unconfというD3.jsや可視化周辺の実務的な話題を扱う会議がありました。Cesar Chavez Dayで三連休だと言うこともあり1、私にとってはちょうどいいタイミングでしたので、久しぶりにサンフランシスコまで足を伸ばして
たとえばある変数の値が350の場合、ある棒グラフではY座標はいくつになるでしょうか。またはあるバブルチャートでは円の直径はいくつになるでしょうか。 インプットとしてのデータセットが持つ数値体系や幅(最小値〜最大値)などは、たいていアウトプット先の例えば液晶ディスプレイなどとは数値体系や幅(例えば表示領域など)が異なるため、両者をつなぐための方法論が必要になります。視覚化される要素の座標や大きさだけではなく、色や数値ではない例えばカテゴリーなどにも同様の手法が適用可能です。 Processingではmap、D3ではscaleという機能でまとめられています。しかしここには「正規化」という概念が隠されています。正規化という言葉にはいくつかの意味があり、ここではベクトルにおける正規化のことを指します。 その変数が含まれるデータセット全体(もしくは基準とすべき)最小値〜最大値の幅の中で、どの辺りにあ
ブラウザー上でデータビジュアライゼーションをやる場合にどの技術を使うべきなのか。そんなテーマでTwitter社でVisual Analysis & Insights teamのMiguel Rios氏が、今年5月にボストンのOpenVis Conferenceで講演しました。 講演での順番とはちょうど逆になりますが、話の流れがわかりやすい順番に構成します。 主にブラウザーのレンダリングの仕方が、DOM構造を残した状態なのか、そうでなく1つのDOM要素(canvas要素)の中にすべて描画するのか、という点を切り口に、主要な実装方法であるHTML/CSS、SVG、HTML5 Canvas、WebGLを取り上げ、整理しています。 実装にとりかかる前に明らかにすべきこと 要素はどのくらいの数になるのかそれらの要素はどのくらい複雑な形をしているか、また配置するかどの程度インタラクティブ性を持たせるか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く