*

グラフをソートして表示する

公開日: : 最終更新日:2016/03/24 D3.js ,

以前、縦棒グラフを表示するサンプルコードを書きましたが、時と場合によりただ棒グラフを表示するだけではなく、インタラクティブに表現したいことがあります。たとえば、棒グラフで商品別の売り上げを表示する時、売れている順番に並び替えたいときです。

サンプルコードの実行結果はこちら

目盛りとスケールの準備

都市名・人口のデータセットとしてのCSVファイルを作成します。
最初の列が都市名、2行目が人口の数値です。

スポンサードリンク

関連記事

D3.js

散布図でツールチップを表示してみる

グリッド上に配置されている円「●」にマウスカーソルがのったとき、ツールチップを表示します。グラフ上で

記事を読む

D3.js

d3.jsでJSONファイルを読み込む

JSON形式は複雑なXML形式と比べてシンプルで、データ容量も少なくて すむので、ウェブでよく利用

記事を読む

D3.js

ヒートマップをCanvasに表示する

前回の記事のヒートマップはSVGを用いて描画しました。ウェブブラウザではSVG以外にもピクセル単位で

記事を読む

D3.js

外部ファイルを読み込んで円グラフを表示させる

CSVデータを読み込んでグラフを表示させてみます。 サンプルコードの実行結果はこちら

記事を読む

D3.js

円グラフの色分けしてみる

円グラフは、それぞれの扇の部分が色分けされているのが普通です。扇形部分を色分けするにはstyle()

記事を読む

D3.js

図形のスタイルを指定する

D3.jsで図形の属性はattr()メソッドでしました。 図形のスタイルはどう指定すればいいのか。

記事を読む

D3.js

折れ線グラフを作ってみる

棒グラフ、円グラフと同じくらいよく見るのが折れ線グラフです。体重や為替相場など継続的に変化するデータ

記事を読む

D3.js

D3.jsを複数の棒グラフを表示する

前回の記事では、四角形と一本の棒グラフを表示させました。 しかし、データが複数がある場合は、データ

記事を読む

D3.js

CSVファイルからデータを読み込んで縦棒グラフを表示してみる

CSVファイルからデータを読み込んで表示するものを今回作成します。 サンプルコードの実行結果は

記事を読む

D3.js

JSONデータを読み込んで、ボタンでパックレイアウトで表示するデータを切り替える

今回は、JSONデータを読み込んでパックレイアウトをまず表示します。そのうえでHTMLファイル上に3

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑