【D3.js】 LeafletにSVGをオーバーレイする。
Leafletは、モバイルフレンドリーでインタラクティブな地図をWeb上に表示するJavaScriptライブラリです。最近、海外での存在感が高まっているような気がします。 今回は、D3で作成したsvg要素をLeaflet上にオーバーレイしてみました。 (まだ、ソースのコメントに書いたこと以上の知識がないので、サンプルコードのみで詳しい解説はありません) サンプル D3.jsとともにLeaflet.jsとleaflet.cssを読み込んでください。 <!-- leafletのcssを読み込む --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6H
【D3プラグイン】フロアマップを表示する「Floor Plan」
example 「Floor Plan」は図面上にレイヤーを重ねて、ポリンゴンデータやパスデータ、ヒートマップデータなどを表示できる、D3プラグインです。 簡単に使えてわりと実用的かも。 間取り図の表示なんかに使えるかもしれません。 サンプルコード var w = 720; var h = 487; //スケールの指定 var xscale = d3.scale.linear() .domain([0,50.0]) .range([0, w]); var yscale = d3.scale.linear() .domain([0,33.79]) .range([0, h]); //初期化 var map = d3.floorplan().xScale(xscale).yScale(yscale); var imagelayer = d3.floorplan.imagelayer(); va
D3の魅力
d3.js Advent Calendar 2013 6日目の参加記事です。 技術的なことはちょっと置いておいて、個人的なD3愛を語ってみました。 例えば、大学で私は、コンピュータに手を触れる前に 紙の上でプログラムを完全に理解しなければならないと教わった。 でも私はそういうふうにはプログラムできなかった。 私が好んだやりかたは、紙の前ではなく、コンピュータの前に座って プログラミングすることだった。もっと悪いことに、 辛抱強く全てのプログラムを書き上げて正しいことを確認するなんてことは せずに、私はめちゃくちゃなコードをおっぴろげて、 それを次第に形にしてゆくのだった。 私が教わったのは、デバッグとは書き間違いや見逃しをつかまえる 最終段階の工程だということだったが、 実際に私がやっていたのは、プログラミングそのものがデバッグという具合だった。 （中略） プログラミング言語はプログラムを
D3.js勉強会（地図入門）を開催しました。
example D3.js勉強会（地図入門）が無事終了しました。 前回は、ネタ不足で時間が余りましたが、今回はそんなこともなくそれなりに内容のある勉強会になったのではないかと。 逆に時間が足りず伝えきれなかった部分もあるとは思うのですが、目標であった「塗り分け地図(コロプレス図)の作成」まで出来たので良しとしようかなと。 勉強会で使用したスライドとコードを置いておきます。 D3で地図を描こう！ 1 D3で地図を描こう！ 2 サンプルコード (サンプルコードはローカル環境では動きません。サーバーにアップロードするか、同梱したserver.jsを使用してください) スライドの方は内容をまとめきれず、口頭で補足・説明した部分も多いので、これだけみてもよくわからないかもしれません。 まぁ、それでも多少参考になれば良いかなぁと。 ひとまず、やりたかったD3 geoに関する勉強会が開催できたので満足で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
