GUNMA GIS GEEK

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

*

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

     - d3.js

  • このエントリーをはてなブックマークに追加

分解

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

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

example

 - d3.js

  • このエントリーをはてなブックマークに追加

Comment

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

  関連記事

party-mode
D3.jsとWeb Audio APIを使ったオーディオビジュアライゼーション

Demo ※Chrome推奨 D3.jsとWeb Audio APIを用いて作ら …

家計を主に支える者の年収マップ
年収300万未満都市マップ、作ってみた。

むかし、「未満都市」というドラマがありましたね。まぁ、関係ないですけど。 ネット …

Data_Visualization_with_d3.js
D3.js本の出版が止まらない(最近出版されたD3参考書)

参考書が増えてくると「定番のライブラリ」感が出てきて、なんか安心感があるよね。 …

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

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

2014年12月14日時点での衆院議員の資産データ
衆院議員の資産データをツリーマップにしてみた。

自民党デカっ! example 衆院議員の資産データをツリーマップで表示してみま …

ツイートワードクラウド
【D3.js】「全ツイート履歴」からWord cloudを作ってみた。

嗜好がバレる。 自分のすべてのツイートをダウンロードできるようにしました 日本の …

no image
svg要素でもinnerHTMLを使えるようにするpolyfill

主にIE対応に必要。 [crayon-576f7328a79ab51124792 …

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

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

svg mask
[SVG]ドーナツ状のcircleを描画する。

先日の勉強会にて「重ねたcircleの途中の色だけ変えたい」という質問があり、そ …

夏休み最後の自由研究をしよう!データビジュアライゼーションもくもく会
「AITC データビジュアライゼーションもくもく会」に参加しました。

夏休み最後の自由研究をしよう!データビジュアライゼーションもくもく会 ちょうど3 …