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

  関連記事

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

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

smoothGeoPath
地図上のラインを滑らかに表示する

example geojsonのラインを補完して滑らかに表示してみました。 ちょ …

topojson マージ
GeoJSONを軽くするだけじゃない! TopoJSONクライアント TIPS

単純に、GeoJSON形式のデータを効率よく圧縮してファイルサイズを軽くするもの …

cesiumcolview
地理院地図の地図タイルを使ったD3.js&Cesiumサンプル

D3.jsでラスター地図のパン/ズーム&移動の記事を書いた頃は、まだ「電子国土W …

textPahtJapan
【D3.js】文字で日本地図書いてみた。

example またもや小ネタです。 文字を使って日本地図を描いてみました。 北 …

d3leaflet2014051
【D3.js】 LeafletにSVGをオーバーレイする。

Leafletは、モバイルフレンドリーでインタラクティブな地図をWeb上に表示す …

福岡可視化
福岡市 防犯危険箇所ヒートマップ

example 「ビッグデータ・オープンデータの活用アイデアコンテスト」用に福岡 …

Google Mapにマスクをかける
【D3.js】Google Mapにsvgを使ってマスクをかける

example 実は以前、ClipPathを使って似たようなことをやったことがあ …

pathGL
【D3プラグイン】 D3で作成したグラフをWebGLでレンダリングするプラグイン「PathGL」

先週末からずっと雪かきです。 生まれて初めて「雪のせいで家から出られない!」とい …

d3_Before_After_Image
【D3.js】Before After Image Slider

example スライダーで2枚の画像を切り替えて比較できる、いわゆる「Befo …