Centigrade to Fahrenheit by aubergene

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Centigrade to Fahrenheit</title>
  <meta charset="UTF-8">
  <style type="text/css">
    body {
      margin: 0;
    }

    .band {
      stroke: #fff;
      stroke-width: 0.5px;
    }

  </style>
</head>
<body>
  <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

  <script type="text/javascript">
    'use strict';

    var width = 960, height = 500,
        margin = { top: 40, bottom: 40, left: 20, right: 20 },
        start = -60, finish = 110,
        interval = 10

    var c2f = d3.scaleLinear()
        .domain([-40, 0])
        .range([-40, 32]);

    var values = d3.range(start, finish, interval)

    var color = d3.scaleLinear()
        .domain([start, 0, finish])
        .range(['#66c', '#fff', '#c66'])

    var color = d3.scaleSequential(d3.interpolateRdBu)
        .domain([finish, start])

    var svg = d3.select('body').append('svg')
        .attr('width', width)
        .attr('height', height)
        .append('g')
          .attr('transform', 'translate(' + [margin.left, margin.top] + ')');

    width -= margin.left + margin.right;
    height -= margin.top + margin.bottom;

    var scale = d3.scaleLinear()
        .domain([
          c2f(values[0]),
          c2f(values[values.length-1]+interval)
        ])
        .range([0, width]);

    var cband = scale(interval) - scale(0);
    var fband = scale(c2f(interval)) - scale(c2f(0));

    var axis = d3.axisTop(scale)
      .tickFormat(function(d) { return d + '°C'});

    svg.append('g')
        .attr('class', 'axis')
        .attr('transform', 'translate(0 ' + -1 + ')')
        .call(axis);

    axis = d3.axisBottom(scale)
        .tickFormat(function(d) { return d + '°F'});

    svg.append('g')
        .attr('class', 'axis')
        .attr('transform', 'translate(0 ' + height + ')')
        .call(axis);

    svg.selectAll('.band')
      .data(values)
      .enter()
      .append('path')
        .attr('class', 'band')
        .style('fill', color)
        .attr('d', function(d) {
          return [
            'M', scale(d), 0,
            ' h', cband,
            ' L', scale(c2f(d)) + fband, height,
            ' h', -fband,
            ' z'
          ].join(' ')
        })

  </script>
</body>
</html>