【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
Objective-Cのクラスの依存関係を「D3.js」でビジュアライズするライブラリ - Over&Out その後
Objc-dependency-visualizerというOSSツールを使うと、アプリ内で使用している Objective-C クラスの依存関係をビジュアライズしてくれます。 試しに "iOS7 Sampler" でやってみると、こんな感じのを生成してくれました。 実行するのはrubyスクリプトで、依存関係だけが記述されているだけのシンプルなjsファイルが生成されます。 で、閲覧時にはリポジトリに同梱されている index.html 内のJavaScriptから、生成したjsファイルとビジュアライゼーション用 JavaScript ライブラリ「D3.js」を使用してビジュアライズされます。 そんなわけで、引っ張ったり特定の箇所にフォーカスしたり表示をいろいろカスタマイズしたりできます。 （SVProgressHUDにフォーカスした図） 使い方 GitHubからcloneしてきます。 git
HTML D3.js Layout - @//メモ
d3.layout とは？ † layout は、直接グラフィックを描画しない layout は、生データを中間形式に変換する function たとえば、pie layout の場合 d3.layout.pie() は、生データの配列を、対応する円グラフの中心角の配列に変換する 中心角の配列を d3.svg.arc() で、SVG のポリゴンに変換する 最終的にできた <path d="M123,456,780,..."/> がブラウザにより画面に表示される ↑ pie layout † https://github.com/kagyuu/D3JSExam/blob/master/D3JS-layout-pie.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Pie</title> <st
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
