Lucid | The Leading Visual Collaboration PlatformProduct suiteSee and build the future with a powerful visual collaboration suite.
Microsoftのデータ可視化ツール「SandDance」がオープンソース化
公式サイト 概要 SandDanceは、WebGLを用いたBIツールで巨大なデータセットを素早く可視化し、複数のビュー間を滑らかなアニメーションでトランジションさせることで新たな知見を得ることができるBIツールだそうです(公式サイトより) サンプル画像でもカッコいいアニメーションが目を引きます。 deck.glのショーケースページで紹介されていて、個人的に興味を持っていたのですが、先日Microsoftの公式ブログでオープンソース化されることが発表されました。 Microsoft open sources SandDance, a visual data exploration tool - Open Source Blog Github やたらパーティクルが飛び交ってカッコいいです。 慣れないと無意味な3Dチャートとか作ってしまいかねない危うさはありますが、内部ではDeck.glやVeg
GolangでFlame Graphを描く
アプリケーションのパフォーマンス問題の解決やチューニングで大切なのは問題のコアやボトルネックに最短パスで到達することである． 基本的なパフォーマンス分析の入り口はアプリケーションのスレッドがon-CPUで時間を消費しているかoff-CPUで時間を消費しているかを理解するところから始まる．on-CPUの場合はそれがuserモードかkernelモードかを特定し，さらにCPUプロファイリングによってどのcode pathがCPUを消費しているのかの分析に向かう．off-CPUの場合はI/OやLock，pagingといった問題の分析に向かう． Flame Graphはon-CPUでのパフォーマンスの問題が発覚した時に行うCPUプロファイリングを助ける．どのcode pathがボトルネックになっているのかを1つのグラフ上で理解できる．本記事ではFlame Graphとは何か? なぜ必要なのか? を解
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
Grafana: The open observability platform | Grafana Labs
Solutions All end-to-end solutions Opinionated solutions that help you get there easier and faster
データを分かりやすくスタイリッシュに可視化できるJavascriptライブラリ「D3.js」
どんなに情報をまとめても、それを可視化して見ている人にうまく伝えるのは至難の技です。そんな時にデータをスタイリッシュかつ見やすいグラフにしてくれるのが、様々なデザインのJavascriptがダウンロード可能なライブラリ「D3.js」です。 D3.js - Data-Driven Documents http://d3js.org/ D3.jsを使って作ったグラフの事例を公式ギャラリーから見ることが可能で、これらのグラフにもとになる素材(スクリプトのソース)がGitHubで入手可能です。 Gallery · mbostock/d3 Wiki · GitHub デザインの一例は以下から。 ◆:Bubble Chart 作成例によっては、ページに直接コードが記載されているものもあります。 ◆:Four Ways to Slice Obama’s 2013 Budget Proposal - In
グラフ描くならMorris.jsがお手軽で良いかも - (ﾟ∀ﾟ)o彡 sasata299's blog
2012年11月16日13:55 JavaScript Ruby グラフ描くならMorris.jsがお手軽で良いかも こんにちわ。寒くなってきましたがみなさまお元気ですか？ さて、先日ちょっとしたグラフを描画したかったんですよ。それでなにか使いやすいライブラリ無いかなーと思っていたら railscast (revisedなので有料です) で Morris.js ってjQueryプラグインが紹介されてて良さげだったので使ってみました。google analytics みたいなツールチップも出してくれます。 使い方はとっても簡単です。 まず、jQuery (>=1.7) と Raphael (>=2.0) が必要です。あとは Morris.js があれば動作します。 これらを app/assets/javascripts/application.js に設定してください。この記事執筆時点での
様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」:phpspot開発日誌
NVD3.js :: re-usable charts for d3.js 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 d3.jsという以前紹介したライブラリをベースに利用しているみたい。 グラフ描画のライブラリは色々ありますが、こちらのライブラリで描画するグラフのデザインもなかなかいい感じですね マウスとのインタラクティブなグラフ実装が可能で拡張も容易みたい サンプルページにはソースがついているので参考に組めば抵抗なくグラフが描けそうです 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」 クールなドアノブ風の％グラフを描画できるjQuery Knob
ローソクチャートや棒、折れ線グラフを作るHTML5グラフライブラリ·Rocketchart MOONGIFT
RocketchartはHTML5で作られたダイナミックなグラフライブラリです。 HTML5でできることがどんどん広がっています。今回紹介するRocketchartsもHTML5を駆使しています。そしてすごいグラフを作ってきました。 ローソクチャートです。HTML5で作られています。 折れ線グラフを追加しました。 さらに棒グラフと折れ線グラフのミックスです。 クリックするとその箇所の数値が分かります。 表示範囲をマウスで選択して絞り込むこともできます。 逆に広げた場合です。 RocketchartはJSONデータを使ってCanvasタグにグラフを描いています。そのため直接書き出すのはもちろん、AjaxなどでJSONデータを渡してレンダリングすることもできそうです。 RocketchartはJavaScript製、GPL v3のオープンソース・ソフトウェアになります。 MOONGIFTはこう
PassMark Software - CPU Benchmark Charts
1,000,000+ Systems Tested and 3,100 + CPU Models - Updated Daily! PassMark Software has delved into the millions of benchmark results that PerformanceTest users have posted to its web site and produced a comprehensive range of CPU charts to help compare the relative speeds of different processors from Intel, AMD, Apple, Qualcomm and others. Included in these lists are CPUs designed for servers and
ドリルダウンなグラフを作成できるjQueryプラグイン「DDChart」:phpspot開発日誌
jQuery Plugin Drill Down Charts Exmaples ドリルダウンなグラフを作成できるjQueryプラグイン「DDChart」。 グラフ自体は次のようなイメージで、アニメーション表示出来るグラフなのですが、一味違うところは、グラフをクリックすると、更にそのグラフを細分化して表示できるところ。 例えば、A~Dのチェーン店があったとして、Bのグラフをクリックすることで、今度はBの店舗別の売上を表示するといったことが可能です。 更に、Bの店舗で何が売れているか？というのをクリックでたどれるようなイメージです。 クリックするとアニメーションしながら、更にグラフを子要素にたどることが出来ます。 若干分かりづらいかもしれませんが、パンくずリストのようなものがグラフの下部に表示されています。 ありそうで、なかったグラフライブラリかもしれませんね。 グラフで一覧表示できるのはわ
オフラインで使えるデザイナー向けツールキット色々:phpspot開発日誌
Useful (Offline) Utensils and Toolkits for Designers | Tools オフラインで使えるデザイナー向けツールキットが色々まとまってましたのでご紹介。 ノートパソコンでどこでも作業できるからとはいえ、自由度と使い勝手からアナログが便利な場合も多いですね。 印刷するなどしてどこでも作業できるツールキット集です Paper Browser ブラウザの枠と、グリッドベースの画像を印刷してモックを手書き出来ます Grid Design Graph Paper グリッドと端にノートが表示されているテンプレート。印刷して使えます iPhone APP Wireframe template iPhoneアプリケーション作成時のモック作成用テンプレート iPad IDEA Sheet iPadのアプリ作成時などに使えます 便利なものが他にも色々と紹介されて
シンプルなCSSグラフを描画する軽快なPHP用グラフ描画ライブラリ「CSScharts」:phpspot開発日誌
CSScharts - CSS only bar chart demo page シンプルなCSSグラフを描画する軽快なPHP用グラフ描画ライブラリ「CSScharts」が公開されています。 様々な便利なグラフライブラリが存在する中で、高機能とは言えませんがとてもシンプルに使うことができます。 マウスオーバーで地味に色が変わります ちょっと癖のある書き方で馴染めないという方も多いかもしれませんが、次のように書くとグラフがかけるというシンプルな物になってます。 <?php $values = '12,3,23.3,44.3,9,20'; $height = 200; $width = 400; $bargap = 0; // undo :) include('csscharts.php'); ?> サーバに負荷をかけずに気軽にグラフを書きたいという場合の選択肢の１つとして知っておいてもよいの
色々と使えそうなグラフや図が描けるビジュアリゼーションライブラリ集:phpspot開発日誌
色々と使えそうなデータのビジュアリゼーションライブラリ集が２２個まとまったエントリのご紹介です。 FlashからPHPで描画するものや、APIを叩いて表示するものなど、既知の物も含まれていると思いますが、多数のグラフ作成用の仕組みが紹介されています。 Fly Charts マウス位置によって情報がポップアップされたり、タブでデータを区切ったり出来るFlash製のＵＩをしたユニークなグラフ描画ライブラリです。 単純に描画されるグラフ自体もデザイン性があっていい感じですね。 Fusion Charts こちらもFlash型のグラフ描画コンポーネントです。デモページを見ればその多機能さが分かります。 Axiis Flexで作られたデータビジュアリゼーション用フレームワーク。 Stlye Chart 色々な種類のユニークなデータビジュアリゼーションが実現できるライブラリ。 Jfree Chart
テーブルの内容をリアルタイムにグラフ描画できるjQueryプラグイン「graphTable」:phpspot開発日誌
テーブルの内容をリアルタイムにグラフ描画できるjQueryプラグイン「graphTable」。 このプラグインを使えば、テーブルのデータを読み込んで、リアルタイムにグラフ化してくれます。 $('#table1').graphTable({series: 'columns'}); みたいにすることで、指定したテーブルのデータを次のように描画させることが可能です。 既存の表がある場合は、ブラウザ上でグラフ化することが出来て便利ですね。 以下のエントリを参照してください。 graphTable: graph data from HTML table using flot | jQuery Wisdom 関連エントリ jQueryで実装する進捗グラフ付き複数ファイルアップローダー JavaScript用のグラフ描画ライブラリ色々 CSSだけで円グラフを表示するサンプル
興味深いインフォグラフィックが色々まとまった記事:phpspot開発日誌
興味深いインフォグラフィックが色々まとまった記事のご紹介です。 情報を色々なアプローチで上手い具合に表現していて、図を作る際の参考にすれば、あっと驚く資料が出来るかもしれません。 全て見るには以下のエントリを参照してください。 13 Interesting Infographics for Web Workers | Web Design Ledger
amCharts: customizable free flash charts
JavaScript Charts & Maps Programming library for all your data visualization needs. Readme.md Came here to find your next charting library? Good. Our charts were designed to feel modern, sleek and fast, out-of-the box. But don’t take our word for it – check out our demos and fall in love. And best of all, our libs natively integrate with TypeScript, Angular, React, Vue and plain JavaScript apps. F
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
yEd Graph Editor
http://www.designwalker.com/2010/07/chart-tool.html