D3 軸と軸ラベル の微調整テク - Qiita
// input const sc = d3.scaleLinear().domain([0,100]).range([0, width-80]); const ax = d3.axisBottom().scale(sc); const ax2 = d3.axisBottom().scale(sc).ticks(4); const ax3 = d3.axisBottom().scale(sc).tickValues([0,20, 40, 80]); const ax4 = d3.axisBottom().scale(sc).tickFormat((val) => { return val === 30 ? '' : val.toString() }); const ax5 = d3.axisBottom().scale(sc).tickSize(10) // output const x
D3.js v4/5 使い方 徹底攻略 – データビジュアライゼーション・ラボ
2018-02-152022-10-03 インタラクティブなグラフ、チャート、データ可視化のためのjavascriptライブラリ、D3.js(Data-Driven Documents)の使い方を徹底解説します。v4/5に対応しています。 チュートリアル 環境準備 要素の追加方法 (append) データのバインド方法 (data,enter) SVGの基礎 グラフの書き方 基本的な使い方 data使い方(enter,update,exit) 表(table)の作り方 カラースケールの作り方 カラーテーマまとめ アニメーションのエフェクト一覧 Web上のファイルの読み込み方(d3-fetch) 乱数生成関数の使い方 マウス/タッチイベント drag使い方 zoom使い方 範囲選択 (brush) 使い方 範囲選択 (brush) 使い方 (タッチパネル応用) 基本チャート 棒グラフ(bar
SVGオブジェクトの重なり統制が不完全なことへの対処 - jnobuyukiのブログ
このブログではSVGオブジェクトをよく取り上げてきました。いわゆるペイントのようなソフトなしで図形を描けるので、とても便利です。しかし、不便なこともあります。その一つが重なり順序の統制の問題です。 SVGオブジェクトの重なり順 単一のSVGオブジェクト上に描かれた図形や画像の重なり順は、描き出した順番と完全に一致します。つまり、後に書いたものほど手前に来ます。SVGオブジェクト自体は純粋な２Dの概念で出来ているようなので、奥行きのような属性がありません。なので、少なくとも現状では、一度書きだした複数の図形の重なり順を後から変更できません。これが非常に不便な場合があります。例えば、D3.jsでたくさんの図形を一度に書きだした後で、transition()による操作を加えた後から、SVGオブジェクト上の背景画像を入れ替えるときを考えてみます。この場合、背景画像を入れ替えたつもりが、背景画像が最
d3.js超初心者向け ①→②を表現してみる - Qiita
d3.js凄そうなんですけど、ちょっと応用しようとすると途端に表示されなくなったりとか、意図と違ったりとかで、挫折する気がします。 そんな超初心者向けのtipsです。 この記事で行うこと d3.jsで丸を描く d3.jsで線を引く d3.jsで矢印を描く svgの要素を知る 環境 Mac OS X(10.9.1) + Google Chrome(2014/2/26現在 最新) で確認しています。 準備 コピペして試せるように準備しておきます。 htmlとjavascriptファイルを分けて、javascriptファイル側だけ編集すればいいようにしておきます。 何度もリロードすることになると思うので、d3.jsのファイルはローカルに保存しておいたほうがさくさく進めます。 <!DOCTYPE html> <head> <meta charset="utf-8"> <script src="d3
D3.js v5 入門｜#5 棒グラフにクリックイベントを追加する
次の棒グラフにクリックイベントを追加し、バーがクリックされるとアラートメッセージを表示するように実装してみます。 Demoを表示 <!DOCTYPE html> <html> <head> <title>d3 click event</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="js/d3.min.js"></script> <style type="text/css"> .bar { fill: steelblue; } .axis text { font: 10px sans-serif; color: #333; } </style> </head> <body> <svg id="chart"></s
D3.js v4/v5 force simulation 最小構成 – サンプル – データビジュアライゼーション・ラボ
2018-02-022018-03-31 D3 forceSimulationのプログラムデモです。 forceSimulationの最も簡単な構成のプログラムを紹介します。はじめてforceSimulationを使う際などに活用ください。 サンプルデモ – ノードをドラッグしてください。 D3.jsのforceSimulationは、ノードの位置をばね力などを考慮して計算するものです。v3以前ではforce layoutとして定義されていて、同じ関数が使えないので書き換える必要があります。設定できるパラメータがいくつもありますが、ここではまず導入できることを目指して最小構成のデモとプログラムを解説します。 サンプルコード <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 v5 force simulation</
D3.js v4/v5 force simulation ノード相互作用 – サンプル – データビジュアライゼーション・ラボ
2018-02-022018-03-10 D3.jsのforceSimulationのプログラムデモです(v4/v5対応)。リンクなしバージョンです。ノード間の相互作用を説明します。 ノード(丸いやつ)をドラックしてください。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 v5 force simulation node detail</title> </head> <body> <svg width="800" height="600"></svg> <script src="https://d3js.org/d3.v5.min.js"></script> <script> // 1. 描画用のデータ準備 var nodesData = []; for(var i = 0; i < 50; i++) { no
Processing vs D3.js - 7rpn’s blog: うわああああな日常
...ビジュアライジングしたい。 と思ったわけです。現代では直に感覚に訴えかけるようなビジュアライジングが溢れており，自分もやりたいなーと思ってしまうわけです。 そこで誰もが突き当たるのが，どうやってビジュアライズするか 問題。 ビジュアライジングっていわゆる可視化手法で，理解しづらいデータを視覚的に理解しやすい形に再構成することらしいです。 グラフ書くだけならExcelで何も問題ないのですが，やっぱり対話的に作りたいなーと思いますよね。マウスかざしたら詳細が表示されるとか。 てなるとやっぱりプログラム組まないといけないわけです。そしてプログラミングの手法に何を選ぶかってその後の効率にかなり響いてくるのでけっこう大事。 というわけで，代表的な可視化手法であるProcessingとD3.jsのどちらを選ぶか悩んでみました。とりあえずオライリー本は両方あります。比較するしかない。 Proces
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
世界中で利用される「D3.js」の開発者が10年間で学んだこととは？|au Webポータル経済・ITニュース
ダボス会議2020の「勢力図」を読む
Marey's Schedule Chart · Data Visualization Examples · Demos
Transit Tracker
D3 V4 zoom with Axis explained
GitHub - d3/d3-drag: Drag and drop SVG, HTML or Canvas using mouse or touch input.
Snap to Grid
Building a Grid UI with D3.js v4 — P1
D3.jsをv3からv4/v5にバージョンアップした際の変更点メモ - Qiita
TypescriptでD3.jsを使う方法 - 技術間
@types/d3
Visualizations - datamatic.io