Twitter等に投稿できるテキストベースのグラフを簡単に作れる・「Tweetable Charts」
Tweetable ChartsはTwitter等のSNSに投稿できるテキストベースのグラフを簡単に作れるWebアプリです。 作り方も非常に簡単、シンプルでラベルと数値を入力すれば良いだけ。グラフの種類もいくつか用意されています。 以下サンプルです。 Fully vaccinated citizens. (11 May) Ｓｅｙｃｈｅｌｌｅｓ: |▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░| 60% Ｉｓｒａｅｌ: |▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░| 56% Ｓａｎ．Ｍａｒｉｎｏ: |▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░| 37% — tweetable-charts (@ChartsTweetable) May 11, 2021 Countries with 3 largest GDP. (IMF Estimates in Million) ＵＳ
URL1つであらゆるチャート・グラフを生成＆カスタマイズ可能な「Image-Charts」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、URLだけで多種多様なチャートやグラフを生成できる無料のWebサービスをご紹介します！ 棒グラフ・折れ線グラフ・レーダーチャート・バブルチャート…など、さまざまな種類を生成できるだけでなく、細かいスタイリングやサイズ・レイアウトまでURLに追記するだけで調整可能なのが特徴です。 手っ取り早くデータの可視化をしたい人も含めて、ご興味ある方はぜひ参考にしてみてください！ 【 Image-Charts 】 ■「Image-Charts」の使い方 それでは、「Image-Charts」をどのように使えばいいのか詳しく見ていきましょう！ まず最初に「Image-Charts」を使うためのユーザー登録やAPIキーの設定などは一切不要です（フリープランの場合） 覚えておく必要があるのは次のURLのみです！ https://image-charts.c
データ可視化に貢献するチャートCSSフレームワーク・「Charts.css」
Charts.cssはデータ可視化のためのチャートCSSフレームワークです。HTMLによるデータビジュアライズの際にスタイリングをサポートするクラスを提供してくれます。 面や棒、折れ線、円やドーナツなどよく見かける一般的なチャートやこれらのマルチデータ、パーセンテージや積み上げ式、3Dなど様々なビジュアライズも対応されています。 少しクセがある印象ですが、慣れれば問題なさそうでした。HTML形式のデータに対応する場合にあると作業がかなり楽になりそうですね。 動作サンプル及び簡単に使い方のご紹介です。基本的にはtableが使われ、classを付与する事でビジュアライズされます。 <table class="charts-css"> ... </table>単なるtableをビジュアライズするにはCharts.cssを読み込んだうえで上記のようにcharts-cssというclassを付与します
テキストデータだけでガントチャートやダイアグラムを生成可能な「Quick Diagram」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、テキストデータを編集するだけでリッチな「ガントチャート」や複雑なダイアグラムを素早く作成できる無料のWebサービスをご紹介します。 複雑な操作方法は一切不要で、単なるテキストを入力していくだけで自分が欲しいチャートやダイアグラムを手軽に生成できるのが大きな特徴です。 ガントチャート以外にも、フローチャート・クラス図・ジャーニーマップ・円グラフ…など、多彩なフォーマットに対応しているのでぜひ参考にしてみてください！ 【 Quick Diagram 】 ■「Quick Diagram」の使い方 それでは、「Quick Diagram」をどのように使えばいいのか詳しく見ていきましょう。 まずはトップページにあるボタンをクリックして無料のユーザー登録を済ませておきます。 Googleアカウントから手軽に登録できますが、今回はメールアドレスを利用
Pythonでコンソールに綺麗なグラフを描画できる「AsciichartPy」使ってみた。 - Qiita
import asciichartpy from math import cos from math import pi import random # 追記 2020/09/14 ご指摘ありがとうございました if __name__ == '__main__': width = 120 config = { 'colors': [ asciichartpy.green, asciichartpy.magenta, asciichartpy.red ] } print(asciichartpy.plot( series=[[random.randint(1, 15) * cos(i * ((pi * 4) / width)) for i in range(width)], [random.randint(1, 15) * cos(i * ((pi * 2) / width)) for i
Introducing Danfo.js, a Pandas-like Library in JavaScript
A guest post by Rising Odegua, Independent Researcher; Stephen Oni, Data Science Nigeria Danfo.js is an open-source JavaScript library that provides high-performance, intuitive, and easy-to-use data structures for manipulating and processing structured data. Danfo.js is heavily inspired by the Python Pandas library and provides a similar interface/API. This means that users familiar with the Panda
ちょっと面白いスクリプト！グラフやチャートを手書き風のラフな感じにするJavaScriptライブラリ -roughViz
手書きスタイルのグラフやチャートを簡単に作成できるJavaScriptライブラリを紹介します。手書きの度合いも調整でき、ちょとラフな感じ、雑な感じ、かなり雑な感じ、ぐちゃぐちゃな感じにもできます。 グラフやチャートに使用するデータは外部.csvファイルにも、カンマ区切りのテキストデータにも対応しています。 roughViz.js -GitHub roughViz.jsの特徴 roughViz.jsのデモ roughViz.jsの使い方 roughViz.jsの特徴 roughViz.jsは、ブラウザで手書きスタイルのグラフやチャートを作成するためのJavaScriptライブラリです。D3.jsとrough.jsをベースにしており、MITライセンスで利用できます。 グラフやチャートは、現在7種類に対応しています。 棒グラフ（垂直） 棒グラフ（水平） ドーナツ 折れ線グラフ 円グラフ 散布図
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
デザインがいい感じのインタラクティブに動くグラフ描画ライブラリ「ApexCharts.js」:phpspot開発日誌
JavaScript Chart Examples & Samples Demo ? ApexCharts.js デザインがいい感じのインタラクティブに動くグラフ描画ライブラリ「ApexCharts.js」 基本的なものから凝ったものまで様々なグラフを描画できます 関連エントリ テーブルを様々なグラフに自動変換できるjQueryプラグイン「HighchartTable」 リアルタイムで更新してアニメーションするリアルタイムグラフを描画できる「Epoch」
[JS]さまざまなデータを最小限の記述でビジュアル化する高性能なJavaScriptライブラリ -Zeu.js
さまざまなデータを最小限の記述でビジュアル化し、アニメーションで表示する高性能なJavaScriptライブラリを紹介します。 メーターやファンやコントローラーなど、デザインがレトロなのも面白いですね。 Zeu.js -GitHub 上記は静止画ですが、もちろんアニメーションで動きます。 デモのカラーは派手ですが、オプションで簡単に変更できます。 My Command Center Zeu.jsはCanavasベースで、外部ファイルと空のcanvas要素を用意し、あとはタイプとデータを定義するだけで実装できます。 <!-- 外部ファイル --> <script src="zeu.min.js"></script> <!-- 空のcanvas要素 --> <canvas id="text-meter" width="200" height="100"></canvas> <script> //
![[JS]さまざまなデータを最小限の記述でビジュアル化する高性能なJavaScriptライブラリ -Zeu.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/31b37dfb88801f7bd583e6d221be6ed9f89769cc/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018091301.png)
chart.jsでぐりぐり動くグラフを作る - Qiita
こんな風にスライダーをぐりぐりと動かすとそれに応じて表示が変わるグラフをchart.jsを使って作っていく。 ここでは$f(x)=ax^2+bx+c$という関数をプロットすることにする。パラメータとして$a$,$b$,$c$の３つがあるが、それらをスライダーでぐりぐりと動かす。 デモはこちら chart.jsとは？ ここではグラフの描画にchart.jsを使う。 chart.jsとはグラフをブラウザ上で表示するためのJSのライブラリの一つ。 グラフを作るためのライブラリといえばd3.jsが有名だが、より簡単にグラフを書くことに特化したライブラリ。プロットを作るだけなら本当に簡単に書くことができる。 chart.js入門 の記事が参考になる。 またオフィシャルページのサンプル集を見れば、だいたいどんなグラフを作ることができるかわかる。 作成方法 まずはhtmlにスライダーを入れる。 <div
Python: matplotlib で動的にグラフを生成する - CUBE SUGAR CONTAINER
今回は matplotlib を使って動的にグラフを生成する方法について。 ここでいう動的というのは、データを逐次的に作って、それを随時グラフに反映していくという意味を指す。 例えば機械学習のモデルを学習させるときに、その過程 (損失の減り方とか) を眺める用途で便利だと思う。 使った環境は次の通り。 $ sw_vers ProductName: Mac OS X ProductVersion: 10.13.5 BuildVersion: 17F77 $ python -V Python 3.6.5 $ pip list --format=columns | egrep -i "(matplotlib|pillow)" matplotlib 2.2.2 Pillow 5.2.0 もくじ もくじ 下準備 静的にグラフを生成する 動的にグラフを生成する グラフを延々と描画し続ける Jupyte
誰でも超ハイクオリティなデータの可視化が実現できるWebサービス「Flourish」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単にクオリティの高いデータの可視化（データビジュアライゼーション）を実現することができる無料サービスのご紹介です！ アニメーションも自動生成されるうえ、ネット上に公開したり自分のブログやサイトに挿入することも簡単にできます。 また、上級者向けにJavaScriptを活用した独自テンプレートの作成機能が用意されているなど、自由度の高いサービスなのでご興味ある方はぜひトライしてみてください！ 【 Flourish 】 ■「Flourish」の使い方 それでは、実際に「Flourish」を触りながら、どのように始めたらいいのかを見ていきましょう！ まずは、サイトのトップページにある「Sign up」から無料のユーザー登録をしておきます。 メールアドレス、パスワード、ユーザー名を入力すればすぐに登録は完了します！ すると、自分専用の「マ
リアルタイムグラフなら「とりあえずEpoch.js」をおススメしたい - Qiita
この記事について IoTっぽいことをやりたくて表示画面の方から作ってみました。 リアルタイム表示が可能なJavascriptのグラフ表示ライブラリを色々物色した結果、Epoch.jsが一番使いやすいという結論になりました。サンプルコードを書きつつEpoch.jsの使い方等についてまとめてみました。 サンプルコード See the Pen GQpbRR by okoppe8 (@okoppe8) on CodePen. スライダーの部分はIoT機器のPostのシミュレータです。 Epoch.js とは 公式：https://epochjs.github.io/epoch/ Epoch.jsは様々なグラフを生成するJavascriptライブラリです。同様の目的のメジャーなライブラリにChart.js、highchart.js、Google Chart Tools などがあります。 Epoch.
探索的データ解析における正しい可視化手法の選び方と描き方 - Qiita
データ分析における関数の使い方については様々な記事が上がっています。関数を知らなかったり使い方が分からないときは調べればだいたい答えが見つかります。 一方で、実際に分析を始めようとすると、たとえ関数の使い方がわかっていても、データをどのような切り口から何を分析・可視化していけば良いのか困ってしまうことがよくあります。 この記事では、あんちべさんが書いたデータ解析の実務プロセス入門という本をベースに、どのようなデータから何を見たいときにどのような可視化手法を使えばよいのかを、具体例を交えながら整理していきます。 探索的データ解析とは データ解析のアプローチは、大きく分けて仮説をデータで検証する「仮説検証型」とデータから仮説を生み出す「探索型」に分けられます。 実際にデータ解析を行うときは、仮説検証型と探索型を行き来しつつ知見を見出していきます。 データ解析には検証すべき仮説を設定することが必
Chart.jsで円グラフのlegend(横とかにつくラベル)の横幅が調整できない問題 - Qiita
どうやら、改行はサポートしてくれないらしい。 ふざけんな！！！ 日本語できちんとラベルを付けると、グラフが。。。笑 かわいいっすね。 文字サイズを無理やり調整すればいいのでは？ var label_array = [ 'ラベル1', 'ラベル2'. 'ラベル3ラベル33ラベル33ラベル33ラベル33ラベル3' ]; var stringLength = 0; label_array.forEach(function(value){ stringLength = value.length > stringLength ? value.length : stringLength ; }); var labelWidth = 200; var fontSize = labelWidth / stringLength; fontSize = fontSize > 16 ? 16 : fontSiz
word2vecをD3.jsのforce-simulationで可視化する - Qiita
概要 学習済みのword2vecモデルから、指定の単語に対して、その類似単語、さらに類似単語の類似単語を出力させ、各単語をノード、cos類似度をリンクの重みとしてd3.jsで力学グラフ化します。 t-sneなどで次元圧縮プロットする手法とはまた違った味があるかな、と思います。厳密さはあまりないので、ビジュアライゼーションの手法としては、解析向きというより説明向きの手法ですね。視覚化と言ったほうがいいかもしれません。 DOM/HTMLなのでカスタマイズが効きやすい点はメリットで、インタラクティブな感じに機能追加していくとウケが良さそうです。 出力例 「AI」を指定単語として、その類似単語(緑)と、類似単語の類似単語(灰)までを出力しています。別途収集した、幾つかの新聞社のWeb記事(2MB程度)で学習させたモデルを使用しています。 ノード間の適正距離をcos類似度から計算しており、適正距離よ
billboard.js - インタラクティブ、プログラマブルなグラフライブラリ MOONGIFT
HTML5の表現力を活かすにはJavaScriptの活用が欠かせません。SVGやCanvasを使って図を描画することはできますが、JavaScriptを組み合わせることでよりインタラクティブにしたり、マウスイベントを使ったりできます。 今回紹介するのはbillboard.js、JavaScript製の再利用が容易なグラフライブラリです。 billboard.jsの使い方 グラフの一例です。 データをフィルタリングすると、他のデータが薄くなります。 折れ線グラフ。 タイムシリーズ。 曲線グラフ。 X軸の座標が異なるグラフ。 ステップグラフ。 エリアグラフ。 積み上げ型のエリアグラフ。 棒グラフ。 積み上げ型の棒グラフ。 散布図。 円グラフ。 ドーナッツグラフ。 ゲージグラフ。 複数のグラフの組み合わせ。 サブグラフ。 billboard.jsは表示に際してD3を使っています。そして、Java
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Facebook、リアルタイムにデータをグラフ化する「Visdom」、オープンソースとして公開
Ubuntu+Pyenv+Python3の環境でmatplotlibのグラフ表示ができなかった時の対処 - Qiita
