Interactive, free online graphing calculator from GeoGebra: graph functions, plot data, drag sliders, and much more!
Interactive, free online graphing calculator from GeoGebra: graph functions, plot data, drag sliders, and much more!
チャートやグラフは、さまざまなスマホアプリで見かけます。 スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。 Node.js、React Nativeなどに互換性もあり、50種類以上のチャートやグラフを簡単に利用できます。 スマホ向けのデザイン デザインはスマホに最適化されており、軽快なインタラクションでデータをより自然に表示します。 スマホに最適化されたパフォーマンス 軽量で、素晴らしいレンダリングのパフォーマンスを実現。 互換性 HTML5のCanvasベースで実装されており、Node.js、React Nativeで実行することもできます。 ライセンス MITライセンスで、個人でも商用でも無料で利用できます。 F2のデモ まずはスマホのアプリでよく見かける、美しいデザインと
チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。 ApexCharts ApexCharts -GitHub ApexChartsの特徴 ApexChartsのデモ ApexChartsの使い方 ApexChartsの特徴 ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。 MITライセンスで、個人でも商用でも無料で利用できます。 レスポ
Wolframの画期的なアルゴリズム,知識ベース,AIテクノロジーを使って, 専門家レベルの答を計算しましょう数学 ›ステップごとの解説高等学校 数学中学数学小学校算数初歩的な計算代数プロットとグラフィックス微積分と解析その他 »科学・テクノロジー ›Units & MeasuresPhysicsChemistryEngineeringComputational SciencesEarth SciencesMaterialsTransportationその他 »社会・文化 ›PeopleArts & MediaDates & TimesWords & LinguisticsMoney & FinanceFood & NutritionPolitical GeographyHistoryその他 »日常生活 ›Personal HealthPersonal FinanceSurprisesEn
Vue.js Tokyo v-meetup="#3" での発表資料です。
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか? ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの? ・結局一番言いたいことはなんなの? ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
#Koto koto.js is a d3.js charting framework written in ES6, the latest iteration of javascript. Introduction KotoJS is HEAVILY inspired by another reusable charting framework maintained by the Miso Project called d3.chart. I think that project is well designed and well documented. For those who are not familiar with d3.chart, the framework provides a logical way to ensure that all data-visualizati
Redash (re:dash) 流行ってますね。 redash.io 最近 Github をにわかに賑わせている OSS が superset です。 github.com superset とは 公式説明によると data exploration platform とのことですが、僕の感覚的にはこれはつまり、いわゆる Business Intelligence (以下 BI) Tool です。そう、Tableau のような。 OSS (Apache 2.0) サーバーサイドは Python で書かれている Flask や pandas、SQLAlchemy などを利用 さまざまなデータソースに対応 (MySQL, Redshift、SparkSQL など) グラフ描画の種類が豊富 Role や Permission についてある程度細かく設定可能 Airbnb Engineering
Re:dashとDocker for Macでらくらく分析・可視化環境構築 analyticsdockerpythonRedash ビザスク開発者ブログ第一弾記事を書かせてもらうことになりました、 @shinyorke(Shinichi Nakagawa)ともうします. 我々ビザスク(https://service.visasq.com)の開発チームでは、データに基づいた客観的な観点をベースに施策を実施しています. 現状はエンジニアがGoogle SpreadsheetsやGoogle Apps Script(社内では「ガス(GAS)」と呼ばれています)、Slackを駆使して数値の可視化や共有をしていますが、 ひとつの画面、いわゆる「ダッシュボード」で分析・可視化を行ってチーム全員で共有しよう! 将来的にはビジネス側のメンバーにも数値出しや可視化をしてもらおう! という機運が高まり、分析・
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
どうも、まさとらん(@0310lan)です。 今回は、JavaScriptを使って「グラフやチャートを描きたい!」とか、「さまざまなデータを可視化させたい!」という人にオススメのJSライブラリをご紹介しようと思います。 また、すぐに使い始められるように、ミニマムな構成の「サンプルコード」も合わせて掲載しているので、自分に合ったライブラリを使う取っ掛かりになれば幸いです。 ■Chart.js 【Chart.js】 最近、活発にバージョンアップをしている「Chart.js」は、すべてのグラフが自動的にアニメーション表示されるユニークな仕掛けを持っており、シンプルで理解しやすい記述が出来る点も魅力です。 グラフの種類は少ないものの、モダンブラウザ&レスポンシブ対応で、あまりカスタマイズせずに「デフォルト」のままでも手軽に使えるでしょう。 【 基本の書き方 】 「chart.js」ファイルは、公式
情報を可視化すると人に伝わりやすく、また強く印象に残すことも可能です。そのためプレゼンテーションにおけるチャートやグラフは非常に重要になってきますが、一歩間違えば情報を分かりにくく、最悪の場合、間違った理解を見ている人に与えてしまいます。そこで、HubSpotがチャートやグラフのデザインなどプレゼン資料を飛躍的に見やすくするポイント10個を公開しています。 Why Most People's Charts & Graphs Look Like Crap http://blog.hubspot.com/marketing/data-visualization-mistakes Why Most People's Charts and Graphs Look Like Crap http://visage.co/peoples-charts-graphs-look-like-crap/ ◆01
ちょっとしたデータをサクッと「グラフ」や「チャート」にして、Webページに素早く公開したい人に最適なJavaScriptライブラリ「CanvasJS」のご紹介です! 類似のライブラリはいくつかありますが、「CanvasJS」はわずか数行のコードですぐにグラフが作成でき、なおかつ豊富なパラメータをいじることで驚くほど細かいカスタマイズも実現できるのが特徴的です。 今回は、基本的な使い方を中心にご紹介しようと思います! 必要なファイルを準備しよう! 「CanvasJS」の本体ファイルは、サイトのトップページからダウンロードできますが、CDN経由からも利用できるようになっています。 https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js これを、HTMLファイルに読み込みます! // index.html <!d
※4/6 その後調べた情報などを記事末尾に追記 前提となるニーズ サーバの負荷情報とか、アクセス状況のような KPI を取得・保存し、可視化(参照してグラフ化)したい。 リアルタイム性が要求される。5分以上前のデータしか見れませんみたいなのはお呼びでない。 古いデータはそんなに精度は気にしないけど、ロングスパンで俯瞰して見れたら便利。 最近はビッグデータ環境の時系列データ解析もビジネスではけっこうニーズがありそうだけど、そっちはもう少し要求が多そう。 ここでは考えないことにする。 選択肢になりそうなもの 古きよき RRDtool Elasticsearch + Kibana Graphite + Grafana InfluxDB + Grafana 等 Zabbix 他に、現実的には SaaS に任せるという手段もあるだろうけど、そう言うと話が終わってしまいそうなので、ここでは考えないこと
mermaid.jsとは JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。 http://knsv.github.io/mermaid/ サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。 僕の使い方 JSのライブラリを自分でインポートして何かすることはほとんど無くて(後述の理由からガントだけJSで使ってるけど)、基本的には以下の2つの方法で使ってる。 Haroopad フリーでクロスプラットフォーム(OS X, Win, Linux)なMarkdownエディタ。 v0.13からmermaid.jsがインテグされているので、何もしなくてもそのまま使える。 mermaid.jsのグラフの書き方は、コード表記で、言語をmermaidにしてあげるだけ。
Step1.タイトルを入力 グラフのタイトルを入力します。管理しやすいようにタグの入力も可能です。作成したグラフは、タイトル、タグからグラフを検索することができます。 Step2.データを入力 グラフデータを入力します。グラフデータはCSV、TSV形式に対応しています。CSV、TSVファイルをアップロードもしくは、エクセルなどのスプレッドシートからデータをコピー&ペーストでグラフデータを入力できます。 Step3.グラフのテーマと種類を選択 グラフのテーマと種類を選択します。グラフのテーマは、「white」「grid」「dark-blue」「dark-green」「dark-unica」の5テーマ、グラフの種類は、「棒グラフ」4種類、「線グラフ」2種類、「面グラフ」4種類、「円グラフ」3種類、グラフの色は4パターンから選べます。
Flexible javascript charting library for data exploration.Designed with passion and taste :)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く