Simple Line Chart with Color Gradient

forked from Jay-Oh-eN's block: Simple Line Chart with Color Gradient

forked from jaclyncnguyen's block: 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 = d3.nest()
        									.key(function(x) {
                            var k = (x.timestamp.getMonth() + 1).toString() +
                                '/' + (x.timestamp.getDate()).toString();
                            return k;
                          })
        									.entries(data);        
        console.log(data_sub.length);

// Q2: remove the first 10 days of data (month of January)
   			data_sub = data_sub.slice(10);
        console.log(data_sub.length);

// Q3: extract the days we are visualizing
        // (to be used as labels in buttons)
        var days = [];
        data_sub.forEach(function(x) { days.push(x.key)});
        console.log(days);
       
        // 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');
        
        var frame = 0;
        var path = svg.append("path")
                      .datum(data_sub[frame])
                      .attr("class", "line")
                      .attr("d", line);

// Q6: create a timeout interval to animate over the day
        function update(idx){
          var sample = d3.entries(data_sub[idx]);
          console.log(sample);
          // 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 ani_interval = setInterval(function(){
            update(frame);
            frame++;
            if(frame >= data_sub.length) {
              clearInterval(ani_interval);
            }
          }, 1000);
        // 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