インターネット通信データ量をd3jsのツリーマップで可視化してみた - ある研究者の手記
練習などを兼ねてちょいと書いてみました。 自分のMacBookProで作業をしていた時に取得した通信データから、通信相手をドメイン名で判定し、送受信量をもとにツリーマップにしてみました。通信からのデータ取得は自作ツールを使い、出力結果をPythonでごにょっといじった後にd3jsで描画しました。通信データは約5時間ほど。 HTML版はここに公開しています。細かい通信量とか見えます。 送信データ量のツリーマップ 送信データ量と受信データ量は一度に表現するのが難しいので、今回は分けてみました。まずは送信データ量から。 解説を入れるとこんな感じです。 送信データ量そのものは多くないのですが、作業していたソースコードがDropbox配下にあったので頻繁にDropboxにデータを送信していたため、Dropboxがとても大きく出ています。といっても、送信データ量はDropboxの島を全部あわせて70M
D3.js v4を使ってGoogle Map上にSVGをオーバーレイする。
概要 D3.js ver.4 を使ってGoogle Map 上にGeoJSONから生成したポリゴンを表示します。 サンプル example d3.json("gunma.geojson", main); function main(json) { //Google Map 初期化 var map = new google.maps.Map(document.getElementById('map'), { zoom: 9, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(36.53, 139.06), }); //OverLayオブジェクトの作成 var overlay = new google.maps.OverlayView(); overlay.onAdd = function () {
簡単にガントチャートとかクラス図とか書けるやつ - Qiita
mermaidは、Web上で簡単にフローチャートやシーケンス図などのUMLが描けるライブラリです。 d3.jsの機能特化型というかんじで、d3ほど様々なことはできませんが、そのかわりに対応してる図形なら非常に簡単に描くことが可能です。 なお、ヘルプはGitGraphやクラス図が載ってないなど未完成で、いまいち頼れません。 ごたくはいい、実物を見せろ こんなかんじ →支払い忘れてサーバが死んだので代替(誰かが書いたやつに勝手にリンク) できること 以下の図が描ける。 ・フローチャート ・シーケンス図 ・ガントチャート ・クラス図 ・gitグラフ 最後だけ異質だ。 インストール CDNを使えばいいだけだが、自分のところに置きたい場合はyarnで引っ張ってこれる。 <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" hre
greuler - graph theory visualizations
greuler is graph theory visualization tool powered by d3 and on top of WebCola which allows the creation and manipulation of graphs with a simple api greuler works on top of d3.js and WebCola so include those first <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script> <script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script> Install greuler with bower
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
