JavaScript - 数学 - データをグラフで可視化する(2次関数を視覚的に探索する)
JavaScript - 数学 - データをグラフで可視化する(2次関数を視覚的に探索する)
概要 d3.jsを使ってバーンダウンチャートを作ってみました。短いコードでデータをビジュアル化できるd3.jsは素晴らしいですね!! いろいろ試した結果、出来上がったJavaScript部分のコードをこちらに掲載します。 機能概要 サーバサイドからJSONデータを受け取りd3.jsを使ってSVG領域にバーンダウンチャートを描画します。予定線をグレー、実績線をオレンジ、工数合計線をグリーンとして折れ線グラフを作ります。各データのポイント部はマウスオーバー時に数値を表示します。 動作イメージ フィルタ条件に対応したJSONをAjaxで出力し、d3.jsによりSVG領域を再描画します。d3.jsの処理が高速なので、ストレス無く快適に操作できます。 JSONデータの例 データベースにはチケット毎に以下の項目を時系列に格納しています。各項目を日付毎にサマライズしたJSONを生成しd3.jsに渡します
IoT(Internet of Things:モノのインターネット)のセンサーで取得したデータをクラウド上のデータベースに蓄積し、分析・活用するアプリケーションを手軽に始めてみる連載の第3回です。今回は、IBMのPaaS「Bluemix」が提供するIoTデバイス接続サービス「IBM Watson IoT Platform」を経由して受信した温度・湿度データを、DBaaS(Database as a Service)の「IBM Cloudant」へ蓄積し、グラフとして可視化するとともに、「IBM Predictive Analytics」サービスで生成した機械学習モデルを用いて故障予測を行うアプリケーションを作成します。 サンプルアプリケーションの概要 今回作成するアプリケーションは、以下の3つのアプリケーション(サブ機能)で構成されます。 ① 「IoTデバイスのデータを受信してデータベース
ArcGIS API for JavaScript を用いてデータ ビジュアライゼーションの手法とそれを実現する機能についてご紹介していく「JavaScript で始めるデータ ビジュアライゼーション」シリーズの第6弾です。 これまで紹介したサンプル コードとデモを確認したい方は GitHub リポジトリをご覧ください。 第1弾から様々な表現手法をお伝えしてきましたが、今回は少し趣向を変えて、データ ビジュアライゼーションを強みとするオープンソース JavaScript ライブラリである D3.js との連携例をご紹介します。 D3.js とは? データ ドリブン ドキュメント(Data Driven Document)を略して「D3」と呼ばれている通り、データを操作し、可視化することに優れたライブラリです。Web サイトや Web アプリで採用される 2D ベクター グラフィックの標準形
D3の絡みでハッカソン等によばれたとき、リソースについての質問が結構あったのでまとめてみました。 ハッカソン前に目を通しておくと時間の短縮になるかも。 公式 とりあえず公式サイト D3.js – Data-Driven Documents APIリファレンス サンプル Gallery(公式) d3のメソッド名などからサンプルを検索できる。 bl.ocksplorer.org – Learn d3.js by Example ドキュメント D3 入門 | スコット・マレイ 逆引きで調べたいときはこちら D3.js例文辞典 その他、もろもろ。 データビジュアライゼーション(D3.js)を学ぶための教材まとめ SVG svg要素の基本的な使い方まとめ プラグインその他 欲しいものがみつかるかも。 D3.js プラグインまとめ 場合によっては、D3を直接弄るより圧倒的に早くチャートを表示できる。
Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取ることは困難です。そこで、データの見せ方や伝え方が重要になってきます。 D3.jsとは D3.jsは、Mike Bostock(mbostock)が作成したデータ可視化用途で人気のJavaScriptライブラリで、データをDOMと結びつけ、データ駆動によりグラフを作成することができます。ソースコードはGithubで公開されており、人気を表すStarの数がGithubに公開されているリポジトリ全体で6番目に多いことからも、注目の高さが伺えます(2013/10現在)。ライセンスは修正BSD
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く