D3.jsを使うほどでもないビジュアライゼーションには「dimple」が便利 | mah365
データのビジュアライゼーションといえばD3.jsがデファクトスタンダードだと思いますが、別にそんな複雑なビジュアルを出す必要もないよね、というときがあります。そんなときはdimpleというライブラリを使えば比較的楽にビジュアライゼーションが実現できそうです。 どんな感じなの？ こんな感じのグラフがプリセットで用意されています。こういった棒線グラフ以外にも、バブルチャートや折れ線グラフなど、数々のグラフが用意されています。詳しくはExamplesをご覧ください。 コードは至ってシンプルで、x軸、y軸にデータのキーをセットして、addSeriesでグラフの種類を設定するだけ。自分でD3.jsでグリグリやるより楽ですね。しかしSVGを利用して表示しているとはいえ、IE8以前のブラウザではSVGをサポートしていないので表示できません（参考）。というわけで、そのあたりのブラウザがターゲットの場合は注
D3.jsをつかってData-Drivenにリッチなグラフやチャートを作成しよう - Tech-Sketch
Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。 また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取るのは困難です。 そこで、データの見せ方や伝え方が重要になってきます。 インフォグラフィックスやデータビジュアライゼーションといったキーワードにも注目が集まりつつありますね。 本記事ではD3.jsというJavaScriptのライブラリを利用し、このブログ(Teck-Sketch)のはてなブックマーク数や、世界の国別の人口の比較を視覚的に分かりやすく表現していきたいと思います。 インフォグラフィックス？データビジュアライゼーション？ キーワードとしてインフォグラフィックスとデータビ
D3.jsで始めるData-Drivenなページ作成 ｜ Developers.IO
D3.jsって？ AWSの事しかかけないと思われているかもしれないあけりです。 4月になって、気分一新クラスメソッドぽいことを少し。 今日はAWSとは関係の無いD3.jsです。 D3.jsとは名前から想像出来る通りjavascriptで使えるライブラリで、 データを色々な形に見やすく表示（よくあるグラフなんかもその一つ）するものです。 D3はData-Driven Documentsの略だと思われます。 データとDOMをうまいこと連携させて、表を作ったり、SVGのグラフを描画させたりすることができる、なんか格好良いライブラリです。 ライセンスはBSD Licenseと書いてありますが、リンクを辿ってみると宣伝条項のない修正BSD Licenseとなっているので、なんか色々楽そうです。 使い始め方 使い始め方は簡単で、ここからダウンロードしてくるか、 HTMLに直接 <script src=
Javascriptで扱えるカッコイイグラフのまとめ - Qiita
結論:Highchart ccchart(canvasChart)と悩みましたが、Highchartを選んだ理由は、下記の通りです。 1.円グラフや棒グラフを組み合わせた複合的なグラフのサンプルを載せている 2.複合グラフのアニメーションがかっこいい 商用ライセンスなので、無料にこだわる方は、ccchart(canvasChart)がおすすめです。 Highchart 表現力、完成度の点でいちばんだと思います。商用なのでお金さえあればこれがイチオシ。 ccchart(canvasChart) 私のイチオシは canvasChart です ライセンスは PUBLIC DOMAIN! raphael.js qiitaのプロフィールの円グラフで使われているjQueryプラグイン 美しめなグラフを作成することができる。 raphael.jsのプラグインのelycharts.js http://el
多彩な表現をご覧あれ。JavaScriptによるデータビジュアル化ライブラリ·JavaScript InfoVis Toolkit（JIT） MOONGIFT
JITはJavaScriptを使ったデータビジュアル化ライブラリです。 JavaScriptを使ってWeb上でデータを多彩にビジュアル化するライブラリがJavaScript InfoVis Toolkit（JIT）です。その多彩な表現をご覧ください。 積み上げのエリアグラフです。表示の際にはアニメーションが実行されます。 実際のコードです。 棒の積み上げグラフです。 横向き、2Dのグラフです。 関連グラフです。マウスで動かせます。 マウスオーバーで説明が表示されます。 こんなグラフもあります。 星形。格好いいです。 カスタマイズにも多様に対応しています。 容量の表示などによく利用されるツリーマップです。 こちらもパターンが色々用意されています。 グラフを組み合わせたパターンです。 こんな表現も可能です。 派生していくアニメーションが格好いいです。 円グラフです。アニメーションやマウス操作に
IE6から使えるSVG/VMLを使った高機能JavaScriptグラフライブラリ·Highcharts MOONGIFT
HighchartsはSVG/VMLを使って描画するJavaScript製のグラフライブラリです。 Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基本として多様なWebブラウザに対応したグラフライブラリになります。 折れ線グラフです。 Ajaxによるデータロード対応です。 グラデーションをかけることもできます。 滑らかな曲線です。 アイコンを貼付ける例です。 プロットのみで。半透明なドットを使っています。 エリアグラフです。 マイナスの値にも対応しています。 積み上げグラフです。 棒グラフです。 左右比較型の棒グラフです。 複数のデータを並べられます。 棒グラフもマイナス値を出せます。 こんな感じの棒グラフも。 さらにドリルダウン対応です。 HTMLのテーブルからデータを
Canvasを使用してインタラクティブで高機能なグラフを描くライブラリ -RGraph
棒グラフ 機能：ツールチップ、コンテクストメニュー、ズーム スタイルのバリエーションも豊富で、デモページには多くのグラフが掲載されています。
チャート・グラフが作れるオンラインツール22 – creamu
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
クールすぎて本当に動的に作ったの？というグラフが描画できてしまう「visifire」:phpspot開発日誌
クールすぎて本当に動的に作ったの？というグラフが描画できてしまう「visifire」 2009年03月18日- Visifire クールすぎて本当に動的に作ったの？というグラフが描画できてしまう「visifire」。 以下にある画像のような、ちょっと他ではなかなか無いグラフを提供してくれます。フリーで使えます。 画像編集ソフトを使えば綺麗なグラフはかけるかもしれないのですが、相当大変です。 が、このライブラリを使ってxmlでデータを書いておけばグラフ描画できます。 データ作成ツールもあるので、xmlも面倒っていう場合にも使えます→ Chart Designer もっとギャラリーを見る ネックはSilverLightなのですが、一旦描画したものをキャプチャして画像に変換してから使ってもよいぐらいクオリティが高いですね。 今後、SilverLightが一般的になっていくことも考えられ、覚えてお
[JS]カラフルな折れ線・棒グラフやパイチャートを描くスクリプト -JS charts
画像を使用しないで、折れ線グラフや棒グラフ、パイチャートを作成するスクリプト「JS charts」を紹介します。 JS charts demo JS chartsはjQueryなど他のスクリプトに依存せずに動作し、対応ブラウザは下記のようになっています。 Windows IE 6/7 Fx1.5+ Op 9+ Safari 3.1+ Mac Fx 1.5+ Safari 2+ iPhone 1+ 折れ線グラフや棒グラフ、パイチャートを描くには、スクリプトを外部ファイルとして記述し、書式に合わせて記述します。 JS Charts | How to use グラフはCanvasで描かれており、数値はXMLによって管理します。 XMLのサンプル <textarea name="code" class="html" cols="60" rows="5"> <?xml version="1.0"?>
フリーのグラフスクリプト１０個:phpspot開発日誌
10 Free Chart Scripts | WebTecker the latest Web Tech, Resources and News. This week I’ve been working on a project that required data to be shown visually. フリーのグラフスクリプト１０個が特集されてました。 JavaScriptやFlash製のグラフを使う際の選択肢として使えます。 Flot Open Flash Chart AmCharts Emprise JavaScript Charts PlotKit Flotr PHP/SWF Charts Visifire FusionCharts JFreeChart グラフを作る際にはこうしたツールを使えば一瞬ですね。 その他、グラフ関連エントリは以下 ピュアCSSでクールなグラフサン
ブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記
はじめに 今日、 jQuery の作者として有名な John Resig さんが Processing.js という JavaScript のライブラリを公開しました。 John Resig - Processing.js このライブラリを使うと、比較的簡単に以下のようなグラフィックスやアニメーションを書くことができるようになります。 というわけで、公開されたばかりのこのライブラリを簡単な使い方から詳しい使い方までとことん掘り下げてみたいと思います。 Processing.js 概要 まず、 Processing.js とは何かという話をします。 Processing.js とは、ブラウザで Processing というプログラミング言語を実行する JavaScript のライブラリです。 では、 Processing とはどのようなプログラミング言語なのでしょうか。 Processing
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
startapp.jp
ド派手なビジュアリゼーションを実現できるJSライブラリ「Toxiclibs.js」:phpspot開発日誌
e-riverstyle.com
CTOA日記:javascriptのグラフライブラリ - livedoor Blog（ブログ）