JavaScript - 数学 - データをグラフで可視化する(1日の間に気温はどのように変化するか)

Pythonからはじめる数学入門
原著

開発環境

• OS X El Capitan - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• D3.js (JavaScript Library)
• Safari(Web browser)
• JavaScript 第6版 (David Flanagan(著)、村上 列(翻訳)、オライリージャパン)(参考書籍)
• インタラクティブ・データビジュアライゼーション(Scott Murray(著)、長尾 高弘(翻訳)、オライリージャパン)(参考書籍)

Pythonからはじめる数学入門 (Amit Saha (著)、黒川 利明 (翻訳)、オライリージャパン)の2章(データをグラフで可視化する)、2.6(プログラミングチャレンジ)、問題2-1(1日の間に気温はどのように変化するか)をJavaScript(とD3.js)で取り組んでみる。(バージョンアップで D3.js にいろいろ変更点があったみたい。)

問題2-1(1日の間に気温はどのように変化するか)

コード(Emacs)

HTML5

<p>1日の間の気温の変化</p>
<span style="color:blue">ニューヨーク</span>,
<span style="color:green">東京</span>
<div id="graph0"></div>  

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

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

JavaScript

var hours = ['6:00 AM', '9:00 AM', '12:00 PM', '15:00 PM', '18:00 PM',
             '21:00 PM', '0:00 AM', '3:00 AM'],
    new_york =  [23, 23, 28, 29, 28, 26, 25, 24],
    len = new_york.length,
    tokyo = [31, 30, 27, 26, 24, 29, 33, 33],
    dataset = new_york.concat(tokyo),
    width = 600,
    height = 400,
    padding = 20,
    svg,
    yscale,
    yaxis;

yscale = d3.scaleLinear()
    .domain([d3.min(dataset), d3.max(dataset)])
    .range([height - padding, padding]);

yaxis = d3.axisLeft().scale(yscale);

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

svg.selectAll('line')
    .data(dataset)
    .enter()
    .append('line')
    .attr('x1', function (d, i) {
        if (i < len) {
            return i * width / len + padding;
        }
        return (i - len) * width / len + padding;
    })
    .attr('y1', function (d, i) {
        return height - d * 10;
    })
    .attr('x2', function (d, i) {
        if (i < len) {
            return (i + 1) * width / len + padding;
        }
        return (i - len + 1) * width / len + padding;
    })
    .attr('y2', function (d, i) {
        if (i < len) {
            if (i === len - 1) {
                return height - d * 10;
            }
            return height - new_york[i + 1] * 10;
        }
        i -= len;
        if (i < len) {
            if (i === len - 1) {
                return height - d * 10;
            }
            return height - tokyo[i + 1] * 10;
        }
    })
    .attr('stroke', function (d, i) {
        if (i < len ) {
            return 'blue';
        }
        return 'green';
    });

svg.selectAll('text')
    .data(hours)
    .enter()
    .append('text')
    .text(function (d) {
        return d;
    })
    .attr('x', function (d, i) {
        return i * width / len + padding;
    })
    .attr('y', height - 5);

svg.append('g')
    .attr('transform', 'translate(' + padding + ', 0)')
    .call(yaxis);

1日の間の気温の変化

ニューヨーク, 東京