GitHub - mermaid-js/mermaid: Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development. Doc-Rot is a Catch-22 that Mermaid helps to solve. Diagramming and documentation costs precious developer time and gets outdated quickly. But not having diagrams
どんなデータもリアルタイムなグラフにできるフレームワーク「FnordMetric」:phpspot開発日誌
FnordMetric | Framework for building beautiful real-time dashboards どんなデータもリアルタイムなグラフにできるフレームワーク「FnordMetric」。 どんなデータも次のような美しいUIを持つリアルタイムなグラフにできます。 サイトの会員数、ユニークアクセス数、データ投稿件数等、リアルタイムにデータを見たいような場合に使えそう。 muninなどでもグラフ化できますが、ここまでのUIの美しさとリアルタイム性は備えていないので、リアルタイムに欲しい情報はこれでダッシュボードにして監視すると便利でかっこ良さげ。 Ruby+Redisで書かれていますが、データの表示にはHTML5/JavaScriptのAPIが使えるようです 関連エントリ 世界地図でデータをビジュアライズする際に使えるJSライブラリ「DataMaps」 リアルタ
HTMLテーブルの内容からグラフを描画·AttC MOONGIFT
AttCはHTMLテーブルのデータをGoogleチャートを使ってグラフ化するソフトウェアです。 数値データを表示する際に最も簡単なのは一覧表で表示することです。HTMLで言えばテーブルタグで表示するのが一番簡単でしょう。しかしそれではデータの傾向が分かりづらい…そう思ったならAttCを使ってみましょう。HTMLテーブルのデータからグラフを作成してくれます。 こちらはパイチャート。 データを表示しました。 選択肢を変えればリアルタイムにグラフが変わります。 棒グラフ。 エリアグラフ。 折れ線グラフ。 AttCが使っているのはGoogleチャートAPIです。テーブルデータを読み取って、円グラフ、棒グラフ、エリアグラフ、折れ線グラフを表示してくれます。クリックだけでグラフの種類や表示項目を変更できるので、どのグラフで表示すべきか色々テストしてみるというのにも使えそうです。 AttCはHTML/J
クエリの改善に。MySQLのSlow Query Logを可視化する·MySQL slow-query-log Visualizer MOONGIFT
MySQL slow-query-log VisualizerはMySQLの時間のかかるクエリをWeb上で閲覧するソフトウェアです。 MySQLには実行時間の遅いクエリをログファイルに書き出す機能があります。単純にテキストに吐かれるだけなので分析に時間がかかってしまうのではないでしょうか。そこで使ってみたいのがWebブラウザベースの解析ソフトウェアMySQL slow-query-log Visualizerです。 サンプルです。データ量が多くないとあまり面白くないですね。 公式サイトより。曜日ごとに発生回数をグラフ化しています。 クエリログファイルをWebブラウザの画面にドロップするだけで解析処理が行われます。その結果はグラフに描かれる仕組みです。また、クエリは一覧で表示され、任意の文字でフィルタリングすることもできます。曜日と時間によって分析されるので対応すべきポイントが分かりやすくな
多彩な表現をご覧あれ。JavaScriptによるデータビジュアル化ライブラリ·JavaScript InfoVis Toolkit（JIT） MOONGIFT
JITはJavaScriptを使ったデータビジュアル化ライブラリです。 JavaScriptを使ってWeb上でデータを多彩にビジュアル化するライブラリがJavaScript InfoVis Toolkit（JIT）です。その多彩な表現をご覧ください。 積み上げのエリアグラフです。表示の際にはアニメーションが実行されます。 実際のコードです。 棒の積み上げグラフです。 横向き、2Dのグラフです。 関連グラフです。マウスで動かせます。 マウスオーバーで説明が表示されます。 こんなグラフもあります。 星形。格好いいです。 カスタマイズにも多様に対応しています。 容量の表示などによく利用されるツリーマップです。 こちらもパターンが色々用意されています。 グラフを組み合わせたパターンです。 こんな表現も可能です。 派生していくアニメーションが格好いいです。 円グラフです。アニメーションやマウス操作に
Web上でヒートマップを簡単に実現するHTML5/JavaScriptライブラリ「heatmap.js」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
heatmap.jsはWebベースのヒートマップ表示ライブラリ。 heatmap.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。グラフには様々な種類があるが、とりわけ作るのが難しそうなグラフにヒートマップがある。一定の範囲における影響度を表現したり、ユーザの動きを可視化するのに使われたりする。 デモ 動線を可視化することによってサイトの流れを変えたり、店の商品配置を変えるデータにもなりえる。そんなヒートマップを表示するためのライブラリがheatmap.jsだ。 heatmap.jsはWebブラウザ上で指定した範囲（画像など）の上にヒートマップを表示するライブラリだ。マウスの動きに合わせたり、クリックでヒートマップデータを作ることが出来る。クリック場所をトラッキングしておけば、元データを集積することができるだろう。 地図との組み合わせ 画像だけでなく、地図の上にレイ
Canvasでローレンツアトラクタ - by edvakf in hatena
pythonでローレンツアトラクタ（オイラー法） - yattの日記 この記事に刺激されて JavaScript でローレンツアトラクタを書いてみた。 ただ書くだけじゃつまらないので、Canvas を使ってちょっと趣向を凝らしてみた。 Lorentz Attractor with Canvas Sylvester という、2次元3次元のベクトル演算を扱う JavaScript のライブラリを使って、実際にプロットする部分は Sylvester をグラフに出力できるプラグインみたいなものを自作した。自作部分はパブリックドメイン。 Opera, Firefox, Chromium, Safari で動作確認した。id:uupaa さんの uupaa-excanvas.js をロードしてあるので、もしかしたら IE でも動くかも。(動いたら教えてください) あ、そうそう、WebGL が使えるよう
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Visual 6502 in JavaScript
Ajax/Graphviz