line graph

forked from akiraandy's block: fresh block

forked from akiraandy's block: line graph

<!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>

  <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};

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>

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

https://code.jquery.com/jquery-3.1.1.js