Simple Line Chart with Color Gradient

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
    <style>
        body {
            font-family: futura;
            width: 960px;
        }

h2.title {
            color: black;
            text-align: center;
        }

.axis {
            font-family: arial;
            font-size: 0.8em;
        }

.axis text {
            fill: black;
            stroke: none;
        }

path {
            fill: none;
            stroke: black;
            stroke-width: 2px;
        }

.tick {
            fill: none;
            stroke: black;
        }

.line {
            fill: none;
            stroke: url(#temperature-gradient);
            stroke-width: 1px;
        }

div.day_buttons {
            text-align: center;
        }

div.day_buttons div {
            text-align: center;
            background-color: #438CCA;
            color: white;
            padding: 6px;
            margin: 5px;
            font-size: 0.8em;
            cursor: pointer;
            display: inline-block;
        }
    </style>

function draw(data) {
            "use strict";

// set margins according to Mike Bostock's margin conventions
            // https://bl.ocks.org/mbostock/3019563
            var margin = {top: 25, right: 40, bottom: 25, left: 75};

// set height and width of chart
            var width = 960 - margin.left - margin.right,
                    height = 350 - margin.top - margin.bottom;

var field = 'temperature';

// Append the title for the graph
            d3.select("body")
                    .append("h2")
                    .text("Noe Valley Temperature")
                    .attr('class', 'title');

// append the SVG tag with height and width to accommodate for margins
            var svg = d3.select("body")
                    .append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                    .append('g')
                    .attr('class', 'chart')
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Q1: group data by day

var data_sub = data.slice(1000, 10000);

var grouped = d3.nest()
                    .key(function(d) {
                        var date = d.timestamp;
                        return (date.getMonth() + 1).toString() + "/" + date.getDate().toString();
                    })
                    .entries(data);

// Q2: remove the first 10 days of data (month of January)

var subset = grouped.slice(10);

// Q3: extract the days we are visualizing
            // (to be used as labels in buttons)

var labels = subset.map(function(i) {return i.key;});

// Q4: dynamically create buttons to toggle days

// Q5: toggle button of first day

// Find min/max of temperature column
            var temp_extent = d3.extent(data_sub, function (d) {
                return d[field];
            });

// get min/max times of first day of data
            // (we will need a new extent for each day)
            var time_extent = d3.extent(data_sub, function (d) {
                return d['timestamp'];
            });

// Create x-axis scale mapping dates -> pixels
            var time_scale = d3.time.scale()
                    .range([0, width])
                    .domain(time_extent);

// Create y-axis scale mapping temperature -> pixels
            var temp_scale = d3.scale.linear()
                    .range([height, 0])
                    .domain(temp_extent);

// Create D3 axis object from time_scale for the x-axis
            var time_axis = d3.svg.axis()
                    .scale(time_scale)
                    .ticks(d3.time.hours, 2)
                    .tickFormat(d3.time.format("%I:00 %p"));

// Create D3 axis object from temp_scale for the y-axis
            var temp_axis = d3.svg.axis()
                    .scale(temp_scale)
                    .orient("left");

// determine thresholds for gradient stops
            var range = temp_extent[1] - temp_extent[0];
            var interval = range / 3;
            var low_threshold = temp_extent[0] + interval;
            var high_threshold = temp_extent[0] + 2 * interval;

// Append a Gradient to double encode temperature
            svg.append("linearGradient")
                    .attr("id", "temperature-gradient")
                    .attr("gradientUnits", "userSpaceOnUse")
                    .attr("x1", 0).attr("y1", temp_scale(low_threshold))
                    .attr("x2", 0).attr("y2", temp_scale(high_threshold))
                    .selectAll("stop")
                    .data([
                        {offset: "0%", color: "steelblue"},
                        {offset: "50%", color: "gray"},
                        {offset: "100%", color: "red"}
                    ])
                    .enter().append("stop")
                    .attr("offset", function (d) {
                        return d.offset;
                    })
                    .attr("stop-color", function (d) {
                        return d.color;
                    });

// Append SVG to page corresponding to the x-axis
            svg.append('g')
                    .attr('class', 'x axis')
                    .attr('transform', "translate(0," + height + ")")
                    .call(time_axis);

// Append SVG to page corresponding to the y-axis
            svg.append('g')
                    .attr('class', 'y axis')
                    .call(temp_axis);

// add label to y-axis
            d3.select(".y.axis")
                    .append("text")
                    .text("Degrees (Celsius)")
                    .attr("transform", "rotate(-90, -43, 0) translate(-260)")
                    .style('font-size', '1.2em');

// define the values to map for x and y position of the line
            var line = d3.svg.line()
                    .x(function (d) {
                        return time_scale(d['timestamp']);
                    })
                    .y(function (d) {
                        return temp_scale(d[field]);
                    });

// append a SVG path that corresponds to the line chart
            var path = svg.append("path")
                    .datum(data_sub)
                    .attr("class", "line")
                    .attr("d", line);

// Q6: create a timeout interval to animate over the days

// Q7: define a function to unselect all the buttons

// Q8: highlight button with a specified id

// Q9: add hover to buttons

// Q10: add hover to buttons

// Q11: function to be run when on a clicked button

// Q12: function which updates the data bound to our chart

}
        ;
    </script>
</head>
<body>
<script type="text/javascript">
    d3.csv("https://jay-oh-en.github.io/interactive-data-viz/data/datacanvas/noevalley.csv", function (d) {
        // convert from string to Date object
        var date = format.parse(d['timestamp']);

// use moment.js to shift time back 8 hours (to PST)
        var mom = moment(date).subtract(8, 'hours');
        d['timestamp'] = mom.toDate();

// coerce temperature from string to float
        d['temperature'] = +d['temperature'];
        return d;
    }, draw);
</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js