2017-06-06 2 views
2

Ich zeichne zwei Linien überlappend (manchmal ist die erste höher, und manchmal hat die zweite einen höheren Wert auf der y-Achse) einander in d3.js. Ich möchte die Bereiche unter den Zeilen so ausfüllen, dass:Füllen von zwei überlappenden Bereichen in d3.js

  • Der Bereich unter dem unteren wird grau sein.
  • Der Bereich zwischen den beiden Linien wird entweder grün oder rot sein. Wenn die erste Zeile einen höheren Wert hat, wird sie grün und wenn die zweite einen höheren Wert hat, wird sie rot angezeigt.

For example

Vorerst nur habe ich dies:

var area = d3.area() 
      .curve(d3.curveBasis) 
      .x(function(d) { return margin.left + x(d.date); }) 
      .y0(margin.top + height) 
      .y1(function(d) { return y(d.value); }); 

Aber das funktioniert nicht, natürlich. Ich kenne gestapelte Flächendiagramme, aber ich denke, dass ich ein paar Tricks brauche, damit das funktioniert.

Antwort

1

Sie können es zwei Bereiche tun überlappende:

// a gray area which finish in the minimun data 
var greyArea = d3.svg.area() 
    .interpolate("basis") 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(Math.min(d["First Line"], d["Second Line"])); }); 

// a colored area which in the value of the first line 
var coloredArea = d3.svg.area() 
    .interpolate("basis") 
    .x(function(d) { return x(d.date); }) 
    .y1(function(d) { return y(d["First Line"]); }); 

dann ziehen sie mit,

svg.append("clipPath") 
    .attr("id", "clip-above") 
    .append("path") 
    .attr("d", coloredArea.y0(height)); 

svg.append("clipPath") 
    .attr("id", "clip-below") 
    .append("path") 
    .attr("d", coloredArea.y0(0)); 

svg.append("path") 
    .attr("class", "area below") 
    .attr("clip-path", "url(#clip-below)") 
    .attr("d", coloredArea.y0(function(d) { return y(d["Second Line"]); })); 

svg.append("path") 
    .attr("class", "area above") 
    .attr("clip-path", "url(#clip-above)") 
    .attr("d", coloredArea); 

svg.append("path") 
    .attr("class", "area gray") 
    .attr("d", greyArea.y0(height)); 

Arbeiten DemoJSFiddle Demo

var data = [{"date":"20111001","First Line":"63.4","Second Line":"62.7"},{"date":"20111002","First Line":"58.0","Second Line":"59.9"},{"date":"20111003","First Line":"53.3","Second Line":"59.1"},{"date":"20111004","First Line":"55.7","Second Line":"58.8"},{"date":"20111005","First Line":"64.2","Second Line":"58.7"},{"date":"20111006","First Line":"58.8","Second Line":"57.0"},{"date":"20111007","First Line":"57.9","Second Line":"56.7"},{"date":"20111008","First Line":"61.8","Second Line":"56.8"},{"date":"20111009","First Line":"69.3","Second Line":"56.7"},{"date":"20111010","First Line":"71.2","Second Line":"60.1"},{"date":"20111011","First Line":"68.7","Second Line":"61.1"},{"date":"20111012","First Line":"61.8","Second Line":"61.5"},{"date":"20111013","First Line":"63.0","Second Line":"64.3"},{"date":"20111014","First Line":"66.9","Second Line":"67.1"},{"date":"20111015","First Line":"61.7","Second Line":"64.6"},{"date":"20111016","First Line":"61.8","Second Line":"61.6"},{"date":"20111017","First Line":"62.8","Second Line":"61.1"},{"date":"20111018","First Line":"60.8","Second Line":"59.2"},{"date":"20111019","First Line":"62.1","Second Line":"58.9"},{"date":"20111020","First Line":"65.1","Second Line":"57.2"},{"date":"20111021","First Line":"55.6","Second Line":"56.4"},{"date":"20111022","First Line":"54.4","Second Line":"60.7"},{"date":"20111023","First Line":"54.4","Second Line":"65.1"},{"date":"20111024","First Line":"54.8","Second Line":"60.9"},{"date":"20111025","First Line":"57.9","Second Line":"56.1"},{"date":"20111026","First Line":"54.6","Second Line":"54.6"},{"date":"20111027","First Line":"54.4","Second Line":"56.1"},{"date":"20111028","First Line":"42.5","Second Line":"58.1"},{"date":"20111029","First Line":"40.9","Second Line":"57.5"},{"date":"20111030","First Line":"38.6","Second Line":"57.7"},{"date":"20111031","First Line":"44.2","Second Line":"55.1"},{"date":"20111101","First Line":"49.6","Second Line":"57.9"},{"date":"20111102","First Line":"47.2","Second Line":"64.6"},{"date":"20111103","First Line":"50.1","Second Line":"56.2"},{"date":"20111104","First Line":"50.1","Second Line":"50.5"},{"date":"20111105","First Line":"43.5","Second Line":"51.3"},{"date":"20111106","First Line":"43.8","Second Line":"52.6"},{"date":"20111107","First Line":"48.9","Second Line":"51.4"},{"date":"20111108","First Line":"55.5","Second Line":"50.6"},{"date":"20111109","First Line":"53.7","Second Line":"54.6"},{"date":"20111110","First Line":"57.7","Second Line":"55.6"},{"date":"20111111","First Line":"48.5","Second Line":"53.9"},{"date":"20111112","First Line":"46.8","Second Line":"54.0"},{"date":"20111113","First Line":"51.1","Second Line":"53.8"},{"date":"20111114","First Line":"56.8","Second Line":"53.5"},{"date":"20111115","First Line":"59.7","Second Line":"53.4"},{"date":"20111116","First Line":"56.5","Second Line":"52.2"},{"date":"20111117","First Line":"49.6","Second Line":"52.7"},{"date":"20111118","First Line":"41.5","Second Line":"53.1"},{"date":"20111119","First Line":"44.3","Second Line":"49.0"},{"date":"20111120","First Line":"54.0","Second Line":"50.4"},{"date":"20111121","First Line":"54.1","Second Line":"51.1"},{"date":"20111122","First Line":"49.4","Second Line":"52.3"},{"date":"20111123","First Line":"50.0","Second Line":"54.6"},{"date":"20111124","First Line":"44.0","Second Line":"55.1"},{"date":"20111125","First Line":"50.3","Second Line":"51.5"},{"date":"20111126","First Line":"52.1","Second Line":"53.6"},{"date":"20111127","First Line":"49.6","Second Line":"52.3"},{"date":"20111128","First Line":"57.2","Second Line":"51.0"},{"date":"20111129","First Line":"59.1","Second Line":"49.5"},{"date":"20111130","First Line":"50.6","Second Line":"49.8"},{"date":"20111201","First Line":"44.3","Second Line":"60.4"},{"date":"20111202","First Line":"43.9","Second Line":"62.2"},{"date":"20111203","First Line":"42.1","Second Line":"58.3"},{"date":"20111204","First Line":"43.9","Second Line":"52.7"},{"date":"20111205","First Line":"50.2","Second Line":"51.5"},{"date":"20111206","First Line":"54.2","Second Line":"49.9"},{"date":"20111207","First Line":"54.6","Second Line":"48.6"},{"date":"20111208","First Line":"43.4","Second Line":"46.4"},{"date":"20111209","First Line":"42.2","Second Line":"49.8"},{"date":"20111210","First Line":"45.0","Second Line":"52.1"},{"date":"20111211","First Line":"33.8","Second Line":"48.8"},{"date":"20111212","First Line":"36.8","Second Line":"47.4"},{"date":"20111213","First Line":"38.6","Second Line":"47.2"},{"date":"20111214","First Line":"41.9","Second Line":"46.1"},{"date":"20111215","First Line":"49.6","Second Line":"48.8"},{"date":"20111216","First Line":"50.2","Second Line":"47.9"},{"date":"20111217","First Line":"40.6","Second Line":"49.8"},{"date":"20111218","First Line":"29.1","Second Line":"49.1"},{"date":"20111219","First Line":"33.7","Second Line":"48.3"},{"date":"20111220","First Line":"45.8","Second Line":"49.3"},{"date":"20111221","First Line":"47.4","Second Line":"48.4"},{"date":"20111222","First Line":"54.4","Second Line":"53.3"},{"date":"20111223","First Line":"47.8","Second Line":"47.5"},{"date":"20111224","First Line":"34.9","Second Line":"47.9"},{"date":"20111225","First Line":"35.9","Second Line":"48.9"},{"date":"20111226","First Line":"43.6","Second Line":"45.9"},{"date":"20111227","First Line":"42.9","Second Line":"47.2"},{"date":"20111228","First Line":"46.2","Second Line":"48.9"},{"date":"20111229","First Line":"30.8","Second Line":"50.9"},{"date":"20111230","First Line":"40.8","Second Line":"52.9"},{"date":"20111231","First Line":"49.8","Second Line":"50.1"},{"date":"20120101","First Line":"46.3","Second Line":"53.9"},{"date":"20120102","First Line":"43.2","Second Line":"53.1"},{"date":"20120103","First Line":"30.3","Second Line":"49.7"},{"date":"20120104","First Line":"19.2","Second Line":"52.7"},{"date":"20120105","First Line":"32.1","Second Line":"52.6"},{"date":"20120106","First Line":"41.2","Second Line":"49.0"},{"date":"20120107","First Line":"47.0","Second Line":"51.0"},{"date":"20120108","First Line":"46.0","Second Line":"56.8"},{"date":"20120109","First Line":"34.7","Second Line":"52.3"},{"date":"20120110","First Line":"39.4","Second Line":"51.6"},{"date":"20120111","First Line":"40.4","Second Line":"49.8"},{"date":"20120112","First Line":"45.4","Second Line":"51.9"},{"date":"20120113","First Line":"40.7","Second Line":"53.7"},{"date":"20120114","First Line":"30.4","Second Line":"52.9"},{"date":"20120115","First Line":"23.9","Second Line":"49.7"},{"date":"20120116","First Line":"22.6","Second Line":"45.3"},{"date":"20120117","First Line":"39.8","Second Line":"43.6"},{"date":"20120118","First Line":"43.2","Second Line":"45.0"},{"date":"20120119","First Line":"26.3","Second Line":"47.3"},{"date":"20120120","First Line":"32.8","Second Line":"51.4"},{"date":"20120121","First Line":"27.4","Second Line":"53.7"},{"date":"20120122","First Line":"25.0","Second Line":"48.3"},{"date":"20120123","First Line":"39.4","Second Line":"52.9"},{"date":"20120124","First Line":"48.7","Second Line":"49.1"},{"date":"20120125","First Line":"43.0","Second Line":"52.1"},{"date":"20120126","First Line":"37.1","Second Line":"53.6"},{"date":"20120127","First Line":"48.2","Second Line":"50.4"},{"date":"20120128","First Line":"43.7","Second Line":"50.3"},{"date":"20120129","First Line":"40.1","Second Line":"53.8"},{"date":"20120130","First Line":"38.0","Second Line":"51.9"},{"date":"20120131","First Line":"43.5","Second Line":"50.0"},{"date":"20120201","First Line":"50.4","Second Line":"50.0"},{"date":"20120202","First Line":"45.8","Second Line":"51.3"},{"date":"20120203","First Line":"37.5","Second Line":"51.5"},{"date":"20120204","First Line":"40.8","Second Line":"52.0"},{"date":"20120205","First Line":"36.5","Second Line":"53.8"},{"date":"20120206","First Line":"39.1","Second Line":"54.6"},{"date":"20120207","First Line":"43.2","Second Line":"54.3"},{"date":"20120208","First Line":"36.5","Second Line":"51.9"},{"date":"20120209","First Line":"36.5","Second Line":"53.8"},{"date":"20120210","First Line":"38.3","Second Line":"53.9"},{"date":"20120211","First Line":"36.9","Second Line":"52.3"},{"date":"20120212","First Line":"29.7","Second Line":"50.1"},{"date":"20120213","First Line":"33.1","Second Line":"49.5"},{"date":"20120214","First Line":"39.6","Second Line":"48.6"},{"date":"20120215","First Line":"42.3","Second Line":"49.9"},{"date":"20120216","First Line":"39.7","Second Line":"52.4"},{"date":"20120217","First Line":"46.0","Second Line":"49.9"},{"date":"20120218","First Line":"41.2","Second Line":"51.6"},{"date":"20120219","First Line":"39.8","Second Line":"47.8"},{"date":"20120220","First Line":"38.1","Second Line":"48.7"},{"date":"20120221","First Line":"37.1","Second Line":"49.7"},{"date":"20120222","First Line":"45.5","Second Line":"53.4"},{"date":"20120223","First Line":"50.6","Second Line":"54.1"},{"date":"20120224","First Line":"42.7","Second Line":"55.9"},{"date":"20120225","First Line":"42.6","Second Line":"51.7"},{"date":"20120226","First Line":"36.9","Second Line":"47.7"},{"date":"20120227","First Line":"40.9","Second Line":"45.4"},{"date":"20120228","First Line":"45.9","Second Line":"47.0"},{"date":"20120229","First Line":"40.7","Second Line":"49.8"},{"date":"20120301","First Line":"41.3","Second Line":"48.9"},{"date":"20120302","First Line":"36.8","Second Line":"48.1"},{"date":"20120303","First Line":"47.6","Second Line":"50.7"},{"date":"20120304","First Line":"44.2","Second Line":"55.0"},{"date":"20120305","First Line":"38.5","Second Line":"48.8"},{"date":"20120306","First Line":"32.9","Second Line":"48.4"},{"date":"20120307","First Line":"43.3","Second Line":"49.9"},{"date":"20120308","First Line":"51.2","Second Line":"49.2"},{"date":"20120309","First Line":"47.8","Second Line":"51.7"},{"date":"20120310","First Line":"37.2","Second Line":"49.3"},{"date":"20120311","First Line":"42.9","Second Line":"50.0"},{"date":"20120312","First Line":"48.8","Second Line":"48.6"},{"date":"20120313","First Line":"52.6","Second Line":"53.9"},{"date":"20120314","First Line":"60.5","Second Line":"55.2"},{"date":"20120315","First Line":"47.2","Second Line":"55.9"},{"date":"20120316","First Line":"44.7","Second Line":"54.6"},{"date":"20120317","First Line":"48.2","Second Line":"48.2"},{"date":"20120318","First Line":"48.2","Second Line":"47.1"},{"date":"20120319","First Line":"53.1","Second Line":"45.8"},{"date":"20120320","First Line":"57.8","Second Line":"49.7"},{"date":"20120321","First Line":"57.5","Second Line":"51.4"},{"date":"20120322","First Line":"57.3","Second Line":"51.4"},{"date":"20120323","First Line":"61.7","Second Line":"48.4"},{"date":"20120324","First Line":"55.8","Second Line":"49.0"},{"date":"20120325","First Line":"48.4","Second Line":"46.4"},{"date":"20120326","First Line":"49.8","Second Line":"49.7"},{"date":"20120327","First Line":"39.6","Second Line":"54.1"},{"date":"20120328","First Line":"49.7","Second Line":"54.6"},{"date":"20120329","First Line":"56.8","Second Line":"52.3"},{"date":"20120330","First Line":"46.5","Second Line":"54.5"},{"date":"20120331","First Line":"42.2","Second Line":"56.2"},{"date":"20120401","First Line":"45.3","Second Line":"51.1"},{"date":"20120402","First Line":"48.1","Second Line":"50.5"},{"date":"20120403","First Line":"51.2","Second Line":"52.2"},{"date":"20120404","First Line":"61.0","Second Line":"50.6"},{"date":"20120405","First Line":"50.7","Second Line":"47.9"},{"date":"20120406","First Line":"48.0","Second Line":"47.4"},{"date":"20120407","First Line":"51.1","Second Line":"49.4"},{"date":"20120408","First Line":"55.7","Second Line":"50.0"},{"date":"20120409","First Line":"58.3","Second Line":"51.3"},{"date":"20120410","First Line":"55.0","Second Line":"53.8"},{"date":"20120411","First Line":"49.0","Second Line":"52.9"},{"date":"20120412","First Line":"51.7","Second Line":"53.9"},{"date":"20120413","First Line":"53.1","Second Line":"50.2"},{"date":"20120414","First Line":"55.2","Second Line":"50.9"},{"date":"20120415","First Line":"62.3","Second Line":"51.5"},{"date":"20120416","First Line":"62.9","Second Line":"51.9"},{"date":"20120417","First Line":"69.3","Second Line":"53.2"},{"date":"20120418","First Line":"59.0","Second Line":"53.0"},{"date":"20120419","First Line":"54.1","Second Line":"55.1"},{"date":"20120420","First Line":"56.5","Second Line":"55.8"},{"date":"20120421","First Line":"58.2","Second Line":"58.0"},{"date":"20120422","First Line":"52.4","Second Line":"52.8"},{"date":"20120423","First Line":"51.6","Second Line":"55.1"},{"date":"20120424","First Line":"49.3","Second Line":"57.9"},{"date":"20120425","First Line":"52.5","Second Line":"57.5"},{"date":"20120426","First Line":"50.5","Second Line":"55.3"},{"date":"20120427","First Line":"51.9","Second Line":"53.5"},{"date":"20120428","First Line":"47.4","Second Line":"54.7"},{"date":"20120429","First Line":"54.1","Second Line":"54.0"},{"date":"20120430","First Line":"51.9","Second Line":"53.4"},{"date":"20120501","First Line":"57.4","Second Line":"52.7"},{"date":"20120502","First Line":"53.7","Second Line":"50.7"},{"date":"20120503","First Line":"53.1","Second Line":"52.6"},{"date":"20120504","First Line":"57.2","Second Line":"53.4"},{"date":"20120505","First Line":"57.0","Second Line":"53.1"},{"date":"20120506","First Line":"56.6","Second Line":"56.5"},{"date":"20120507","First Line":"54.6","Second Line":"55.3"},{"date":"20120508","First Line":"57.9","Second Line":"52.0"},{"date":"20120509","First Line":"59.2","Second Line":"52.4"},{"date":"20120510","First Line":"61.1","Second Line":"53.4"},{"date":"20120511","First Line":"59.7","Second Line":"53.1"},{"date":"20120512","First Line":"64.1","Second Line":"49.9"},{"date":"20120513","First Line":"65.3","Second Line":"52.0"},{"date":"20120514","First Line":"64.2","Second Line":"56.0"},{"date":"20120515","First Line":"62.0","Second Line":"53.0"},{"date":"20120516","First Line":"63.8","Second Line":"51.0"},{"date":"20120517","First Line":"64.5","Second Line":"51.4"},{"date":"20120518","First Line":"61.0","Second Line":"52.2"},{"date":"20120519","First Line":"62.6","Second Line":"52.4"},{"date":"20120520","First Line":"66.2","Second Line":"54.5"},{"date":"20120521","First Line":"62.7","Second Line":"52.8"},{"date":"20120522","First Line":"63.7","Second Line":"53.9"},{"date":"20120523","First Line":"66.4","Second Line":"56.5"},{"date":"20120524","First Line":"64.5","Second Line":"54.7"},{"date":"20120525","First Line":"65.4","Second Line":"52.5"},{"date":"20120526","First Line":"69.4","Second Line":"52.1"},{"date":"20120527","First Line":"71.9","Second Line":"52.2"},{"date":"20120528","First Line":"74.4","Second Line":"52.9"},{"date":"20120529","First Line":"75.9","Second Line":"52.1"},{"date":"20120530","First Line":"72.9","Second Line":"52.1"},{"date":"20120531","First Line":"72.5","Second Line":"53.3"},{"date":"20120601","First Line":"67.2","Second Line":"54.8"},{"date":"20120602","First Line":"68.3","Second Line":"54.0"},{"date":"20120603","First Line":"67.7","Second Line":"52.3"},{"date":"20120604","First Line":"61.9","Second Line":"55.3"},{"date":"20120605","First Line":"58.3","Second Line":"53.5"},{"date":"20120606","First Line":"61.7","Second Line":"54.1"},{"date":"20120607","First Line":"66.7","Second Line":"53.9"},{"date":"20120608","First Line":"68.7","Second Line":"54.4"},{"date":"20120609","First Line":"72.2","Second Line":"55.0"},{"date":"20120610","First Line":"72.6","Second Line":"60.0"},{"date":"20120611","First Line":"69.2","Second Line":"57.2"},{"date":"20120612","First Line":"66.9","Second Line":"55.1"},{"date":"20120613","First Line":"66.7","Second Line":"53.3"},{"date":"20120614","First Line":"67.7","Second Line":"53.4"},{"date":"20120615","First Line":"68.5","Second Line":"54.6"},{"date":"20120616","First Line":"67.5","Second Line":"57.0"},{"date":"20120617","First Line":"64.2","Second Line":"55.6"},{"date":"20120618","First Line":"61.7","Second Line":"52.5"},{"date":"20120619","First Line":"66.4","Second Line":"53.9"},{"date":"20120620","First Line":"77.9","Second Line":"55.3"},{"date":"20120621","First Line":"88.3","Second Line":"53.3"},{"date":"20120622","First Line":"82.2","Second Line":"54.1"},{"date":"20120623","First Line":"77.0","Second Line":"55.2"},{"date":"20120624","First Line":"75.4","Second Line":"55.8"},{"date":"20120625","First Line":"70.9","Second Line":"56.8"},{"date":"20120626","First Line":"65.9","Second Line":"57.5"},{"date":"20120627","First Line":"73.5","Second Line":"57.7"},{"date":"20120628","First Line":"77.4","Second Line":"56.6"},{"date":"20120629","First Line":"79.6","Second Line":"56.4"},{"date":"20120630","First Line":"84.2","Second Line":"58.4"},{"date":"20120701","First Line":"81.8","Second Line":"58.8"},{"date":"20120702","First Line":"82.5","Second Line":"56.4"},{"date":"20120703","First Line":"80.2","Second Line":"56.5"},{"date":"20120704","First Line":"77.8","Second Line":"55.8"},{"date":"20120705","First Line":"86.1","Second Line":"54.8"},{"date":"20120706","First Line":"79.9","Second Line":"54.9"},{"date":"20120707","First Line":"83.5","Second Line":"54.7"},{"date":"20120708","First Line":"81.5","Second Line":"52.8"},{"date":"20120709","First Line":"77.8","Second Line":"53.7"},{"date":"20120710","First Line":"76.1","Second Line":"53.1"},{"date":"20120711","First Line":"76.3","Second Line":"52.7"},{"date":"20120712","First Line":"75.8","Second Line":"52.0"},{"date":"20120713","First Line":"77.2","Second Line":"53.4"},{"date":"20120714","First Line":"79.3","Second Line":"54.0"},{"date":"20120715","First Line":"78.9","Second Line":"54.0"},{"date":"20120716","First Line":"79.6","Second Line":"54.5"},{"date":"20120717","First Line":"83.3","Second Line":"56.7"},{"date":"20120718","First Line":"84.3","Second Line":"57.5"},{"date":"20120719","First Line":"75.1","Second Line":"57.1"},{"date":"20120720","First Line":"68.4","Second Line":"58.1"},{"date":"20120721","First Line":"68.4","Second Line":"57.6"},{"date":"20120722","First Line":"72.2","Second Line":"56.0"},{"date":"20120723","First Line":"75.6","Second Line":"56.6"},{"date":"20120724","First Line":"82.6","Second Line":"57.8"},{"date":"20120725","First Line":"78.4","Second Line":"57.5"},{"date":"20120726","First Line":"77.0","Second Line":"56.4"},{"date":"20120727","First Line":"79.4","Second Line":"55.3"},{"date":"20120728","First Line":"77.4","Second Line":"55.0"},{"date":"20120729","First Line":"72.5","Second Line":"55.6"},{"date":"20120730","First Line":"72.9","Second Line":"55.6"},{"date":"20120731","First Line":"73.6","Second Line":"55.9"},{"date":"20120801","First Line":"75.0","Second Line":"55.4"},{"date":"20120802","First Line":"77.7","Second Line":"54.4"},{"date":"20120803","First Line":"79.7","Second Line":"53.7"},{"date":"20120804","First Line":"79.6","Second Line":"54.1"},{"date":"20120805","First Line":"81.5","Second Line":"57.8"},{"date":"20120806","First Line":"80.0","Second Line":"58.2"},{"date":"20120807","First Line":"75.7","Second Line":"58.0"},{"date":"20120808","First Line":"77.8","Second Line":"57.0"},{"date":"20120809","First Line":"78.6","Second Line":"55.0"},{"date":"20120810","First Line":"77.8","Second Line":"54.8"},{"date":"20120811","First Line":"78.5","Second Line":"53.0"},{"date":"20120812","First Line":"78.8","Second Line":"52.5"},{"date":"20120813","First Line":"78.6","Second Line":"53.3"},{"date":"20120814","First Line":"76.8","Second Line":"53.9"},{"date":"20120815","First Line":"76.7","Second Line":"56.2"},{"date":"20120816","First Line":"75.9","Second Line":"57.1"},{"date":"20120817","First Line":"77.6","Second Line":"55.3"},{"date":"20120818","First Line":"72.6","Second Line":"56.2"},{"date":"20120819","First Line":"70.4","Second Line":"54.3"},{"date":"20120820","First Line":"71.8","Second Line":"53.1"},{"date":"20120821","First Line":"73.6","Second Line":"53.4"},{"date":"20120822","First Line":"74.7","Second Line":"54.5"},{"date":"20120823","First Line":"74.6","Second Line":"55.7"},{"date":"20120824","First Line":"76.0","Second Line":"54.8"},{"date":"20120825","First Line":"76.2","Second Line":"53.8"},{"date":"20120826","First Line":"73.4","Second Line":"56.5"},{"date":"20120827","First Line":"74.6","Second Line":"58.3"},{"date":"20120828","First Line":"79.4","Second Line":"58.7"},{"date":"20120829","First Line":"74.7","Second Line":"57.5"},{"date":"20120830","First Line":"73.5","Second Line":"55.9"},{"date":"20120831","First Line":"77.9","Second Line":"55.4"},{"date":"20120901","First Line":"80.7","Second Line":"55.7"},{"date":"20120902","First Line":"75.1","Second Line":"53.1"},{"date":"20120903","First Line":"73.5","Second Line":"53.5"},{"date":"20120904","First Line":"73.5","Second Line":"52.5"},{"date":"20120905","First Line":"77.7","Second Line":"54.5"},{"date":"20120906","First Line":"74.2","Second Line":"56.3"},{"date":"20120907","First Line":"76.0","Second Line":"56.4"},{"date":"20120908","First Line":"77.1","Second Line":"56.5"},{"date":"20120909","First Line":"69.7","Second Line":"56.4"},{"date":"20120910","First Line":"67.8","Second Line":"55.4"},{"date":"20120911","First Line":"64.0","Second Line":"56.2"},{"date":"20120912","First Line":"68.1","Second Line":"55.7"},{"date":"20120913","First Line":"69.3","Second Line":"54.3"},{"date":"20120914","First Line":"70.0","Second Line":"55.2"},{"date":"20120915","First Line":"69.3","Second Line":"54.3"},{"date":"20120916","First Line":"66.3","Second Line":"52.9"},{"date":"20120917","First Line":"67.0","Second Line":"54.8"},{"date":"20120918","First Line":"72.8","Second Line":"54.8"},{"date":"20120919","First Line":"67.2","Second Line":"56.8"},{"date":"20120920","First Line":"62.1","Second Line":"55.4"},{"date":"20120921","First Line":"64.0","Second Line":"55.8"},{"date":"20120922","First Line":"65.5","Second Line":"55.9"},{"date":"20120923","First Line":"65.7","Second Line":"52.8"},{"date":"20120924","First Line":"60.4","Second Line":"54.5"},{"date":"20120925","First Line":"63.2","Second Line":"53.3"},{"date":"20120926","First Line":"68.5","Second Line":"53.6"},{"date":"20120927","First Line":"69.2","Second Line":"52.1"},{"date":"20120928","First Line":"68.7","Second Line":"52.6"},{"date":"20120929","First Line":"62.5","Second Line":"53.9"},{"date":"20120930","First Line":"62.3","Second Line":"55.1"}]; 
 

 
var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
 
    width = 960 - margin.left - margin.right, 
 
    height = 500 - margin.top - margin.bottom; 
 

 
var parseDate = d3.time.format("%Y%m%d").parse; 
 

 
var x = d3.time.scale() 
 
    .range([0, width]); 
 

 
var y = d3.scale.linear() 
 
    .range([height, 0]); 
 

 
var xAxis = d3.svg.axis() 
 
    .scale(x) 
 
    .orient("bottom"); 
 

 
var yAxis = d3.svg.axis() 
 
    .scale(y) 
 
    .orient("left"); 
 

 
var line = d3.svg.area() 
 
    .interpolate("basis") 
 
    .x(function(d) { return x(d.date); }) 
 
    .y(function(d) { return y(Math.min(d["First Line"], d["Second Line"])); }); 
 

 
var area = d3.svg.area() 
 
    .interpolate("basis") 
 
    .x(function(d) { return x(d.date); }) 
 
    .y1(function(d) { return y(d["First Line"]); }); 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 
    
 
data.forEach(function(d) { 
 
    d.date = parseDate(d.date); 
 
    d["First Line"]= +d["First Line"]; 
 
    d["Second Line"] = +d["Second Line"]; 
 
}); 
 

 
x.domain(d3.extent(data, function(d) { return d.date; })); 
 

 
y.domain([ 
 
    d3.min(data, function(d) { return Math.min(d["First Line"], d["Second Line"]); }), 
 
    d3.max(data, function(d) { return Math.max(d["First Line"], d["Second Line"]); }) 
 
]); 
 

 
svg.datum(data); 
 

 
svg.append("clipPath") 
 
    .attr("id", "clip-above") 
 
    .append("path") 
 
    .attr("d", area.y0(height)); 
 

 
svg.append("clipPath") 
 
    .attr("id", "clip-below") 
 
    .append("path") 
 
    .attr("d", area.y0(0)); 
 

 
svg.append("path") 
 
    .attr("class", "area below") 
 
    .attr("clip-path", "url(#clip-below)") 
 
    .attr("d", area.y0(function(d) { return y(d["Second Line"]); })); 
 

 
svg.append("path") 
 
    .attr("class", "area above") 
 
    .attr("clip-path", "url(#clip-above)") 
 
    .attr("d", area); 
 

 
svg.append("path") 
 
    .attr("class", "line") 
 
    .attr("d", line.y0(height)); 
 

 
svg.append("g") 
 
    .attr("class", "x axis") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(xAxis); 
 

 
svg.append("g") 
 
    .attr("class", "y axis") 
 
    .call(yAxis) 
 
    .append("text") 
 
    .attr("transform", "rotate(-90)") 
 
    .attr("y", 6) 
 
    .attr("dy", ".71em") 
 
    .style("text-anchor", "end") 
 
    .text("Temperature (ºF)");
body { 
 
    font: 10px sans-serif; 
 
} 
 

 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
} 
 

 
.x.axis path { 
 
    /*display: none;*/ 
 
} 
 

 
.area.below { 
 
    fill: rgb(252,141,89); 
 
    stroke: #000; 
 
    stroke-width: 1px; 
 
} 
 

 
.area.above { 
 
    fill: rgb(145,207,96); 
 
    stroke: #000; 
 
    stroke-width: 1px; 
 
} 
 

 
.line { 
 
    fill: #ccc; 
 
    stroke: #000; 
 
    stroke-width: 0.5px; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="chart"></div>