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 […]

  関連記事

Map-heart-054
ハート型の地図

ハッピーバレンタイン(1日遅れ) 上記はオロンス・フィネ(オロンティウス・フィネ …

D3 Deconstructor
D3.jsで作成されたグラフからデータを抜き出すChromeエクステンション「D3 Deconstructor」

公式サイト 海外のD3クラスタで話題になっていたGoogle Chromeエクス …

dailyd3
D3.jsの最新情報と解説記事を配信「Daily D3」

Daily D3 D3公式サイトや多数の海外ドキュメントなどの翻訳を手掛けていら …

svg logo
SVGをぬるぬる動かしたいので勉強中

SVGアニメーション習作。 D3のトランジション機能を使うことで殆どの用途を満た …

panning
【D3.js】水平パンニング

example データを表示する領域を制限して、ドラッグした際に続きのデータを見 …

【D3.js】トランジション終了時にコールバックを呼ぶ
【D3.js】トランジション終了時にコールバックを呼ぶ

D3を使って要素を移動したりスタイルを変化させる際、変更(Transition) …

stockvault-bookshelf-126368
【D3.js】 データの取得(ダウンロードできる公開情報まとめ)

公開データまとめ データを可視化するにも、そもそもデータがなければ始まらないので …

filelisttreemap
【D3.js】サイズの大きなファイルを可視化する(ツリーマップ)

example 以前、アクセス流入元をツリーマップで表示してみたことがあるのです …

d3
D3.jsの勉強会を行いました。

D3.js勉強会@群馬、無事開催いたしました。 何しろ初めて勉強会というものを主 …

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

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