数学 - Python - SymPy - JavaScript - D3.js - 関数の変化をとらえる - 関数の極限と微分法 – 関数と極限 - 片側からの極限

数学読本〈4〉

学習環境

• Surface 3 (4G LTE)、Surface 3 タイプ カバー、Surface ペン(端末)
• Windows 10 Pro (OS)
• 数式入力ソフト(TeX, MathML): MathType
• MathML対応ブラウザ: Firefox、Safari
• MathML非対応ブラウザ(Internet Explorer, Google Chrome...)用JavaScript Library: MathJax
• 参考書籍
  • Pythonからはじめる数学入門
  • JavaScriptリファレンス 第6版
  • インタラクティブ・データビジュアライゼーション

数学読本〈4〉数列の極限，順列/順列・組合せ/確率/関数の極限と微分法(松坂 和夫(著)、岩波書店)の第17章(関数の変化をとらえる - 関数の極限と微分法)、17.1(関数と極限)、片側からの極限、問5.を取り組んでみる。

5. 1. 
      $+\infty$
   2. 
      $-\infty$
   3. 
      $\underset{x\to 1+0}{\lim }\frac{\left(x+1\right)\left(x-1\right)}{x-1}=2$
   4. 
      $\underset{x\to 1-0}{\lim }\frac{-\left(x+1\right)\left(x-1\right)}{x-1}=-2$

コード(Emacs)

Python 3

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

from sympy import Symbol, Limit, pprint

x = Symbol('x')

exprs = [(1 / x, 0), (abs(x ** 2 - 1) / (x - 1), 1)]

for expr, x0 in exprs:
    pprint(Limit(expr, x, x0, dir='+').doit())
    pprint(Limit(expr, x, x0, dir='-').doit())

入出力結果(Terminal, IPython)

$ ./sample5.py
∞
-∞
2
-2
$

コード(Emacs)

HTML5

<div id="graph0"></div>
<pre id="output0"></pre>
<label for="x1">x1 = </label>
<input id="x1" type="number" value="-5">
<label for="x2">x2 = </label>
<input id="x2" type="number" value="5">

<button id="draw0">draw</button>
<button id="clear0">clear</button>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.6/d3.min.js" integrity="sha256-5idA201uSwHAROtCops7codXJ0vja+6wbBrZdQ6ETQc=" crossorigin="anonymous"></script>

<script src="sample5.js"></script>    

JavaScript

let div0 = document.querySelector('#graph0'),
    pre0 = document.querySelector('#output0'),
    width = 600,
    height = 600,
    padding = 50,
    btn0 = document.querySelector('#draw0'),
    btn1 = document.querySelector('#clear0'),
    input_x1 = document.querySelector('#x1'),
    input_x2 = document.querySelector('#x2'),
    inputs = [input_x1, input_x2],
    p = (x) => pre0.textContent += x + '\n';

let f1 = (x) => 1 / x,
    f2 = (x) => Math.abs(x ** 2 - 1) / (x - 1);

let draw = () => {
    pre0.textContent = '';

    let x1 = parseFloat(input_x1.value),
        x2 = parseFloat(input_x2.value);
    
    let points = [];

    for (let x = x1; x <= x2; x += 0.001) {
        if (x !== 0) {
            points.push([x, f1(x)]);
        }
    }
    let t = points.length;

    for (let x = x1; x <= x2; x += 0.001) {
        if (x !== 1) {
            points.push([x, f2(x)]);
        }
    }
    
    let xscale = d3.scaleLinear()
        .domain([x1, x2])
        .range([padding, width - padding]);
    let ys = points.map((a) => a[1]);
    let yscale = d3.scaleLinear()
        .domain([x1, x2])
        .range([height - padding, padding]);

    let xaxis = d3.axisBottom().scale(xscale);
    let yaxis = d3.axisLeft().scale(yscale);
    div0.innerHTML = '';
    let svg = d3.select('#graph0')
        .append('svg')
        .attr('width', width)
        .attr('height', height);

    svg.selectAll('circle')
        .data(points)
        .enter()
        .append('circle')
        .attr('cx', (d) => xscale(d[0]))
        .attr('cy', (d) => yscale(d[1]))
        .attr('r', 1)
        .attr('fill', (d, i) => i < t ? 'green' : 'blue');

    svg.append('g')
        .attr('transform', `translate(0, ${yscale(0)})`)
        .call(xaxis);

    svg.append('g')
        .attr('transform', `translate(${xscale(0)}, 0)`)
        .call(yaxis);
}

inputs.forEach((input) => input.onchange = draw);
btn0.onclick = draw;
btn1.onclick = () => pre0.textContent = '';
draw();

x1 = x2 =