グラフ・チャートの表し方(Svg)

グラフ

  1 SVG XML)の要素と属性
要素 属性
svg viewBoxで、ワールド座標系を設定します。 width, heightで、html内のboxを設定しますが、 レスポンシブデザインの場合は、省略するのがおすすめです。
g
clipPath idを設定して、クリッピング領域を設定します。 ネストすることもできます。 その場合、fill-ruleを設定します。
polygon pointsでワールド座標系の座標を設定します。 fillでRGBを設定します。 styleで設定もできます。
05.情報処理概論 図形 グラフ

グラフは、 項目や 物理量図形に表現したものです。 17世紀デカルトにより座標の概念が確立されました。 16世紀 には、活字を使った活版印刷が普及していました。 文字ばかりでなく、楽譜数式も組版されていました。グラフも罫線活字によって組版されていたと想像されます。

┏━━━┓

┃〇  ┃

┃  ×┃

┗━━━┛


htmlでグラフやチャートを表現する方法は主にふたつ。 SvgCanvasです。 ここでは、Svgについて説明します。


16:9 4:3 -2.0-1.5-1.0-0.50.00.51.01.52.02.01.51.00.50.0-0.5-1.0-1.5-2.0 横軸(X軸)名 (量記号) / 量単位 縦軸(Y軸)名 (量記号) / 量単位
  1 図題

縦軸と横軸には量記号と 単位 を明記します。 svgで表現した図の内部にリンクを貼るにはxlink:href属性を指定します。 svgの中ではvarタグが使えないようです。 tspan font-style = "italic"を指定します。 html中では意味的にiタグを使うよりvarタグを使った方が良いでしょう。 Microsoft ExcelやGoogle Sheetを使ってグラフを作る場合、凡例や有効数字が 学術的な図面にならないことがあるので手動で設定しましょう。


例)BASICを使ったSVGによるグラフ表現

西暦 y / 年消費電力 P / kW1990200020102020203010.08.06.04.02.00.0 L 555.555555555556 122.819022466918 L 416.666666666666 162.316256027897 L 555.555555555556 122.819022466918 L 416.666666666666 162.316256027897米沢キャンパス全域基幹スイッチ
.山形大学の 基幹通信機器 と 建物までの通信機器 の消費電力の年代別推移
02.情報処理概論より

データベースから作ったグラフの例
石炭 石油 " 産業革命 " 太平洋戦争 " 現在 165017001750180018501900195020002050600500400300200 年代 y / year 二酸化炭素濃度 C / ppm
  2 二酸化炭素濃度
©2020 K.Tachibana, SST

2022年7月1日CO2濃度は、 推定439ppm。 この100年間で、地球大気中の二酸化炭素の濃度は1.4倍になった。 前史時代の二酸化炭素濃度は、280ppmでほぼ一定だった。 石炭 を使い始めた産業革命から指数的に増加を始めた。 石油を使い始めてからは指数項が加わった。

今、地球がヤバい。 脱炭素社会 には 再生可能エネルギー の活用が必須。そのためには、電気を 備蓄 する電池が必須なのだ。


細い破線 星形
1

-0.50.00.51.01.52.02.52.52.01.51.00.50.0-0.5 電圧 V /V 電流 I /A
  3 電流電圧曲線(分解電圧と過電圧)

分解電圧を調べるときは、電圧を掃引して、電流を測定します。 これを LSVリニアスイープボルタンメトリー)ということもあります。 電流電圧曲線から、溶液抵抗の傾きを外挿して、分解電圧を求めます。 理論分解電圧から分解電圧を引いて、 過電圧を求めます。 過電圧を電流密度の対数の関係をターフェルプロットと言います。

電池では、電流を掃引して、電圧を測定します。 求めた電流電圧曲線は、電池の放電の 内部抵抗 を求めるのに使われます。


  4 46
分解電圧
©K.Tachibana

10020030040050012345
チャート:SVGにイメージを埋め込んだ場合
  1. エネルギーデバイス材料の使われる誘電体の構造が電気的物性に与える影響
    伊藤知之,山形大学理工学研究科修士論文(2014).

計量法 計量標準総合センター 外形線の太さ
情報処理概論
物質化学工学実験Ⅳ
卒業研究
式の表し方

山形大学大学院 理工学研究科
〒992-8510 山形県米沢市城南4丁目3-16
3号館(物質化学工学科棟) 3-3301
C1ラボラトリー
准教授 伊藤智博 0238-26-3753
http://c1.yz.yamagata-u.ac.jp/
c1@gp.yz.yamagata-u.ac.jp