D3 Examples - line graph

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
</head>
​
<body>
<!--   <svg></svg> -->
  <div id='div1' style="background:beige"></div> 
  <div id='div2' style="background:bisque"></div>
  <div id='div3' style="background:beige"></div>
  <script>   
    
function linegraph(data,divid,xaxisformat){
  //console.log(data);
      var margin = {top: 20, bottom: 60, left: 40, right: 20};
       var width = 400
       var height = 300;   
            var dotRadius = 2;
  hoverTransition = d3.transition()
                .ease(d3.easeLinear);
    d3.select( divid+"svg").remove();
      var svg = d3.select(divid).append("svg")
                  .attr("width", width)
                  .attr("height", height)
                  .attr("id", divid+ "svg");
  //y label
svg.append("g")
    .attr("class", "y label")
    .append("text")
    .text("Chlorophyll Concentration ($)")
    .attr("transform", "rotate(-90)")
    .attr("y", 0 )
    .attr("x", -((height+ margin.top + margin.bottom+80) / 2))
    .attr("dy", ".71em");
  
  
      // scales
      var xExtent = d3.extent(data, d => d.date);
      var xScale = d3.scaleTime()
        .domain(xExtent)
        .range([margin.left, width - margin.right]);
      var yExtent = d3.extent(data, d => d.Value);
            var yScale = d3.scaleLinear()
            .domain(yExtent)
            .range([height - margin.bottom, margin.top]);     
     
      
      var xAxis = d3.axisBottom()
        .scale(xScale)
        .tickFormat(d3.timeFormat(xaxisformat))
        .ticks(15);
      var yAxis = d3.axisLeft()
        .scale(yScale);
      
      var line = d3.line()
                        .defined(function(d) { return d.Value })
                        .x((d) => { return xScale(d.date); })
                        .y((d) => { return yScale(d.Value);});      
      
        svg.append('path')
        .attr('fill', 'none')
        .attr('stroke', 'green')
        .attr('d', line(data));
      
      svg.append('g')
        .attr('transform', 'translate(' + [0, height-margin.bottom] + ')')
        .call(xAxis)
        .selectAll("text")
        .attr("y", 0)
        .attr("x", 9)
        .attr("dy", ".35em")
        .attr("transform", "rotate(90)")
        .style("text-anchor", "start");;
      svg.append('g')
        .attr('transform', 'translate(' + [margin.left, 0] +')')
        .call(yAxis);
  
          dots = svg.append('g')
          .selectAll('circle')
          .data(data)
          .enter().append('circle')
          .attr('cx', d => xScale(d.date))
          .attr('cy', function(d){ if(d.Value) return yScale(d.Value); })
          .attr('r', dotRadius)
                .attr('fill', 'salmon')
                .attr('stroke', 'white')
          .attr('opacity',function(d){ if(d.Value) return 1;
                                       else return 0;})
                .attr('stroke-width', 1)
          .style('cursor', 'pointer')
          .on('mouseenter', function() {
            d3.select(this)
                .interrupt()
              .transition(hoverTransition)
                .duration(300)
              .attr('r', dotRadius * 2);
          })
          .on('mouseleave', function() {
            d3.select(this)
                .interrupt()
              .transition(hoverTransition)
                .duration(300)
              .attr('r', dotRadius);
          });
      
    }// function linegraph ends
    
function linegraph_m(data1, data2,divid,xaxisformat){
  //console.log(data);
      var margin = {top: 20, bottom: 60, left: 40, right: 20};
       var width = 400
       var height = 300;   
            var dotRadius = 2;
  hoverTransition = d3.transition()
                .ease(d3.easeLinear);
    d3.select( "#svg"+ divid.substring(1,divid.length-1)).remove();
      var svg = d3.select(divid).append("svg")
                  .attr("width", width)
                  .attr("height", height)
                  .attr("id",  "svg" + divid.substring(1,divid.length-1));
  //y label
svg.append("g")
    .attr("class", "y label")
    .append("text")
    .text("Chlorophyll Concentration ($)")
    .attr("transform", "rotate(-90)")
    .attr("y", 0 )
    .attr("x", -((height+ margin.top + margin.bottom+80) / 2))
    .attr("dy", ".71em");
  
  
      // scales
      var xExtent = d3.extent(data1, d => d.date);
      var xScale = d3.scaleTime()
        .domain(xExtent)
        .range([margin.left, width - margin.right]);
     var y1Extent = d3.extent(data1, d => d.Value);
     var y2Extent = d3.extent(data2, d => d.Value);
     var y1min= y1Extent['0']; var y1max = y1Extent['1'];
     var y2min= y2Extent['0']; var y2max = y2Extent['1'];
  var ymin = y1min<y2min? y1min:y2min;
  var ymax = y1max>y2max? y1max:y2max;
  var yExtent = [ymin,ymax];
            var yScale = d3.scaleLinear()
            .domain(yExtent)
            .range([height - margin.bottom, margin.top]);
     
      
      var xAxis = d3.axisBottom()
        .scale(xScale)
        .tickFormat(d3.timeFormat(xaxisformat))
        .ticks(10);
      var yAxis = d3.axisLeft()
        .scale(yScale);
      
      var line = d3.line()
                        .defined(function(d) { return d.Value })
                        .x((d) => { return xScale(d.date); })
                        .y((d) => { return yScale(d.Value);});    
      var line2 = d3.line()
                        .defined(function(d) { return d.Value })
                        .x((d) => { return xScale(d.date); })
                        .y((d) => { return yScale(d.Value);});
      
        svg.append('path')
        .attr('fill', 'none')
        .attr('stroke', 'green')
        .attr('d', line(data1));
            
         svg.append('path')
        .attr('fill', 'none')
        .attr('stroke', 'red')
        .attr('d', line(data2));
      
      svg.append('g')
        .attr('transform', 'translate(' + [0, height-margin.bottom] + ')')
        .call(xAxis)
        .selectAll("text")
        .attr("y", 0)
        .attr("x", 9)
        .attr("dy", ".35em")
        .attr("transform", "rotate(90)")
        .style("text-anchor", "start");;
      svg.append('g')
        .attr('transform', 'translate(' + [margin.left, 0] +')')
        .call(yAxis);
  
    //graph legends
svg.append("g")
    .append("text")
    .attr("x", width - width/5)
    .attr("y", 20)
    .style("font-size","20px")
    .style("font-weight","bold")
    .style("fill","green")
    .text("Winter") 
svg.append("g")
    .append("text")
    .attr("x", width - width/5)
    .attr("y", 40)
    .style("font-size","20px")
    .style("font-weight","bold")
    .style("fill","red")
    .text("Summer") 
   
}// function linegraph_m ends 
    
    
   var datas=[];var datas2=[];
    
    d3.tsv('data.tsv', (err, data) => {
      var city = 'San Francisco';
      // clean the data
      data.forEach(d => {
        d.date = d3.timeParse("%Y%m%d")(d.date);
        d.date = new Date(d.date); // x
        d.Value= ++d.Value; // y
        
              var t = [];
        t['date']= d.date;t['Value']= d.Value;
        datas.push(t)
               var t2 = [];
        t2['date']= d.date;t2['Value']= d.Value2;
        datas2.push(t2)
        ;
      });
     //linegraph(datas,'#div1');
     //linegraph(datas2,'#div2');
      //linegraph_m(datas,datas2,'#div1');
    });
    
    var data3= {"20010701":0.62988,"20020701":1.0145,"20050701":0.93277,"20021001":1.1886,"20141001":0.5987,"20100101":0.63705,"19990201":0.41373,"19991001":0.65843,"20080401":1.4093,"20070501":1.3278,"20160301":0.23324,"20100901":1.1682,"20060301":1.5995,"20030701":0.82621,"20150801":0.32226,"20120401":0.45349,"20150201":0.29297,"20160901":0.37223,"20140101":0.40749,"20090101":0.94806,"20081001":1.3486,"20040801":0.67657,"20050201":0.56134,"20120601":0.32884,"20120801":0.38043,"20040901":1.0534,"20080801":1.2879,"20050301":0.75237,"20000301":0.44091,"20060901":0.7975,"20010401":0.23005,"20061001":2.1458,"20020201":0.48023,"20070101":0.6456,"20081101":1.241,"20130701":0.44937,"20100501":1.0526,"20110501":1.6146,"20000701":0.51482,"20110901":1.2715,"20090401":0.98868,"20150601":0.21784,"20080201":0.53343,"20110601":0.85397,"20151101":0.69967,"19990801":0.48882,"20160101":0.40975,"19980401":0.26156,"20130901":0.45541,"20140201":0.36124,"20091101":1.0836,"20020501":0.66316,"20040701":1.0683,"20121201":0.70251,"20021101":0.9007,"20010801":0.79442,"19991101":0.64762,"20080701":0.78111,"20070201":0.48197,"20090701":0.82996,"20131001":0.74442,"20040301":0.46763,"20090601":1.0697,"20160401":0.2877,"20110201":0.89083,"20160701":0.33033,"20071101":0.98552,"20030401":0.70403,"20060201":1.1944,"20150101":0.3747,"20141101":0.62175,"20070801":0.7464,"20140601":0.26027,"20051201":0.77159,"20101201":1.3108,"20100601":0.88399,"20001001":0.56191,"19981201":0.5181,"20020801":0.76278,"20001101":0.5473,"20041001":1.0764,"19990401":0.27083,"20120101":0.7991,"20000201":0.39761,"20080101":0.60427,"20141201":0.56689,"20060801":1.1996,"19990101":0.36933,"20030601":0.85429,"20140901":0.43865,"20111101":1.0465,"20130601":0.3919,"20150501":0.34517,"20000601":0.46939,"20080501":0.80937,"20061101":1.0325,"20020901":0.91199,"20050401":0.68882,"20031201":0.66448,"20100201":0.89335,"20030801":0.75114,"20030101":0.6494,"20011201":0.49032,"19980501":0.23936,"20130801":0.46747,"20070601":0.92839,"20140301":0.34761,"20070701":1.179,"20001201":0.37633,"20040601":0.78044,"20121101":0.58443,"20050801":0.93772,"19990601":0.27338,"20060501":0.86542,"19981101":0.36481,"20000101":0.33369,"20130301":0.26159,"20161201":0.4865,"19991201":0.4679,"20101101":1.0892,"20010901":0.76786,"20121001":0.406,"20080601":0.95128,"20081201":0.70217,"20131101":0.62508,"20110101":0.75296,"20040201":0.6555,"20160501":0.23852,"20000901":0.42194,"20071001":1.1461,"20060101":0.6214,"20030501":0.89609,"19971001":0.35247,"20110701":0.918,"20010101":0.4556,"20150901":0.35319,"20031101":0.86856,"20140701":0.37077,"20100701":1.3391,"20140401":0.17361,"20020601":0.72445,"19980801":0.55826,"20041101":0.76683,"20130501":0.34998,"20120201":0.95702,"20000501":0.25264,"20120901":0.44554,"20090201":0.45535,"20040501":1.0599,"20070901":0.84594,"20100401":1.7412,"20120501":0.49179,"20111001":1.0814,"20030201":0.88965,"19980601":0.40242,"20060701":0.79007,"20111201":0.95613,"20130101":0.48137,"20120701":0.43888,"20061201":0.87708,"20150401":0.36323,"19980101":0.35378,"20010501":0.21493,"20020101":0.55178,"20110401":1.0271,"20050501":0.81149,"19970901":0.25734,"20100301":0.90294,"20011101":0.74426,"20030901":1.0735,"20090501":0.94207,"20011001":0.68135,"19971201":0.33033,"20151201":0.59147,"20070401":0.96226,"20131201":0.64842,"19990501":0.2753,"20040101":0.63859,"20070301":0.84366,"20160201":0.37313,"20041201":0.75956,"20020401":0.49708,"20100801":1.2854,"20110801":1.1116,"20060601":1.002,"20091001":1.3706,"20150301":0.37182,"20130201":0.25924,"20071201":0.86397,"20050901":1.1063,"20101001":1.8429,"20140801":0.42949,"19981001":0.61196,"20060401":1.3244,"20160601":0.21011,"19980301":0.35274,"20161001":0.51393,"20050101":0.51313,"20021201":0.91644,"20080901":1.0959,"20000801":0.52909,"20150701":0.35266,"20010201":0.54627,"19971101":0.44068,"20090801":0.99253,"20010301":0.38897,"20020301":0.40077,"20090901":1.272,"20140501":0.30664,"19990301":0.32336,"20010601":0.47414,"19980901":0.35407,"20130401":0.38955,"20120301":0.67816,"20000401":0.26447,"20080301":1.5156,"20090301":0.5079,"20151001":0.51433,"20040401":0.96713,"20031001":1.5892,"19990901":0.4748,"19980201":0.19746,"20030301":0.61348,"19990701":0.53275,"19980701":0.40322,"20091201":1.1951,"20051001":0.89727,"20051101":1.0736,"20161101":0.62355,"20110301":0.86496,"20050601":0.70223,"20160801":0.33012}; 
    
var data4={"20010701":0.38609,"20020701":0.47014,"20050701":0.38045,"20021001":NaN,"20141001":NaN,"20100101":NaN,"19990201":0.25135,"19991001":0.50149,"20080401":NaN,"20070501":NaN,"20160301":NaN,"20100901":NaN,"20060301":0.19371,"20030701":0.31628,"20150801":NaN,"20120401":NaN,"20150201":NaN,"20160901":NaN,"20140101":NaN,"20090101":0.23835,"20081001":NaN,"20040801":0.27702,"20050201":0.23618,"20120601":NaN,"20120801":NaN,"20040901":0.35923,"20080801":NaN,"20050301":NaN,"20000301":0.29986,"20060901":0.41712,"20010401":0.26299,"20061001":0.53065,"20020201":0.27056,"20070101":0.35718,"20081101":NaN,"20130701":NaN,"20100501":NaN,"20110501":NaN,"20000701":0.32906,"20110901":NaN,"20090401":NaN,"20150601":NaN,"20080201":NaN,"20110601":NaN,"20151101":NaN,"19990801":0.2665,"20160101":NaN,"19980401":NaN,"20130901":NaN,"20140201":NaN,"20091101":NaN,"20020501":0.18445,"20040701":0.20331,"20121201":NaN,"20021101":0.44877,"20010801":0.50693,"19991101":0.42636,"20080701":NaN,"20070201":0.28398,"20090701":NaN,"20131001":NaN,"20040301":0.23219,"20090601":0.25161,"20160401":NaN,"20110201":NaN,"20160701":NaN,"20071101":0.42599,"20030401":0.15911,"20060201":0.27327,"20150101":NaN,"20141101":NaN,"20070801":NaN,"20140601":NaN,"20051201":0.45325,"20101201":NaN,"20100601":NaN,"20001001":0.47459,"19981201":0.41694,"20020801":0.25864,"20001101":0.62489,"20041001":0.3725,"19990401":0.075639,"20120101":NaN,"20000201":0.23222,"20080101":NaN,"20141201":NaN,"20060801":0.35791,"19990101":0.25155,"20030601":0.2351,"20140901":NaN,"20111101":NaN,"20130601":NaN,"20150501":NaN,"20000601":0.23753,"20080501":NaN,"20061101":0.58047,"20020901":0.77895,"20050401":0.27251,"20031201":0.31269,"20100201":NaN,"20030801":0.3145,"20030101":0.3213,"20011201":0.40763,"19980501":NaN,"20130801":NaN,"20070601":NaN,"20140301":NaN,"20070701":NaN,"20001201":0.25659,"20040601":0.13841,"20121101":NaN,"20050801":0.49893,"19990601":0.13843,"20060501":0.25818,"19981101":NaN,"20000101":0.25189,"20130301":NaN,"20161201":NaN,"19991201":0.37847,"20101101":NaN,"20010901":0.40811,"20121001":NaN,"20080601":NaN,"20081201":NaN,"20131101":NaN,"20110101":NaN,"20040201":NaN,"20160501":NaN,"20000901":0.3266,"20071001":0.54247,"20060101":0.39355,"20030501":0.24915,"19971001":NaN,"20110701":NaN,"20010101":0.29259,"20150901":NaN,"20031101":0.61568,"20140701":NaN,"20100701":NaN,"20140401":NaN,"20020601":0.25147,"19980801":NaN,"20041101":0.49676,"20130501":NaN,"20120201":NaN,"20000501":0.15193,"20120901":NaN,"20090201":0.19792,"20040501":0.26892,"20070901":0.30579,"20100401":NaN,"20120501":NaN,"20111001":NaN,"20030201":0.2693,"19980601":0.165,"20060701":0.32316,"20111201":NaN,"20130101":NaN,"20120701":NaN,"20061201":0.41057,"20150401":NaN,"19980101":0.23646,"20010501":0.21799,"20020101":0.48025,"20110401":NaN,"20050501":0.26419,"19970901":NaN,"20100301":NaN,"20011101":0.49625,"20030901":0.45066,"20090501":NaN,"20011001":0.65259,"19971201":0.28335,"20151201":NaN,"20070401":NaN,"20131201":NaN,"19990501":0.25894,"20040101":0.34004,"20070301":0.20001,"20160201":NaN,"20041201":0.47017,"20020401":0.21882,"20100801":NaN,"20110801":NaN,"20060601":NaN,"20091001":NaN,"20150301":NaN,"20130201":NaN,"20071201":0.5173,"20050901":0.40748,"20101001":NaN,"20140801":NaN,"19981001":0.48725,"20060401":NaN,"20160601":NaN,"19980301":0.21096,"20161001":NaN,"20050101":0.34225,"20021201":0.34558,"20080901":NaN,"20000801":0.28339,"20150701":NaN,"20010201":0.20954,"19971101":0.47232,"20090801":NaN,"20010301":0.29859,"20020301":0.26216,"20090901":NaN,"20140501":NaN,"19990301":0.25478,"20010601":0.2854,"19980901":0.27673,"20130401":NaN,"20120301":NaN,"20000401":0.14137,"20080301":NaN,"20090301":NaN,"20151001":NaN,"20040401":0.24439,"20031001":0.59272,"19990901":0.38035,"19980201":0.15665,"20030301":0.21072,"19990701":0.24095,"19980701":NaN,"20091201":NaN,"20051001":0.46315,"20051101":0.92986,"20161101":NaN,"20110301":NaN,"20050601":0.18778,"20160801":NaN};    
​
    var data5=
        {"20010701":0.11882,"20020701":0.20701,"20050701":0.18126,"20021001":0.085665,"20141001":0.059534,"20100101":0.26486,"19990201":0.18264,"19991001":0.060979,"20080401":0.1118,"20070501":0.16741,"20160301":0.15311,"20100901":0.06635,"20060301":0.14655,"20030701":0.16234,"20150801":0.099845,"20120401":0.11087,"20150201":0.31453,"20160901":NaN,"20140101":0.36045,"20090101":0.26439,"20081001":0.069273,"20040801":0.093908,"20050201":0.25418,"20120601":NaN,"20120801":NaN,"20040901":0.071661,"20080801":0.088255,"20050301":0.13193,"20000301":0.12148,"20060901":0.066916,"20010401":0.1014,"20061001":0.10627,"20020201":0.23729,"20070101":0.3119,"20081101":0.17188,"20130701":NaN,"20100501":0.11535,"20110501":0.10029,"20000701":NaN,"20110901":0.09436,"20090401":0.11089,"20150601":1.1707,"20080201":0.30446,"20110601":NaN,"20151101":0.11435,"19990801":NaN,"20160101":0.27034,"19980401":0.094675,"20130901":NaN,"20140201":0.25719,"20091101":0.34233,"20020501":0.10458,"20040701":0.14318,"20121201":0.17697,"20021101":0.22959,"20010801":NaN,"19991101":0.13909,"20080701":0.112,"20070201":0.25674,"20090701":0.15208,"20131001":0.068506,"20040301":0.16346,"20090601":0.22692,"20160401":0.10215,"20110201":0.20891,"20160701":0.08867,"20071101":0.11191,"20030401":0.12049,"20060201":0.18848,"20150101":0.24955,"20141101":0.12028,"20070801":0.098262,"20140601":0.089733,"20051201":0.28194,"20101201":0.20644,"20100601":NaN,"20001001":0.076473,"19981201":0.15129,"20020801":0.061142,"20001101":0.11098,"20041001":0.17195,"19990401":0.096438,"20120101":0.35291,"20000201":0.14274,"20080101":0.32936,"20141201":0.35491,"20060801":0.081407,"19990101":0.1853,"20030601":0.21488,"20140901":NaN,"20111101":0.21297,"20130601":0.09437,"20150501":0.088575,"20000601":0.085075,"20080501":0.11306,"20061101":0.33491,"20020901":0.054647,"20050401":0.12076,"20031201":0.25839,"20100201":0.20882,"20030801":0.1264,"20030101":0.21925,"20011201":0.18885,"19980501":0.084739,"20130801":0.1096,"20070601":0.16254,"20140301":0.15705,"20070701":0.1407,"20001201":0.183,"20040601":0.20446,"20121101":0.29604,"20050801":0.077702,"19990601":0.098195,"20060501":0.1087,"19981101":0.14456,"20000101":0.17057,"20130301":0.13201,"20161201":0.14963,"19991201":0.22073,"20101101":0.20229,"20010901":0.060456,"20121001":0.16821,"20080601":0.12322,"20081201":0.31568,"20131101":0.18138,"20110101":0.25508,"20040201":0.20816,"20160501":0.092456,"20000901":0.055631,"20071001":0.094551,"20060101":0.27888,"20030501":0.12979,"19971001":0.16996,"20110701":NaN,"20010101":0.21034,"20150901":0.065483,"20031101":0.16819,"20140701":NaN,"20100701":0.1642,"20140401":0.1181,"20020601":0.1577,"19980801":0.08994,"20041101":0.27603,"20130501":0.094383,"20120201":0.27099,"20000501":0.11736,"20120901":0.068831,"20090201":0.22032,"20040501":0.13486,"20070901":0.066386,"20100401":0.10447,"20120501":0.10898,"20111001":0.07728,"20030201":0.17771,"19980601":0.094112,"20060701":0.1478,"20111201":0.23929,"20130101":0.23666,"20120701":NaN,"20061201":0.25836,"20150401":0.093974,"19980101":0.14769,"20010501":0.091834,"20020101":0.22216,"20110401":0.10189,"20050501":0.11488,"19970901":0.056357,"20100301":0.15253,"20011101":0.17808,"20030901":0.080273,"20090501":0.10811,"20011001":0.063824,"19971201":0.16637,"20151201":0.16088,"20070401":0.12179,"20131201":0.27333,"19990501":0.093484,"20040101":0.30553,"20070301":0.1447,"20160201":0.15236,"20041201":0.2222,"20020401":0.10084,"20100801":0.087161,"20110801":0.089364,"20060601":0.13887,"20091001":0.099368,"20150301":0.13546,"20130201":0.2775,"20071201":0.22097,"20050901":0.06445,"20101001":0.070022,"20140801":NaN,"19981001":0.052773,"20060401":0.11239,"20160601":0.099118,"19980301":0.13507,"20161001":0.083635,"20050101":0.23772,"20021201":0.217,"20080901":0.062129,"20000801":NaN,"20150701":0.18621,"20010201":0.20078,"19971101":0.13519,"20090801":0.09017,"20010301":0.13528,"20020301":0.1533,"20090901":0.05987,"20140501":0.098217,"19990301":0.12258,"20010601":0.1449,"19980901":0.067279,"20130401":0.089445,"20120301":0.151,"20000401":0.13409,"20080301":0.18749,"20090301":0.15618,"20151001":0.079181,"20040401":0.11901,"20031001":0.14483,"19990901":0.065646,"19980201":0.14441,"20030301":0.13561,"19990701":NaN,"19980701":NaN,"20091201":0.23818,"20051001":0.07545,"20051101":0.11398,"20161101":0.20583,"20110301":0.14047,"20050601":0.11976,"20160801":0.053956};
    
    
    var annualdata= {"2016":-0.77301,"1999":-0.74511,"1998":-0.72017,"2002":1.0223,"2003":0.55844,"2000":-0.73087,"2001":-0.76497,"2006":0.69162,"2007":0.20109,"2004":0.34528,"2005":0.78647,"2015":-0.76297,"2014":-0.74665,"2008":1.4257,"2009":0.73305,"2011":0.83247,"2010":-0.034487,"2013":-0.73345,"2012":-0.58473};
    
    var monthlydata={"February":1.0286,"October":1.5025,"March":0.96157,"August":4.3034,"May":1.044,"January":0.97282,"June":2.7125,"September":1.7589,"April":-5.51,"December":1.1369,"July":5.0953,"November":1.2853};
    
function formatData(inputdata){
      var datajson=[];
      var keys = Object.keys(inputdata);
  //console.log(keys);
      keys.forEach(d => {  
          var date = d3.timeParse("%Y%m%d")(d);
          var t = [];
          t['date']= date;
          t['Value']= +inputdata[d];
          datajson.push(t);
     });
      return datajson;
 }   
    
 function formatData_annual(inputdata){
      var datajson=[];
      var keys = Object.keys(inputdata);
  //console.log(keys);
      keys.forEach(d => {  
          var date = d3.timeParse("%Y")(d);
          var t = [];
          t['date']= date;
          t['Value']= +inputdata[d];
          datajson.push(t);
     });
      return datajson;
 }  
function formatData_month(inputdata){
      var datajson=[];
      var keys = Object.keys(inputdata);
  // object which holds the order value of the month
var monthNames = {  "January": 1,  "February": 2,  "March": 3,  "April": 4,  "May": 5,  "June": 6,  "July": 7,  "August": 8,  "September": 9,  "October": 10,  "November": 11, "December": 12};
  function sort(a, b) {
    // Dates will be cast to numbers automatically:
    return monthNames[a] - monthNames[b];
}
  keys = keys.sort(sort);
      keys.forEach(d => {  
          var date = d3.timeParse("%B")(d);
          var t = [];
          t['date']= date;
          t['Value']= +inputdata[d];
          datajson.push(t);
     });
      return datajson;
 }
//console.log(formatData_month(monthlydata));
    linegraph_m(formatData(data3),formatData(data5),'#div1','%b %Y');
    linegraph(formatData_annual(annualdata),'#div2','%Y');
    linegraph(formatData_month(monthlydata),'#div3','%B');
    
​
​
    function roundToGrid(input, array) {
                var f= Math.floor(input);
            var decimal = (input - Math.floor(input)).toFixed(2);
                        let closest = array.sort( (a, b) => Math.abs(decimal - a) - Math.abs(decimal - b) )[0];
                return (f+closest).toFixed(2);
    }
    
        //console.log((roundToGrid(29.33, [0.14,0.47,0.81])));
    //console.log((roundToGrid(39.8, [0.18,0.52,0.85])));
  </script>
</body>
​
    