GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ。

*

【D3.js】画像をデータセットとして使う

     - d3.js ver.3

はてなブックマーク - 【D3.js】画像をデータセットとして使う
Pocket

分解

読み込んだ画像ファイルをcanvasに転写し、getImageDataで取得したcanvasPixelArrayを整形して、d3へ渡します。
後は受けとったデータを元にsvgのcircleで描画。
詳細はexampleのソースを参照してください。

ボタンクリックで、色情報を元に分解 → あんまり綺麗に分解できず orz

example

はてなブックマーク - 【D3.js】画像をデータセットとして使う
Pocket

 - d3.js ver.3

Comment

  1. […] Decomposing an image from canvas to SVG […]

  関連記事

インタラクティブ・データビジュアライゼーション ―D3.jsによるデータの可視化
【D3.js】デザイナーにお勧め「インタラクティブ・データビジュアライゼーション」感想

インタラクティブ・データビジュアライゼーション ―D3.jsによるデータの可視化 …

d3barchart000006
【D3.js】おさらい1回目 棒グラフ

昨年末、ブログレイアウトのリニューアルのために去年書いた記事を見直していたのです …

globe wirework
D3.jsで作った地球儀にSVGフィルターエフェクトを適用する。

D3の描画機能にsvgの画像効果を適用することで多彩な表現が可能になります。そこ …

日本 境界ボックス
日本列島を囲む境界ボックス四隅の緯度経度を求める

いまちょっと弄っているライブラリを使う関係で、日本列島がすっぽり収まるBOXの四 …

hhMQ
【D3.js】 Layout sample1

D3.jsのLayout機能のサンプルです。 こちらで作成した関数を使っているの …

円の外周から外周にラインを引く
【D3.js】円の外周から外周にラインを引く(暫定)

example * 表示されない場合はリロードしてください。 まぁ、見てのとおり …

余命地図
あなたの余命はあと何年? 余命地図を作ってみた。

厚生労働省の「平成22年市区町村別生命表」のデータを用いて「余命地図」なるものを …

四国はオーストラリア
D3.jsを使って四国をオーストラリアにしてみた。

example 最近のテレビでは四国がオーストラリアになっていたりするらしいです …

d3_cover
D3.jsで再利用可能なコードの書き方を教えてくれる参考書

Developing a D3.js Edge D3.jsを取り扱った参考書とし …

google map上に円グラフを表示する
【D3.js】Google Map上に円グラフを表示する

example 以前,前橋のオープンデータを使ってシンボルマップを作成しましたが …