SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

データサイエンス基礎を高校数学から復習

D3.jsで一次関数と二次関数のグラフを描いてみよう

データサイエンス基礎を高校数学から復習しよう 第2回

  • X ポスト
  • このエントリーをはてなブックマークに追加

二次関数の図を記述してみる

 続いて図6のように、y=x^2を示す二次関数のグラフを記述します。

図6:二次関数を示すグラフ
図6:二次関数を示すグラフ

 こういった二次関数も、D3ではリスト7の通り一次関数と同じ方法で記述できます。

[リスト7]データプロットをするサンプル(js/sample/QuadraticController.jsの抜粋)
// (省略)
const xScale = scale.x;
const yScale = scale.y;

//  (1) 線がスムーズになるようにxを細かくする
let data = [];
for(let x = -100; x < 100; x = x + 0.5 ){
    const y = Math.pow(x,2);
    data.push({ x, y });
}

// (2) 以降は一次関数の時と同様
const path = svg.append("path");

const line = d3.line().x(function (d){
    return xScale(d.x);
}).y(function(d){
    return yScale(d.y);
});
path.datum(data)
    .attr('fill','none')
    .attr('stroke','#666666')
    .attr('d',line);

 一次関数の時は2点だけを指定していましたが、二次関数では(1)のように各x値に応じた(x,y)の値のデータ列を作成します。

 今回、値は0.5刻みにしましたが、これを調整すれば荒いグラフやよりスムーズなグラフの描写が可能です。そして、データ列を作成したあとは、(2)のように一次関数の時と同じコードで描写できます。

二次関数の特徴

 一次関数では単純な比例関係なので、軸と値の関係がわかりやすかったはずです。一方で、二次関数は式だけみても特徴があまりよくわかりません。

 例えば先ほどのy=x^2という単純なグラフを右に20、上に500ほど移動したものを考えます。その際の図7(左)です。これを計算すると、y=x^2-40x+900となり、これは図7(右)のように2つの特徴が組み合わさったものと見ることも可能です。

 また、この数式は y=((x-10)^2)+(-20x+800) のように分解することもでき、こうした組み合わせは無限大になります。このように、二次関数になると先ほどの一次関数よりも格段に複雑になってしまいます。

図7:二次関数における移動
図7:二次関数における移動

 現実社会に存在する値の多くは、線形(一次関数で表せる形)と非線形(一次関数で表せない形)の合成で表せる場合が多くあります。そのため、単純に二次関数と言うだけでは、その特徴の要因がいくつあるのかわかりません。

 しかし、学校で学ぶ多くの二次関数はこのように2つ以上の特徴を合成して表したものではありません。そのため、二次関数が「放物線」と表現されているものをよく見かけるはずです。放物は物体の運動軌跡を示していてます。このことから、異なる関係である要因が複数存在することを扱っていたわけではないことが分かるはずです。

 高校数学などを学んでいると、先ほどのy=x^2-40x+900の式を、y=(x-20)^2+500に書き換えることに疑問を持ったことがある方もいるでしょう。または、このように書き換えると二次関数のグラフが書きやすいとだけ理解していた方もいるかもしれません。

 しかし、放物運動という特徴を表しているのであれば、y=x^2という運動自体の特徴は変わらず、その運動がどれだけx軸、y軸方向に移動しているかだけが異なる、と言えます。このように考えれば、式の変形が行われる理由もわかりやすいはずです。

曲線と一次関数が合成される場合

 ここまでは1つのグラフには複数の特徴が現れていない、といった前提で説明していました。しかし、現実にはそのような単純な結果だけにならない場合も多々あります。

 非線形データと線形データが合成して現れると、その値だけを見て分解することは難しいのですが、実際には、ある程度特徴がわかっている前提であれば分解することも可能です。

 例えば、図8のように気温と時間の変化を調べた場合、測定できるのは実際の気温データのみになります。

図8:自然影響による要因と人工的な要因が加味された気温推移グラフ
図8:自然影響による要因と人工的な要因が加味された気温推移グラフ

 しかし、あらかじめ大きな要因として「自然による温度変化」と「人工的な温度変化」があるとわかっていて、かつ「人工的な温度変化」が線形特徴、つまり一次関数で表せるのであれば、その実測値から一次関数の計算値を引いたものが「自然による温度変化」として扱えます。

 このようにして、先ほどの二次関数内に複数要因があったとしても、分離することで純粋な二次関数のように扱うことが可能です。

 または、「自然による温度変化」が何らかの方法で分かっていれば、逆も同様に可能です。とはいえ、現実社会では一次関数で表せる特徴のほうが分かりやすいことが多くあります。そして、線形的な特徴を示す要因のほうが他の方法で検証可能であるケースが多いです。

 そのため、それらの特徴を実測データから引くことで、一見すると複雑なデータも簡単に示せるのです。このように、データを異なる数式で合成、分解することで理解しやすいデータへと変換できます。

 次回説明する三角関数などの波を扱う場合、合成や分解をよく利用します。合成と分解についてまだイメージがしにくい場合には、次回の説明がわかりやすいはずなので、参考にしてください。

最後に

 筆者自身、学生時代に二次関数や二次方程式を学んだ際には、単なる数式としてしか認識していませんでした。そのため、当時は何のために学ぶのか全くイメージできませんでした。

 また、筆者の業務では物理演算を必要とする場面が少なく、二次関数を直接的に扱う機会は多くありませんでした。しかし、教科書や参考書にはない補足として、自分の子供に一次関数や二次関数の具体的な活用例を説明する機会があり、共に学ぶ中で学生時代には気づかなかった点に触れることができました。

 今回の内容の一部は、それらを説明するために用いた内容から構成されていますが、自分自身の中でも曖昧だったイメージがより鮮明になったように感じています。特に、二次関数を線形な特徴と非線形な特徴の組み合わせとして捉えるか、放物線という単一の物理現象の特徴を示すものと見なすかで、全く異なる意味合いを持つことを改めて実感しました。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
データサイエンス基礎を高校数学から復習連載記事一覧
この記事の著者

WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/21407 2025/05/02 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング