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

  関連記事

barchart ui example
D3.jsで棒グラフを広げるUIを作ってみた。

example 棒グラフをクリックしたら、画面いっぱいまで広がって詳細を表示する …

Procoding
iPhoneやiPadで気軽にD3.jsを試せる開発環境「Procoding」

Procoding Processing.jsやPaper.jsなどのグラフィッ …

d3.svg.brush
【D3.js】選択されたデータ範囲のグラフを表示する(d3.svg.brush)

下位のグラフで選択された範囲を上位のグラフで拡大表示します。 複雑なことをやって …

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

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

D3.js勉強会(地図入門)を開催しました。

example D3.js勉強会(地図入門)が無事終了しました。 前回は、ネタ不 …

Appleが買収した「Mapsense」というジオビジュアライゼーションスタートアップについて

以前、Mapsenseに関する記事を書いていたのですが、書いている途中でデベロッ …

d3.js tspan で改行
【D3.js】text要素で手っ取り早く改行する方法2種。

SVG textで改行 part.1 SVG textで改行 part.2 D3 …

d3 image brush
D3 Brush機能をユーザーインターフェイスの作成に利用する

example 小ネタです。 画像上をドラッグして範囲を選択すると、選択した範囲 …

前橋市 平成22年男女別・年齢別人口構成
前橋市には、男子より女子の方が多く住んでいる。

example 男子の人口を、女子の人口が上回る地域が多数。 概要 前橋市オープ …

【node.js+D3.js】RSSリーダーを作る

feedparserの仕様が変わったため現在動きません。 Googleが酷いこと …