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

  関連記事

高崎市 平成27年度の主要新規事業予算
高崎市 平成27年度の主要新規事業予算の一部を視覚化してみた。

example 「高崎市の予算(平成27年度)当初予算の概要及び主要事業」より、 …

d3_Before_After_Image
【D3.js】Before After Image Slider

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

前橋市一次避難場所
前橋市一次避難場所

「前橋市オープンデータライブラリー」から取得した町界データと一次避難場所データを …

D3.js + hull.js
点集合を包むパスを描画する(hull.js + D3.js)

表示されている点の集合を包むパスを作成します。 D3では、「d3.geom.hu …

D3.js Openlayers
【D3.js】OpenLayers上にD3.jsで作成したSVGをオーバーレイ

出来た……けど、理解できてない orz OpenLayersライブラリを使ってO …

no image
D3.jsとjQueryのセレクションメソッドの違い

本日は小ネタ。 D3.jsのセレクションは、ほぼjQueryのセレクションと似た …

Building_Bl.ocks
bl.ocks.orgを直接編集できるWebエディタ「blockbuilder」

とても便利なWebエディタを見つけたのでご紹介。 bl.ocks.orgとは? …

no image
【D3.js】 値の正規化(d3.scale)

例えば、上記の …

cartograms
【D3.js】Cartogramsプラグインを使ってみた。

D3.jsのカルトグラムプラグインを使って、データを元に変形させた日本地図を描画 …

Bubbly Gunma
【D3.js】Shape Tweening 練習中

D3.jsを使ったPathのアニメーションについて勉強中です。 path要素のア …