Hummer.jsを使ってD3.jsで生成した要素にスワイプイベントなどを設置するサンプル。
shimizu shimizu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if(!d3.geo2circle) d3.geo2circle = function(coordinates, radius) { | |
| //circle 生成用の変数 | |
| var circle = [], | |
| length = 0, | |
| lengths = [length], | |
| polygon = d3.geom.polygon(coordinates), | |
| p0 = coordinates[0], | |
| p1, | |
| x, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>presimplify example</title> | |
| <style> | |
| html, body { | |
| width:100%; | |
| height: 100%; | |
| margin: 0px; | |
| padding: 0px; | |
| } |
ドラッグに追従するサークル群
楽天カードの明細csvを読み込んで当月請求額を基準としたツリーマップを表示します。
csvはアップロードされるわけでは無く、フロントエンド（ブラウザ）上だけで処理されますが、不安な方は自サーバーなどにindex.htmlをアップしてためしてみてください。
なお、Chromeでしか動作確認してません。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <style> | |
| html, body{ | |
| width:100%; | |
| height:100%; | |
| } | |
| svg { | |
| width: 960px; | |
| height:500px; |
地図上のパスを滑らかに表示
Built with blockbuilder.org
Built with blockbuilder.org
古いバージョンのsafariなどで、動かないことがある。
Built with blockbuilder.org