Atomic Design思考でVue.js×Plotly.jsでのグラフComponentを実装した結果 - ABEJA Tech Blog
第0章：はじめに こんにちは。はじめまして。 ABEJAでフロントエンドとバックエンドをフラフラしているエンジニアの齋藤(@z-me)*1です。 本ブログは ABEJA Advent Calendar 2019 の9日目です。 不本意ながらABEJAで開催するフロントエンドのミートアップやカジュアル面談でよく、 ABEJAってAIの会社ってイメージはあるけどUI/UXガッチリやってるイメージがない。 と言われる事が多いので、当ブログ編集長*2が言っている通り*3、ABEJAではプロダクトを開発＆提供しているということをお伝えしたいと思います。 今回はその中でも、あまり外部に広く知られていない、ABEJA Insight for Retailの提供しているDashboardで、どのようにUI/UXに力を入れて開発しているのかや、その開発手法(Atomic Design)やグラフCompone
Pixela | Pixelation API Service
Record and Track your habits or effort. All by API. Pixela is the API service. With this service, you can get a GitHub like graph that expresses the degree of your daily various activities on a basis with a vivid gradation. All operations are performed by API. And, it's free. Pixela Sponsors Pixela provides almost all the features for free, but some features are only available to those who pay for
Google Chart Tools の使い方 | プログラマーズ雑記帳
いろんなグラフがかける Google Chart Tools の使い方について書いてみました。 Google Chart Tools の使い方 (今回) 表とデータの扱い 棒グラフ (積み上げ棒グラフ) 散布図 折れ線グラフ、面積グラフ 円グラフ、計器図 組織図 グラフの合成 動的なグラフの変更 グラフと表の連携 フィルタリング(Dashboard と Control) データロールによる特異点の表示と注釈付きタイムライン スプレッドシート(表計算)で作成したグラフの公開 今回は Google Chart Tools の紹介と基本的な使い方の説明です。 Google Chart Tools とは グラフの種類 ライセンス 使い方 オプション Google Chart Tools とは Google Chart Tools は SVG を使ったグラフを表示するツールで、 JavaScript
StatHat
Beautiful charts StatHat makes detailed time series charts of your stats. Compare multiple stats from the past hour to the past 10 years. 30-day forecasts Know where your stats are headed. StatHat will analyze all your data and create forecasts for you with estimates for the next 30 days. Easy to integrate It's a piece of cake to integrate StatHat into your applications. It only takes one line of
Fluentdの出力結果をStatHatで可視化する - aptheia.info
Fluentdで取得した情報を可視化したいとき、fluent-plugin-growthforecastを使ってGrowthForecastにグラフを作る方法がよく知られている。GrowthForecastはインストール後すぐに使い始められるお手軽ツールなんだけど、それすら面倒くさい、自前で環境を作るのが面倒、というときにはStatHatを使うと簡単に可視化を実現できるという話。 StatHatはシンプルなインターフェースで必要十分な機能があり、しかも無料で使えるというサービス。HTTPでデータを登録するだけできれいなグラフが簡単に生成できるので、幅広い用途で利用できる。 以降、FluentdとStatHatを組み合わせて利用するための設定を説明する。 作業 StathatのSign upにアクセスしてメールアドレスを登録し、折り返し届くメール内のURLからパスワードを登録すればすぐ使い始
FnordMetricはGrowthForecastの夢をみるか | しんめいブログ
そんな話題ではないであろうFnordMetricをいじってみてわかったことをいろいろ FnordMetricって？ 公式ページによると “FnordMetric powers highly customizable real-time analytics dashboards（高度にカスタマイズ可能なリアルタイム分析ダッシュボード）’’ つまりありとあらゆるデータをリアルタイムにグラフ化できるツールって感じです このページに簡単なチュートリアルがのってます もっとわかりやすく ユーザーの最終ログイン時刻 ユーザーの男女比率 アイテムの売上、人気度 ページ別の閲覧数、人気度 ・・・ 上記の様なデータを このようなjson形式のデータで送信（HTTP,TCP/UDT等が使える）することで、平均や単位時間あたりの量等をリアルタイムに集計しグラフ化することができます。 クライアントライブラリもr
fluentd + mongodb+ node.js でリアルタイムにグラフを描く - stanaka's blog
追記 2/22 毎回微妙に追記していますが、今回も追記です。最後にmongodbのinsert性能について80lines/secで厳しくなった、と書いてますが、環境か設定まわりがあやしいので訂正します。もうすこし検証してみようと思います。 → 検証して fluentd側の設定の問題であることが分かりました。詳しくは、http://blog.stanaka.org/entry/2013/02/22/171053 追記ここまで 最近は、fluentd + mongodb でログを蓄積していろいろ便利に使っているわけですが、数分に一回集計スクリプトを周したり、 GrowthForecast の画面をリロードしまくるのではなく、もっとリアルタイムで見たい! という欲求が募ってきたので、 node.js を使って実装してみました。( https://github.com/stanaka/realti
HRForecast - もうひとつのデータビジュアライズツール - blog.nomadscafe.jp
ずいぶん前から作って動かしてはいるのですが、GrowthForecastの他にもうひとつのグラフ作成ツールを公開しています。 https://github.com/kazeburo/HRForecast デイリーで更新される数値のビジュアライズに使う事が出来ます。GrowthForecastにはない過去データの登録もできます。 モリスさんのスライドでも少し登場しています。弊社では主にHiveでの集計の書き出し先として使っています http://www.slideshare.net/tagomoris/log-analysis-with-hadoop-in-livedoor-2013 画面はこんな感じ 他のページにembedするHTMLの発行やCSVでダウンロードをサポートしています データの登録APIについて データの登録は、GrowthForecastと同じようにURIに対してPOSTリ
グラフ描くなら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 に設定してください。この記事執筆時点での
D3.js
D3The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibility
Google Chart で Imp と Click のグラフとかをうまいこと書く - tokuhirom's blog
たとえば広告システムがあるとして、Impression 数と Click 数をそれぞれ数字としてもってたとして、普通に Google Chart でグラフを書くと以下のようになります。click 数が imp 数にくらべて非常にちいさいので、このグラフは役にたちません。 が、Google Chart では targetAxisIndex というのがあるので、これをもちいて以下のように指定すれば OK でした。 options = { series: { 1: {targetAxisIndex: 1} } }; あたらしいグラフは以下のようになります。2012-10-16 が Imp のわりにすげー click 数のびててなにこれ!! っていうのがわかります。 以上のグラフは以下のようなコードで描画することができます。 <html> <head> <script type="text/jav
GrowthForecast - Lightning fast Graphing / Visualization
GrowthForecast is a web tool that let's you graph all sorts of metrics via a WebAPI. Our simple API let's you create and update charts in real time, customize your charts through a Web interface, and create charts that combine multiple metrics. You can graph your MySQL data with 1 line of code $ crontab -l */5 * * * * curl -F number=`mysql -BN -e 'select count(*) from member' game` http://example.
NVD3
This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizable, staying away from your standard cookie cutter solutions. View more examples » GitHub Repo Download d3.v3.js. This is the only required library for NVD3. Dow
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ - Shinichi Nishikawa's
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ 2011 10/11 グラフを描画してくれるjQueryプラグインを紹介します。 グラフを動的に作ってくれるものとしては、他のjQueryプラグインやGoogle Chartというサービスなどがあります。 が、今回の”jQuery Visualize”は、中でも一番使いやすそうでしたので、ご紹介します。 他のプラグインについては、【jQuery】IEでも使えるグラフ描画ツール | 岡山のWebプログラマーがつぶやくブログ | 神歌.blogでまとめて紹介されています。 作れるグラフの種類 グラフは以下のものを使うことができます。 棒グラフ 線グラフ 線グラフで線の下を薄く塗れるやつ 円グラフ デザインは二種類 冒頭写真の黒っぽいCoolなのと別に、白っぽいのも用意されています。 また、背景画
YappoLogs: GrowthForecast ノススメ
GrowthForecast ノススメ みなさん管理画面毎にグラフ作ってませんか？作るのめんどくさくて数値の表だけだして、直感的にサービスの動向掴みにくいとおもっていませんか？ Google スプレッドシートの機能でグラフだせるからいいよ？とかいってませんか？ Google スプレッドシートに吐かせる方法より簡単にグラフが作れたらいいとおもいませんか？ 遂に GrowthForecastというグラフ表示ツールで捗る話 - blog.nomadscafe.jp リリースされたので、早速僕が GrowthForecast をどんな感じで紹介しようと思いますが、なんか忙しいので便利ツールだけ紹介します。 https://github.com/yappo/grouthforecast-worker こういうツールを使っているので、グラフ追加したい時にいちいちある程度のボリュームのあるコードとか書か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://knsv.github.io/mermaid/
Chart.js
Developer's Guide - Google Chart API - Google Code
GitHub - jlord/sheetsee.js: :eyes: Visualize Data from a Google Spreadsheet
Interactive charting library | Highcharts
