D3.js は「ビジュアライズ用のライブラリー」だと紹介されがちなんだけども、意外にも D3.js にはグラフを描画する機能がない。 D3.js のトップページには次のように書いてある。 D3.js はデータからドキュメントを生成するためのライブラリーです。D3 は HTML, SVG, CSS を使ってデータに命を吹き込みます。Web 標準を重要視しているので、独占的なフレームワークに縛られません。強力なビジュアライズ用のコンポーネントと data-driven な DOM 操作手順を組み合わすことで、モダン ブラウザーの能力を最大限に活用できます。 D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG
When I started with d3.js, I really struggled understanding how I could link data from a JSON feed to a SVG graph. I read a lot of tutorials but still, I couldn’t find what I was looking for. Now that I know how d3.js behaves, I thought it would a good idea to share the things that I learned. When you start using the library, there’s stuff that might be foreign to you: It uses SVG which many of us
This is an intro to creating your own animations and transitions in d3.js. In interactive visualisation, there is the word reactive. Well, maybe not literally, but close enough. The fact is that reactivity, or the propension of a visualisation to respond to user actions, can really help engage the user in a visualisation, and help them understand its results. Both of which are usually good things.
D3’s selection.transition method makes it easy to animate transitions when changing the DOM. For example, to change the text color to red instantaneously, you can select the body element and set the color style: d3.select("body").style("color", "red"); To instead animate the change over time, derive a transition: d3.select("body").transition().style("color", "red"); This ease-of-use comes from D3’
Preface Selections Data Scales & Axes Shapes Layouts Outline Preface Visualizing Data with Web Standards D3 provides transformation; no new representation. Data ↦ Elements Visualization requires visual encoding: mapping data to elements. Data-Driven Documents The name “D3” refers to the W3C Document Object Model. Web Standards There are myriad free resources for learning standards. HTML Resources
スマホやタブレットで写真を表示していると、ピンチでズームしたり、ドラッグで移動したりができて便利なので、あれを Web 上で実現してみたくなった。 最近のブラウザーでは touchstart や touchmove イベントでタッチ情報を取れたり、イベントの touches でマルチタッチを扱えたりするので、実現するための基盤はそろっている。 適当なライブラリーがあるかと思って探してみたが、意外と苦労してしまった。 Hammer.js が使えない タッチを扱うためのライブラリーとしては Hammer.js がメジャーらしい。スワイプ・ピンチ・ドラッグなど、各種イベントにも対応していて、これを使えば一発解決してくれそうだ。 ところが、画像ビューワーを作るには不向きだった。困ったのは次の 2 点。 ピンチやドラッグは個別には動くが、組み合わせたときに「表示位置」と「倍率」の関係を自前で計算する
説明 D3.jsのフォースレイアウト(力学モデル)でノードをドラッグできるようにするには、ノードの円を描画した時にcall(force.drag)を実行します。フォースレイアウトの説明についてはこちらのページを参照してください。 サンプル [サンプルを実行する] [サンプルをダウンロード] HTMLソース <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3.js サンプル</title> <link rel="stylesheet" href="css/main.css"> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> </head> <body> <h1>D3.jsサンプル</h1> <div id="myGraph"></
D3.js v4ではd3.zoomオブジェクトを使用することで、簡単にパン/ズームを実装することができます。 var w = 900; var h = 500; var data = d3.range(0, 100).map(function(d){ return {"x": ~~(Math.random() * w ), "y": ~~(Math.random() * h), "r": ~~(Math.random() * 90) + 10 }; }); var svg = d3.select("svg") .attr("width", w) .attr("height", h) //ズーム対象とするレイヤーを生成 var zoomLayer = svg.append("g") //カラージェネレーター var color = d3.scaleOrdinal(d3.schemeCateg
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out. Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R. Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects ar
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く