図

グラフ

表   1 .  SVG （ XML）の要素と属性
要素 属性
svg viewBoxで、ワールド座標系を設定します。 width, heightで、html内のboxを設定しますが、 レスポンシブデザインの場合は、省略するのがおすすめです。
g
symbol
clipPath idを設定して、クリッピング領域を設定します。 ネストすることもできます。 その場合、fill-ruleを設定します。
path dコマンドで図形を描画できます。 ベジェ曲線 “M”は基点、開始点を示し、”C”は三次ベジェ曲線を描画する。 二次ベジェ曲線 ：コーナーを丸めるとき使う。 三次ベジェ曲線 ：先端を丸めるとき使う。
polygon pointsでワールド座標系の座標を設定します。 fillでRGBを設定します。 styleで設定もできます。
05 情報処理概論 XML-SVG SVG 図形 グラフ 素材
'

電流電圧曲線（分解電圧と過電圧）

'
-0.50.00.51.01.52.02.52.52.01.51.00.50.0-0.5 電圧 V /V 電流 I /A
図   1 .  電流電圧曲線（分解電圧と過電圧）

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

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

図   2 .  46
分解電圧
©K.Tachibana

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

┏━━━┓

┃〇　　┃

┃　　×┃

┗━━━┛

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

16：9 白銀比 4：3 -0.50.00.51.01.52.02.52.52.01.51.00.50.0-0.5-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 / 量単位
図   3 .  図題

縦軸と横軸には量記号と 単位 を明記します。 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
図   4 .  二酸化炭素濃度
©2020 K.Tachibana, SST

2024年4月27日の CO2 濃度は、 推定445ppm。 この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
図   5 .  電流電圧曲線（分解電圧と過電圧）

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

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

図   6 .  46
分解電圧
©K.Tachibana
10020030040050012345
図 チャート：SVGにイメージを埋め込んだ場合
  1. エネルギーデバイス材料の使われる誘電体の構造が電気的物性に与える影響
    伊藤知之,山形大学理工学研究科修士論文(2014).
計量法 計量標準総合センター 外形線の太さ
情報処理概論
物質化学工学実験Ⅳ
卒業研究
式の表し方
山形大学大学院　理工学研究科
〒992-8510　山形県米沢市城南4丁目3-16
３号館（物質化学工学科棟） 3-3301
C1ラボラトリー
准教授 伊藤智博 0238-26-3753
http://c1.yz.yamagata-u.ac.jp/
c1@gp.yz.yamagata-u.ac.jp