やりたいこと 前回は http://ja.d3js.node.ws/blocks/mike/map/ をに従ってイギリスの地図を作成しました。イギリスでは、いまいち実感がなく、チュートリアルの序盤で行うデータ作成がイギリスを対象にしていたからです。それならば日本を対象にしてデータ…

地図を描く d3.jsを調べていてやってみたかったことの一つとして地図を描くことなので、D3.js と TopoJSON で地図を作るにチャレンジしてみます。 準備 地図を描くためのデータを準備します。 gdalをインストール GDAL(Geospatial Data Abstraction Library …

アニメーションを行うことで、 .enter()、.update()、.exit()を可視化する 最後の General Update Pattern, III では .data()メソッドに与えられたデータに追加、更新、削除が生じた時に、それぞれに異なるアニメーションを行います。 アニメーションの指定 …

データにキーを持たせる方法 d3.js の General Update Pattern, I を読む - huruyosi’s blog でのデータ更新は配列の要素に基づいた方法であったので、サンプルを見ていても「更新」されたとするデータがみためとはずれている感覚がありました。 General Upd…

huruyosi.hatenablog.com の続きです。 漠然と、d3.jsで作成したグラフを動的に更新する方法が分からないのでd3.js でデータを更新する方法を理解するために General Update Pattern, I を読んでみます。 やっていること。 a～zの文字列を任意に抽出して表示…

悩み所 サンプルを参考にして望んでいたひとつのグラフを作成することができたものの、それに手を加えようとしたら手が止まってしまいました。 今、やりたいことは下の二つです。 ブラウザのウィンドウがリサイズされたら、リサイズ後のウィンドウサイズに応…

Diverging Stacked Bar Chart を参考にして横方向の積み上げグラフを作った時に系列のラベル名が長いと左余白を超える場合があり、見た目が格好悪いものになってしまいます。 「svg 折り返し」で検索してみると foreignObjectを使う方法が出てくるけれども、…

写経一通り終わり 前回、前回と行ってきた D3.jsのチュートリアル が終わりました。 huruyosi.hatenablog.com huruyosi.hatenablog.com 次の目標は ギャラリーを参考にして基本的な円グラフを作成する。 13.棒グラフの作成 の結果 https://github.com/huruyo…

今回は チャプター7～10まで 前回の続きになり、チャプター7～10まで http://ja.d3js.info/alignedleft/tutorials/d3/ 今のとこは順調にいけている。ここまではD3.jsを使うための準備だったと思う。SVGを使っているとN88-BASICやX-BASICでワクワクしながらプ…

かっこいいグラフを作りたくて D3.jsの勉強を始めました。手ごろなチュートリアルがあるので写経を行っています。 写経の結果は github (https://github.com/huruyosiathatena/d3js_study)にあります。Spring bootのWebアプリに組み込む予定なので、Spring b…