FiNC Developers Blog
こんにちは、FiNCでiOSエンジニアをやっているyoshimikeisuiです。 今回は、iOS(Swift)で描くグラフについて紹介したいと思います。 僕らが今つくっているものひとことで言うと、ヘルスケアアプリをつくっています。 ユーザーの体重や睡眠、歩数などのパーソナルログを貯める貯まったログをグラフとして可視化するパーソナルログから適切な生活習慣をアドバイスする（Wellness AI）ログからオススメのヘルスケアコンテンツを配信するチャットから栄養士からのアドバイスをもらうといった形で、様々な側面からユーザーの健康をサポートしています。 ここで、グラフでパーソナルログを可視化する部分について、iOSではどういった方向性で実装を行ったのかをご紹介します。 はじめにみたものまずは有名どころのライブラリを見て回りました。 CorePlotiOS-ChartsPNChart-Swiftで
Canvasを使って描くグラフライブラリ·Aristochart MOONGIFT
AristochartはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Webブラウザ上で表示されるグラフというと最近ではJavaScriptを使って描画されるものが多くなっています。多くはSVGなどを使っているようですが今回はCanvasを使って奇麗なグラフを描くAristochartを紹介します。 トップページ。これら全てのグラフがAristochartによって描かれています。 指定方法。データを渡すだけで描画されます。 グラフのタイトルをつけるパターン。しかし見た限りではタイトルは表示されていないようです。 こういった細かいグラフはCanvasで描くと奇麗です。 負の値を扱うこともできます。 無数のデータが交差しているグラフ。 テーマ機能もあります。こちらはオレンジ。 こちらはドット。描き方は柔軟に変更できます。 Canvasで描かれるため、マウス
pixivにアクセス解析機能が付きましたよ（前編） - pixiv engineering blog
こんにちは。UI大好きフロントエンド担当の@ykskです。主な仕事はコメントを書くことです。。 さて、先日pixivにプレミアム会員限定のアクセス解析機能が付きました。 プレミアム会員の方はこちらからご自分のレポートを見ることがきます。会員でない方はこちらに登録ページが、また、こちらにサンプルページがあります。主な機能は現在のところ以下の通りです。 イラストの全作品とそれぞれの作品についての閲覧数、総合点/評価回数、コメント数、ブックマーク数と被フォローユーザー数を直近1週間のグラフで見ることができる 作品のリファラー（pixiv内外のどこから訪問されたか）を見ることができる 最近反応のあった作品のリストを見ることができる 今回僕はUIの設計とJS、HTML、CSSの実装を担当したのですが、その際メイン機能のグラフを描く部分ではD3というデータのビジュアライズに特化したライブラリを使ってみ
一行の記述で使えるJavaScriptグラフライブラリ·Chartkick MOONGIFT
ChartkickはRailsやそれ以外のシステムで手軽に使えるグラフライブラリです。 Web上にグラフを描こうと思うと途端に面倒な気がしてしまいます。そこで使ってみて欲しいのがChartkickです。Railsとの親和性の高いグラフ描画ライブラリです。 線グラフ。 円グラフ。 棒グラフ。 複数シリーズ（円グラフは対応していません）。 ChartkickはGoogleチャートまたはHighchartsを使ってグラフを描きます。Railsでは1行で出力できていますが、実際にはJSONデータを出力しているだけなのでRailsでなくとも使えます。さらに直接JSON出力ではなく、scriptタグを使ってグラフデータの読み込みを別処理化することもできます。 ChartkickはRuby/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る グ
どんなデータもリアルタイムなグラフにできるフレームワーク「FnordMetric」:phpspot開発日誌
FnordMetric | Framework for building beautiful real-time dashboards どんなデータもリアルタイムなグラフにできるフレームワーク「FnordMetric」。 どんなデータも次のような美しいUIを持つリアルタイムなグラフにできます。 サイトの会員数、ユニークアクセス数、データ投稿件数等、リアルタイムにデータを見たいような場合に使えそう。 muninなどでもグラフ化できますが、ここまでのUIの美しさとリアルタイム性は備えていないので、リアルタイムに欲しい情報はこれでダッシュボードにして監視すると便利でかっこ良さげ。 Ruby+Redisで書かれていますが、データの表示にはHTML5/JavaScriptのAPIが使えるようです 関連エントリ 世界地図でデータをビジュアライズする際に使えるJSライブラリ「DataMaps」 リアルタ
Yahoo Pipesのような表現やマインドマップにも·jsPlumb MOONGIFT
jsPlumbはWeb上でオブジェクト同士のつながりを表現できるJavaScriptライブラリです。 情報は有機的に結びついています。マインドマップやネットワーク図などを描く際には必ずオブジェクト同士が何らかの連結しあっているでしょう。そんな図をWeb上で描くのに使えるライブラリとしてjsPlumbを紹介します。 Yahoo! Pipesに似た連結です。 アニメーションもできます。 マウスでドラッグして接続もできます。 複雑に結びつけました。 一つのオブジェクトから複数のオブジェクトに派生するデモ。 jsPlumbはレンダリング先としてSVG、Canvas、VMLが選択できます。また、ライブラリとしてjQuery/MooTools/YUI3が切り替えられます。オブジェクトはマウスで自由に場所を変更でき、コネクトしているラインは自動で再描画されます。 jsPlumbはJavaScript製、
Yet Another Ruby Graphviz Interfaceを作ったからみんなで大量のグラフを作って遊ぼうよ！
(追記：2014-3-3) Gvizについてのまとめ頁を作りました。 Gvizの目次 - Rubyの世界からGraphvizの世界にこんにちは！ このブログとかでたまに無向だとか有向だとかのチャートの方じゃないグラフが書きたいと思うことがあるよ。でまさかこのご時世で今更VISIOとかあり得ないからGraphvizのdotファイルを書くことになるんだけどDOT言語は制御構造を持ってないから結局より高級な言語によるインタフェースが必要になるよ。でRubyの出番ってことになるんだけどGithubで”graphviz ruby“で検索すると1200件以上ものリポジトリがヒットするんだよ。でこの中から適当なものを選んで使えばいいってことなんだろうけどさすがにこれだけあるとどれを選んでいいか全然わからないから結局The Ruby Toolbox当たりで”graphviz“にヒットする20件くらいの中か
様々なグラフを描画できる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
Javascriptで扱えるカッコイイグラフのまとめ - Qiita
結論:Highchart ccchart(canvasChart)と悩みましたが、Highchartを選んだ理由は、下記の通りです。 1.円グラフや棒グラフを組み合わせた複合的なグラフのサンプルを載せている 2.複合グラフのアニメーションがかっこいい 商用ライセンスなので、無料にこだわる方は、ccchart(canvasChart)がおすすめです。 Highchart 表現力、完成度の点でいちばんだと思います。商用なのでお金さえあればこれがイチオシ。 ccchart(canvasChart) 私のイチオシは canvasChart です ライセンスは PUBLIC DOMAIN! raphael.js qiitaのプロフィールの円グラフで使われているjQueryプラグイン 美しめなグラフを作成することができる。 raphael.jsのプラグインのelycharts.js http://el
SVGを使ったものすごいグラフライブラリ·dygraphs JavaScript Visualization Library MOONGIFT
dygraphs JavaScript Visualization LibraryはJavaScript製のオープンソース・ソフトウェア。グラフライブラリは多数あれど、大抵は円グラフや棒グラフなどのシンプルなグラフを描く機能しかない。高度なグラフを描こうとすると利用できるライブラリは途端に少なくなる。 高機能なグラフライブラリ また高度なグラフはクライアントサイドだけでなく、サーバサイドの仕組みが必要になることも多い。そんな中dygraphs JavaScript Visualization Libraryはとても簡単に使えるグラフライブラリになっている。JavaScriptでSVGを描いてグラフ化するのだ。 主なグラフはX-Y軸を持った折れ線グラフになるようだ。とはいえ測定範囲を含んだグラフを描いたり、グラフの一部をマウスを使って拡大する、マウスオーバーすると値が表示されるなど高度な機能
リアルタイムなデータビジュアライズ「graphene」:phpspot開発日誌
graphene D3.jsというJavaScript製ビジュアライズライブラリと、JavaScriptのMVCライブラリであるBackbone.jsをベースとして作られていてgithubでソースが公開されています。 Chromeなどのブラウザで見てみるとリアルタイムにグラフが流れているのが分かります。 デモを見るだけでも楽しいんですが、サイトの管理ツール等色々と応用が効きそうだなというところですね 今後もこうしてWEBサイトはどんどんリアルタイムに動いていく物になっていくんでしょうね 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 tableデータをグラフに置き換えてくれるjQueryプラグイン「Chartify」
dstat2graphs - dstatのログをグラフ化するツール - SH2の日記
dstatが便利ですね。 dstat が便利 | Carpe Diem dstatの万能感がハンパない - (ひ)メモ 私は特に--outputオプションでCSV形式のログファイルを出力できるところが気に入っています。本番環境ではきちんとした監視ツールを使うと思いますが、開発・検証環境で手早くOSリソース情報を可視化できるので重宝しています。 それでもExcelやCalcでグラフを描くというのは何度も繰り返すと面倒なもので、 探したのですが見つからなかったので、連休を利用して作ってみました。 dstat2graphs - dbstudy.info サンプル1 (前回の負荷テストにおけるクライアントのグラフ) サンプル2 (サーバ) サンプル3 (KVMホスト) いくつか注意点があります。 dstat -tvfn --output log.csv 1しか受け付けないという割り切った作りです。
Mixpanel Flow | Mobile and Web Analytics
Mixpanel is the most advanced analytics platform in the world for mobile & web.A simple and free way to figure out where your users go and when they leave, all in real-time. Flow is a traffic visualization like none you've ever seen. It's beautiful, it's fast, and it's incredibly intuitive. Instead of a line graph or a table, you get a diagram of the actual paths people take as they browse your si
humble software development - envision
Envision.js is a library for creating fast, dynamic and interactive HTML5 visualizations. TimeSeries template with real-time data. This demo features animation of the selection when new data arrives. The data itself is from a function but could be a callback to a remote data source. (click to code) HTML5 time series chart. This uses the TimeSeries template. Templates provide pre-built interactive
ネットワーク図の書き方 - Akio's Log
先月から出稼ぎで東京に来てます。毎年、プロジェクトの特性上、３〜４月に空きが出てしまうので、仕方のないことなんですが。 で、最近ネットワーク図を書く仕事をしているのですが、ちゃんとしたネットワーク図を仕事で書くのは初めてのことでしたので、「コツ」をつかむまでだいぶ時間がかかってしまいました。 その過程で、いろいろと参考にしたサイトをまとめてみます。 書籍 ネットワーク現場の教科書 改訂版 （マイコミムック） (MYCOMムック) 作者: IDG出版社/メーカー: 毎日コミュニケーションズ発売日: 2011/03/31メディア: ムック購入: 1人 クリック: 9回この商品を含むブログ (2件) を見るこれはネットワークの教科書 改訂版 （マイコミムック） (MYCOMムック)の実践編的な内容ですが、本当に役に立ちました。ネットワーク図を書く際には、物理構成図と論理構成図をきちんと分けて書か
Morris.js
Morris.js Making good-looking graphs shouldn't be hard. Morris.js is a lightweight library that uses jQuery and Raphaël to make drawing time-series graphs easy. Morris.js started life as the code that powered the graphs on howmanyleft.co.uk. Now it's been open-sourced for the whole world to extend and enjoy. Follow me at @olly_smith on Twitter for news and updates. If you'd like to contribute, hea
Gitリポジトリに蓄積された歴史を可視化、グラフ化する·GitStats MOONGIFT
GitStatsはGitリポジトリを解析して静的なHTMLファイルとグラフを出力するソフトウェアです。 Gitにaddしてcommit、addしてcommit…そんな日々の努力の結果をビジュアル化してくれるソフトウェアがGitStatsです。社内プロジェクトで使ってみても面白そうです。 supybotのGitリポジトリから作られたHTMLです。 アクティビティです。コミット数などをグラフ化しています。 時間数が出たりするのも面白いです。 コミット数を見ればプロジェクトの栄枯盛衰が分かります。 タイムゾーンごとのコミット数もユニークです。 開発者の一覧です。 ファイル数のカウントです。 拡張子ごとというのも面白いです。 コードの行数です。 タグ一覧です。 GitStatsはアクティビティ、ファイル数、コード数、タグ、開発者と言ったデータをリポジトリから抽出してグラフ化します。静的なHTMLで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - etsy/skyline: It'll detect your anomalies! Part of the Kale stack.
Sigma.js
humble software development - flotr