GUNMA GIS GEEK

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

*

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

     - d3.js ver.3

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

分解

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

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

example

 - d3.js ver.3

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

Comment

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

  関連記事

d3glob
JavaScriptでヘッドトラッキング

ヘッドトラッキングで地球儀をぐるぐる回すよ! example Gunma.web …

volonoilabel000003
ボロノイ図を使ってラベルの重なり合いを解消する

画像をクリックすると、デモページに飛びます。 見出し1 見づらいラベル2 母点か …

chordgraph
【D3.js】NHKの参議院選挙サイトで使用されていた謎グラフ(Chord graph)的なものを作ってみる。

example 上記のような図を「Chord graph(コードグラフ)」という …

d3-xray-demo
D3.jsのデバッグ用ブックマークレット「d3-xray」

D3.jsを使ったデータビジュアライゼーションの作成では、SVGを含むDOM要素 …

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

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

timezonemap
【D3.js】タイムゾーンマップを作成しました。

example タイムゾーン情報を含んだKMLデータを公開してくれている方がいた …

数据可视化
【数据可视化】中国語圏のD3.jsに関するブログやドキュメント

忙しくて勉強する間がありません。そのため記事にするネタもなかったりして…… or …

Data visualization
ゴールデンウィーク中にD3.jsを学びたい方にお勧めな厳選まとめ

「データビジュアライゼーション(D3.js)を学ぶための教材まとめ」も大分量が増 …

d3.js
D3.jsの歴史。元になったデータビジュアライゼーションライブラリ一覧

D3.jsの歴史は意外と古く、前身となったライブラリがいくつかありますのでここで …

no image
【D3.js】作っておくと便利な関数達

見出し1 ショートカット2 部分適用、ランダム、データ生成3 トグル4 D3 H …