はじめに SVGの描画にD3.jsを使っています。 D3.jsの現在のバージョンはv5（2018年7月時点）ですが、v3からv4（2016年7月）で大きな変更があったためそのままでは動かなくなりました。 本記事では、動かなくなった部分の修正ポイントを備忘録的に記載しておきます。 attrとstyleの引数にオブジェクトはNGに v3では選択したDOMにattrやstyleを使ってオブジェクトで一括して変更を加えることができましたが、v4からはオブジェクトが使えなくなりました。
動くサンプルがObservableにあります。D3.jsはversion 5です。 https://beta.observablehq.com/@mojaie/collapsible-tree-with-checkboxes-d3-js (2018/09/05追記) やや改良したバージョンのものをObservableに置きました。 https://beta.observablehq.com/@mojaie/d3-js-collapsible-tree-with-checkboxes-revised 元データ。{id: 'root'}は仮想の最上階層です。 data = [ {id: 'root'}, {id: 'Hominidae', parent: 'root'}, {id: 'Ponginae', parent: 'Hominidae'}, {id: 'Pongini', parent
2018-02-242018-03-21 棒グラフにtooltipを付ける方法を紹介します。D3 v4/v5にはtooltip用の関数が用意されていないのですが、CSSを使って簡単に実装できます。 サンプルデモ – バーをタップ、もしくはカーソルを合わせてください <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Test</title> <script src="https://d3js.org/d3.v5.min.js"></script> <style> /* CSS設定 */ .tooltip { position: absolute; text-align: center; width: auto; height: auto; padding: 5px; font: 12px; background: w
久しぶりにコードを書きたくなり、普段仕事がインフラ系なのでなんかビジュアル系のものがやりたくてD3.jsで地図を描くことにしました。Webのチュートリアルが古かったり、mac前提だったりして環境設定でいろいろはまったのでメモ。2017年2月5日時点でのWindows 10でのメモです。 エディタ＋実行環境 Visual Studio Community 2015 にしました。JavaScriptでもインテリセンスが強力だし、F5を押したらIIS Expressを起動してくれるし。 「新規作成」>「Webサイト」>「ASP.NET空のWebサイト」でプロジェクト作成して、「追加」>「新しい項目の追加」>「HTMLページ」 その他ツール類の準備 各ツールの利用目的などの詳細は後で。 QGIS Welcome to the QGIS project! GISデータとして一般的なSHAPEファイル
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
D3のマウス/タッチイベントに対応するzoomの使い方を紹介します。 サンプルデモ グラフ上でドラッグ/スワイプ、マウスホイール/ピンチインしてください。下のresetボタンで初期位置に戻ります。 reset サンプルプログラム <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 v5 zoom</title> </head> <body> <button id='resetButton'>reset</button> <script src="https://d3js.org/d3.v5.min.js"></script> <script> var width = 800; / var height = 600; // グラフの高さ var svg = d3.select("body").append("svg")
Hey, so this post is broken. I moved platforms and some of my old tutorials don’t play nicely with WordPress. I’m working on fixing them, but in the meantime you can view the old version here: https://cagrimmett-jekyll.s3.amazonaws.com/til/2016/08/27/d3-transitions.html Part 1: Let’s Make a Pie Chart with D3.js Part 2: Let’s Update a Pie Chart in Realtime with D3.js Part 3: Smooth Pie Chart Transi
(function(c){function a(b,d){if({}.hasOwnProperty.call(a.cache,b))return a.cache[b];var e=a.resolve(b);if(!e)throw new Error('Failed to resolve module '+b);var c={id:b,require:a,filename:b,exports:{},loaded:!1,parent:d,children:[]};d&&d.children.push(c);var f=b.slice(0,b.lastIndexOf('/')+1);return a.cache[b]=c.exports,e.call(c.exports,c,c.exports,f,b),c.loaded=!0,a.cache[b]=c.exports}a.modules={},
D3のアニメーション用API、transitionと一緒に用いるeaseを紹介します。D3でのアニメーションの設定は下記です。 d3.select("circle") .transition() .duration(750) .attr("cx", 500);この設定では、選択した”circle”がcx=500の位置に750ミリ秒かけて移動します。D3のメソッドeaseを用いるとエフェクトを変更することができます。 d3.select("circle") .transition() .duration(750) .ease(d3.easeBounceInOut) .attr("cx", 500);d3.easeBounceInOutはエフェクトを変化させるための関数で、次の種類が用意されています。サンプルとしてcircleに時間変化のアニメーションを、グラフに時間と変化量の関係を表示します
D3で用意されている乱数を生成する関数を紹介します。 メソッドはすべて関数を定義するもので func = d3.randomUniform(); value = func();のように使用します。 一様分布 d3.randomUniform 一様分布に従う乱数を発生させる関数を定義します。 引数で範囲を設定することができ、 d3.randomUniform(6)のように引数がひとつの場合は0以上引数(6)未満の値が、 d3.randomUniform(1, 5)のように引数が二つの場合は引数1(1)以上、引数2(5)未満の値が生成されます。 生成例 正規分布 d3.randomNormal 正規分布(ガウス分布)に従う乱数を発生させる関数を定義します。 引数として平均値と標準偏差を設定することができます。 デフォルトは平均値=0、標準偏差=1です。 d3.randomNormal(平均値,
目的 私は**D3.js(Data Driven Document：JavaScriptの情報可視化ライブラリ)**を導入する上で、バージョンの違いに苦しめられました。主に、D3のver.3(以下v3)からver.4(以下v4、2016/7月リリース)で大規模な変更があったためです。Webに掲載されているサンプルコードはv3で作られたものが多く、v4上ではその大半が動きません。 本記事の目的は、自分の備忘録および、同じくD3v4を新規導入する方々のために、v3からの変更点や、v3用に書かれたコードをv4用に再コーディングする場合のポイントを述べることです。 内容 重要な点は以下3点です。それぞれセクションを区切って説明します。 Scale selection.attr / selection.style selection.merge Scale Scaleは値の正規化（線形変換、対数変換
var circle = svg.selectAll("circle") // 1 .data(data) // 2 .style("fill", "blue"); // 3 circle.exit().remove(); // 4 circle.enter().append("circle") // 5 .style("fill", "green") // 6 .merge(circle) // 7 .style("stroke", "black"); // 8 上記コードを順を追って説明すると、 svgの全てのcircle要素を選択 circleに対応するデータを更新する データと対応しているcircleを青で塗りつぶす 対応するデータが無くなったcircleを削除 新しく加わったデータのcircle要素を作成して選択 新しく作成したcircleを緑で塗りつぶす 新しく作成したcirc
I am using d3.js for graph. at some point i have to show data with some special part of graph for example if the values is cross some boundary then show that part with filling pattern. for more clear is there in and image. i get the rect part that cross the boundary but how can i fill it with this pattern? any css or canvas tricks? Note : this image is just an example not the real one
そのD3.jsですが、まだまだ使いこなすユーザーが少なく、その可能性からしてまだまだポテンシャルがあるのが現状です。 有志によりスタートしたコミュニティ【DVVX（Data Visualization version X）】では、＜データビジュアライゼーションのための基礎知識＞と実際に＜D3.jsハンズオンセミナー＞をセットにしたワークショップを開催します。 講師は、日経新聞編集局のエンジニア清水正行さん。数年前から個人活動として多くのデータビジュアルをD3.jsによって作成し発表も行ってきました。今回、DVVXの活動において＜プログラム＞のメンターとしてワークを行っていただきます。 ＜こんな人におすすめ＞・情報デザインに挑戦したいエンジニア ・多量のデータを共有し積極的に活用してみたい人 ・Webサイトでデータプレゼンテーションしてみたい人 ・データとデザインの関係に関心がある人 ※様々
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く