Centigrade to Fahrenheit

I made this scale with Michael Keller at coffee shop in Brooklyn. It was supposed to take just a few minutes, as a kind of warm up exercise to coding, but consumed practically the entire afternoon.

<!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>

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>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js