sparkline

<!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]);

</script>
</body>

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