データのビジュアライゼーションといえばD3.jsがデファクトスタンダードだと思いますが、別にそんな複雑なビジュアルを出す必要もないよね、というときがあります。そんなときはdimpleというライブラリを使えば比較的楽にビジュアライゼーションが実現できそうです。 どんな感じなの？ こんな感じのグラフがプリセットで用意されています。こういった棒線グラフ以外にも、バブルチャートや折れ線グラフなど、数々のグラフが用意されています。詳しくはExamplesをご覧ください。 コードは至ってシンプルで、x軸、y軸にデータのキーをセットして、addSeriesでグラフの種類を設定するだけ。自分でD3.jsでグリグリやるより楽ですね。しかしSVGを利用して表示しているとはいえ、IE8以前のブラウザではSVGをサポートしていないので表示できません（参考）。というわけで、そのあたりのブラウザがターゲットの場合は注
Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。 また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取るのは困難です。 そこで、データの見せ方や伝え方が重要になってきます。 インフォグラフィックスやデータビジュアライゼーションといったキーワードにも注目が集まりつつありますね。 本記事ではD3.jsというJavaScriptのライブラリを利用し、このブログ(Teck-Sketch)のはてなブックマーク数や、世界の国別の人口の比較を視覚的に分かりやすく表現していきたいと思います。 インフォグラフィックス？データビジュアライゼーション？ キーワードとしてインフォグラフィックスとデータビ
D3.jsって？ AWSの事しかかけないと思われているかもしれないあけりです。 4月になって、気分一新クラスメソッドぽいことを少し。 今日はAWSとは関係の無いD3.jsです。 D3.jsとは名前から想像出来る通りjavascriptで使えるライブラリで、 データを色々な形に見やすく表示（よくあるグラフなんかもその一つ）するものです。 D3はData-Driven Documentsの略だと思われます。 データとDOMをうまいこと連携させて、表を作ったり、SVGのグラフを描画させたりすることができる、なんか格好良いライブラリです。 ライセンスはBSD Licenseと書いてありますが、リンクを辿ってみると宣伝条項のない修正BSD Licenseとなっているので、なんか色々楽そうです。 使い始め方 使い始め方は簡単で、ここからダウンロードしてくるか、 HTMLに直接 と記述するかになります。
結論:Highchart ccchart(canvasChart)と悩みましたが、Highchartを選んだ理由は、下記の通りです。 1.円グラフや棒グラフを組み合わせた複合的なグラフのサンプルを載せている 2.複合グラフのアニメーションがかっこいい 商用ライセンスなので、無料にこだわる方は、ccchart(canvasChart)がおすすめです。 Highchart 表現力、完成度の点でいちばんだと思います。商用なのでお金さえあればこれがイチオシ。 ccchart(canvasChart) 私のイチオシは canvasChart です ライセンスは PUBLIC DOMAIN! raphael.js qiitaのプロフィールの円グラフで使われているjQueryプラグイン 美しめなグラフを作成することができる。 raphael.jsのプラグインのelycharts.js http://el
JITはJavaScriptを使ったデータビジュアル化ライブラリです。 JavaScriptを使ってWeb上でデータを多彩にビジュアル化するライブラリがJavaScript InfoVis Toolkit（JIT）です。その多彩な表現をご覧ください。 積み上げのエリアグラフです。表示の際にはアニメーションが実行されます。 実際のコードです。 棒の積み上げグラフです。 横向き、2Dのグラフです。 関連グラフです。マウスで動かせます。 マウスオーバーで説明が表示されます。 こんなグラフもあります。 星形。格好いいです。 カスタマイズにも多様に対応しています。 容量の表示などによく利用されるツリーマップです。 こちらもパターンが色々用意されています。 グラフを組み合わせたパターンです。 こんな表現も可能です。 派生していくアニメーションが格好いいです。 円グラフです。アニメーションやマウス操作に
HighchartsはSVG/VMLを使って描画するJavaScript製のグラフライブラリです。 Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基本として多様なWebブラウザに対応したグラフライブラリになります。 折れ線グラフです。 Ajaxによるデータロード対応です。 グラデーションをかけることもできます。 滑らかな曲線です。 アイコンを貼付ける例です。 プロットのみで。半透明なドットを使っています。 エリアグラフです。 マイナスの値にも対応しています。 積み上げグラフです。 棒グラフです。 左右比較型の棒グラフです。 複数のデータを並べられます。 棒グラフもマイナス値を出せます。 こんな感じの棒グラフも。 さらにドリルダウン対応です。 HTMLのテーブルからデータを
[Web] HTML5でFlashを使わずにグラフを描いてみよう( canvas, jQuery + jqPlot ) 以前にグラフを使うところで、amCharts というものをご紹介したかと思います。 [Web] Flash で綺麗なグラフを表示できる amCharts がなんか使い勝手よさげ 実際に使うとこんな↓感じです。 [政治] 発足から１年間の内閣支持率の推移をグラフにしてみた で、私自身、Webでこういうグラフィカルなグラフを動的に作るとするなら こういう Flash を使った形で、データをXMLなりCSVテキストなりで渡してやる形で ウッドボール（きまり）だろうと思っていたのです。 が、ご存じのとおり iPhone/iPad が、Webにアクセスする端末として 無視できなくなってきた以上、Flash でいいじゃん！ こち亀でいいじゃん！ とばかりも言ってられなくなってきました
棒グラフ 機能：ツールチップ、コンテクストメニュー、ズーム スタイルのバリエーションも豊富で、デモページには多くのグラフが掲載されています。
97859900/ iStockphoto/ Thinkstock チャートやグラフを手軽に作りたい。 そんなときにおすすめなのが、『22 Useful Online Chart & Graph Generators』。チャート・グラフが作れるオンラインツール集です。 便利そうなのが揃っているのでご紹介しますね。 Rich Chart Live Flashでチャートが作れるツール Online Chart Generator 素晴らしいジェネレータ。かっこいい3Dのグラフを簡単に生成できる Chartle.net シンプルに使えるオンラインチャートジェネレータ JS Charts 棒グラフや円グラフなど、様々なタイプのチャートが作れるJavaScript Google Chart Tools Webサイト上でライブチャートが作れるGoogle Chart Tools Google Char
皆大好き自分も大好きな二十歳街道まっしぐらにはネタ帳という記事が定期的に挙がります。自分も普段記事にするネタをあれこれ自力で探している訳ですが、カメきちさんのネタ放出はかなり美味しい。という訳で有り難くご相伴に預り、 【ネタ帳】bitlyで短縮されたURLから動画だけを抜き取ったサイト「bitly.tv」 + 25記事*二十歳街道まっしぐらより拝借。 元々の絵は当然英語(YjWta.jpg (1024×767))なんだけど、ちょいと単語が分かりにくいので自分なりに妥当な用語をあてて日本語化してみました。 とってもひどい蛇足 まあ、普通にグラフ作ってるだけなら棒グラフ、線グラフと円グラフがあれば足りると思います。組成分析のためにウオーターフォール使うあたりになるとパレート分析やマトリクス分析に手が出始めて多分こういった図にまとめると言うのは厳しいかと(^^;; 後ですね、散布図が右にも左にも
個人でWebサービスを作っている人にとっては、Javascriptはとても助かるツールではないでしょうか。 サーバサイドで作りこむ必要のないちょっとしたプログラムや、Flashを使わずにアニメーション効果を出したりするのにとても便利です。 JavaScript charting tools: an overviewでは、Javascriptチャートのまとめをやっていました。 Plotr prototypeベースのチャートライブラリ jsxgraph このコミュニティが作った universe of interactive examplesにたくさんのサンプルあり。 Raphael ベクターライブラリ。こちらもサンプルがたくさんあり。 moochart MooToolsベースのチャート。 canvas pie これもMooToolsベースのチャート。 flot jQueryベースのチャート。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
