数学 – JavaScript - 集合と写像 - 対応、写像(直積、対応の概念、グラフ、逆対応、定値写像、恒等写像)

集合・位相入門

学習環境

• 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

集合・位相入門(松坂 和夫(著)、岩波書店)の第1章(集合と写像)、3(対応、写像)、問題1、2、3、4.を取り組んでみる。

問題1.

${\left(2^n\right)}^m=2^{mn}$

問題2.

候補者yと候補者yを新任した選挙人の対応。

問題3.

$\begin{array}{l}x\in A=D\left(\Gamma \right)\\ \Gamma \left(x\right)\in B\\ \\ \Gamma \left(x\right)=b_1\\ \Gamma \left(x\right)=b_2\\ x\in {\Gamma }^{-1}\left(b_1\right)\cap {\Gamma }^{-1}\left(b_2\right)\\ b_1=b_2\end{array}$

問題4.

JavaScript、D3.js で描画。

コード(Emacs)

HTML5

<div id="graph0"></div>

<label for="b0">b0 = </label>
<input id="b0" type="number" value="10">

<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="sample1.js"></script>

JavaScript

{
    'use strict';
    let w = 600,
        h = 600,
        padding = 50,
        svg,
        div_graph = document.querySelector('#graph0'),
        input_b = document.querySelector('#b0');

    let b;
    let f = (x) => x;
    let g = (x) => b;

    let draw = () => {
        b = parseFloat(input_b.value);
        
        let max = Math.abs(b) * 1.5,
            min = -max;

        div_graph.innerHTML = '';
        svg = d3.select('#graph0')
            .append('svg')
            .attr('width', w)
            .attr('height', h);

        let xscale = d3.scaleLinear()
            .domain([min, max])
            .range([padding, w - padding]);
        let yscale = d3.scaleLinear()
            .domain([min, max])
            .range([h - padding, padding]);
        let xaxis = d3.axisBottom().scale(xscale);
        let yaxis = d3.axisLeft().scale(yscale);

        let lines = [f, g].map((func) => {
            return [[xscale(min), yscale(func(min))],
                    [xscale(max), yscale(func(max))]];
        });
        let colors = ['blue', 'green'];
        svg.selectAll('line')
            .data(lines)
            .enter()
            .append('line')
            .attr('x1', (d) => d[0][0])    
            .attr('y1', (d) => d[0][1])
            .attr('x2', (d) => d[1][0])
            .attr('y2', (d) => d[1][1])
            .attr('stroke', (d, i) => colors[i]);
        svg.append('g')
            .attr('transform', `translate(0, ${h / 2})`)
            .call(xaxis);
        svg.append('g')
            .attr('transform', `translate(${w / 2}, 0)`)
            .call(yaxis);
    };

    input_b.onchange = draw;

    draw();
}

b0 =