D3 Examples - sparkline

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    div.tooltip {   
    position: absolute;         
    text-align: center;         
    width: 60px;                    
    height: 28px;                   
    padding: 2px;               
    font: 12px sans-serif;      
    background: lightsteelblue; 
    border: 0px;                
    pointer-events: none;           
}
  </style>
</head>
​
<body>
  <script>
    
    var data = [
      {
        hour : 0,
        todayAvg : 10,
        weeklyAvg : 9
      },
       {
        hour : 1,
        todayAvg : 15,
        weeklyAvg : 14
      },
      {
        hour : 2,
        todayAvg : 5,
        weeklyAvg : 7
      },
      {
        hour : 3,
        todayAvg : 6,
        weeklyAvg : 3
      },
      {
        hour : 4,
        todayAvg : 10,
        weeklyAvg : 8
      },
            {
        hour : 5,
        todayAvg : 10,
        weeklyAvg : 9
      },
       {
        hour : 6,
        todayAvg : 15,
        weeklyAvg : 14
      },
      {
        hour : 7,
        todayAvg : 5,
        weeklyAvg : 7
      },
      {
        hour : 8,
        todayAvg : 6,
        weeklyAvg : 3
      },
      {
        hour : 9,
        todayAvg : 10,
        weeklyAvg : 8
      },
            {
        hour : 10,
        todayAvg : 10,
        weeklyAvg : 9
      },
       {
        hour : 11,
        todayAvg : 15,
        weeklyAvg : 14
      },
      {
        hour : 12,
        todayAvg : 5,
        weeklyAvg : 7
      },
      {
        hour : 13,
        todayAvg : 6,
        weeklyAvg : 3
      },
      {
        hour : 14,
        todayAvg : 10,
        weeklyAvg : 8
      },
            {
        hour : 15,
        todayAvg : 10,
        weeklyAvg : 9
      },
       {
        hour : 16,
        todayAvg : 15,
        weeklyAvg : 14
      },
      {
        hour : 17,
        todayAvg : 5,
        weeklyAvg : 7
      },
      {
        hour : 18,
        todayAvg : 6,
        weeklyAvg : 3
      },
      {
        hour : 19,
        todayAvg : 10,
        weeklyAvg : 8
      },
            {
        hour : 20,
        todayAvg : 10,
        weeklyAvg : 9
      },
       {
        hour : 21,
        todayAvg : 15,
        weeklyAvg : 14
      },
      {
        hour : 22,
        todayAvg : 5,
        weeklyAvg : 7
      },
      {
        hour : 23,
        todayAvg : 6,
        weeklyAvg : 3
      }
    ];
    
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);
    
    // Define the div for the tooltip
    var tooltip = d3.select("body").append("div")   
      .attr("class", "tooltip")             
      .style("opacity", 0);
​
    var xScale = d3.scaleLinear()
    .domain([0,23])
    .rangeRound([0, 700]);
​
    var yScale = d3.scaleLinear()
    .domain([0,30])
        .rangeRound([500, 0]);
    
    var todayLine = d3.line()
        .x(function(d) {return xScale(d.hour);})
        .y(function(d) {return yScale(d.todayAvg);});
    
    var weeklyLine = d3.line()
        .x(function(d) {return xScale(d.hour);})
        .y(function(d) {return yScale(d.weeklyAvg);});
    
    svg.append("text")
        .datum(data[23])
        .text(function(d) {return d.todayAvg;})
        .attr("x", function(d) {return xScale(d.hour) + 10;})
        .attr("y", function(d) {return yScale(d.todayAvg);})
        .attr("font-size", "50px")
      .attr("fill", "steelblue")
        .attr("font-family", "'Lucida Sans Unicode', 'Lucida Grande', sans-serif");
    
    svg.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", todayLine);
    
     svg.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "red")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", weeklyLine);
    
     svg.selectAll("circle")
        .data(data)
      .enter()
        .append("circle")
      .attr("opacity", "0")
      .attr("r", "5")
      .attr("cx", function(d) {return xScale(d.hour);})
        .attr("cy", function(d) {return yScale(d.todayAvg);})
       .on("mouseover", function(d) {   
              tooltip.transition()      
                  .duration(200)        
                  .style("opacity", .9);        
              tooltip.html("hi " + "<br/>" )    
                  .style("left", (d3.event.pageX) + "px")       
                  .style("top", (d3.event.pageY - 28) + "px");  
              })                    
          .on("mouseout", function(d) {     
              tooltip.transition()      
                  .duration(500)        
                  .style("opacity", 0); 
          });
​
  </script>
</body>
​
    