ホーム
│
HTML5 & CSS
│
XXXXXXXX
スタートアップ HTML5 - 事例
第2章
D3.jsの基本
sample00 SVGで四角形を描く
sample00-1 D3.jsでrect要素を生成する
sample01 rect要素の属性を指定する
sample02 表示データごとに属性を指定する
sample03 データ数分のrect要素を生成する
sample04 SVGのrect要素にスタイルを指定する
sample05 データを変更する
sample06 棒グラフがアニメしながら変化する
sample07 アニメ開始から終了までの時間を指定
sample08 マウスイベントでグラフに色を変化させる
sample09 外部のデータを読む
sample10 グラフの下にメモリを
sample11 第2章の全機能をまとめた横棒グラフ
第3章
SVGの基本
sample01 SVGで四角形と円形を描く
sample01-2 プログラムでSVG要素を生成
sample02 四角形を描く
sample03 角丸四角形を描く
sample04 正円を描く
sample05 三角形を描く
sample06 3次ベジェ曲線を描く
sample07 SVGのstyle属性にスタイルを指定する
sample08 CSSでSVG要素にスタイルを指定する
sample09 idでSVG要素にスタイルを指定する
sample10 classでSVG要素にスタイルを指定する
sample11 SVGで文字を描画する
sample12 text要素で文字の太さとサイズを指定する
sample13 text要素で文字フォントを指定する
sample14 文字の表示位置を指定する
sample15 SVG要素をグループ化してスタイルを指定する
sample16 SVG要素をグループ化して位置を調整する
sample17 SVG要素をグループ化して回転させる
sample18 SVG要素をグループ化して拡大する
第4章
D3.jsからSVGを操作する
sample01 rect要素を生成する
sample02 svg要素を生成し、その中にrect要素を生成する
sample03 複数のrect要素を生成する
sample03-2 間違ったrect要素の生成
sample04 rect要素の位置やサイズを指定する
sample05 IDを使用してrect要素を操作する
sample05-2 スタイルや属性をまとめて指定する(1)
sample05-3 スタイルや属性をまとめて指定する(2)
sample06 四角形の長さが変化するアニメーション
sample07 rect要素の塗りや線の色を指定する
sample08 cssクラス名で要素を操作する
sample09 スタイル設定をcssで行う
sample10 attr()メソッドでスタイルを一括指定する
sample11 複数のrect要素にまとめてスタイルを指定する①
sample12 複数のrect要素にまとめてスタイルを指定する②
sample13 特定の出現順の要素を操作する
第5章
様々な形式のファイルからデータを読み込む
sample01 JavaScriptの配列データを元にグラフを描く
sample02 TSV形式ファイルを読み込んでグラフを描く
sample03 CSV形式ファイルを読み込んでグラフを描く
sample04 ヘッダ名が日本語のCSVファイルからグラフを描く①
sample05 ヘッダ名が日本語のCSVファイルからグラフを描く②
sample06 CSVの値を半分にしてからグラフを描く
sample07 JSON形式ファイルを読み込んでグラフを描く
sample08 HTML形式ファイルを読み込んでグラフを描く
sample09 XML形式ファイルを読み込んでグラフを描く
sample10 プレーンテキストファイルを読み込んでグラフを描く
sample11 特定の文字で区切られたファイルの処理①
sample11-2 特定の文字で区切られたファイルの処理②
第6章
データの更新・追加・削除
sample01 CSVを読み込んで、要素の内部状態を確認する
sample02 要素の値をdatum()メソッドで999に置き換える
sample03 要素の値をdatum()メソッドで乱数値に置き換える
sample04 関数に渡される2つのパラメータを確認する
sample04-2 call()とeach()メソッド
sample05 ボタンクリックでCSVファイを読込む-期待外の動作
sample06 ボタンクリックでCSVファイを読込む-修正後
sample07 データ数の異るCSVファイを読込む-期待外の動作
sample08 データ数の異るCSVファイを読込む-修正後
sample09 更新、追加、削除の順番
第7章
縦棒グラフ
sample01 縦棒グラフを描く
sample02 縦棒グラフを数値付きで描く
sample02-2 数値を縦方向に表示する
sample02-3 数値を90°回転して表示する
sample03 縦棒グラフを目盛り付きで描く-見映え未調整
sample04 縦棒グラフを目盛り付きで描く-見映え調整後
sample05 縦棒グラフを目盛り付き、ラベル付きで描く
sample05-2 目盛りの間隔を指定する
sample05-3 目盛りを異なる間隔にする
sample05-4 目盛りに表示する数値の書式を設定する
sample06 グラフを汎用化する
sample07 グラフをアニメ化する
sample08 左から順に、下から上に伸びる縦棒グラフ
sample09 マウスを重ねると色が変化する縦棒グラフ
sample10 CSVからデータやラベルを読み表示する縦棒グラフ
sample11 CSVファイル内容を変更①
sample12 CSVファイル内容を変更②
sample13 ???
第8章
円グラフ/パイチャート
sample01 円グラフを描く
sample01-2
sample02 円グラフを色分け-プログラムで設定した値を使用
sample03 円グラフを色分け-D3.jsデフォルトカラー10色使用
sample04 円グラフを色分け-D3.jsデフォルトカラー20色使用①
sample05 円グラフを色分け-D3.jsデフォルトカラー20色使用②
sample06 0~360°まで一周して表示する円グラフ
sample07 直線的な動きで一周して表示する円グラフ
sample08 円グラフの中央に合計値を表示する
sample09
sample10
第9章
折れ線グラフ
sample01
sample02
sample02-2
sample03
sample04
sample04-2
sample05
sample06
sample07
sample08
sample08-2
sample09
sample10
sample11
第10章
散布図
sample01
sample02
sample03
sample04
sample05
sample06
sample07
sample08
sample08-2
sample08-3
sample09
sample09-2
sample09-3
sample09-4
sample09-5
sample09-6
第11章
ヒストグラム
sample01
sample02
sample03
sample04
sample05
sample06
第12章
パックレイアウト
sample01
sample01-2
sample01-3
sample02
sample03
sample04
sample05
第13章
ツリーマップレイアウト
sample01
sample01-2
sample02
sample03
sample04
sample05
sample06
sample06-2
第14章
ヒートマップ
sample01
sample02
sample03
sample04
sample05
sample06
第15章
地図/マップレイアウト
sample01
sample02
sample03
sample04
sample05
sample06
sample07
sample07-2
sample07-3
sample08
sample09
sample09-2
sample09-3
sample09-4
付録
sample01
sample02
sample03
sample04
sample05
sample05-2
sample06
sample07