This two-value area chart is constructed from a TSV file storing the daily high and low temperature in San Francisco over the last two years. Data is from the National Climatic Data Center. The chart employs conventional margins and a number of D3 features:
xxxxxxxxxx<meta charset="utf-8"><style>body { font: 10px sans-serif;}.axis path,.axis line { fill: none; stroke: #000; shape-rendering: crispEdges;}.x.axis path { display: none;}.area { fill: steelblue;}</style><body><script src="//d3js.org/d3.v3.min.js"></script><script>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 area = d3.svg.area() .x(function(d) { return x(d.date); }) .y0(function(d) { return y(d.low); }) .y1(function(d) { return y(d.high); });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 + ")");d3.tsv("data.tsv", function(error, data) { if (error) throw error; data.forEach(function(d) { d.date = parseDate(d.date); d.low = +d.low; d.high = +d.high; }); x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([d3.min(data, function(d) { return d.low; }), d3.max(data, function(d) { return d.high; })]); svg.append("path") .datum(data) .attr("class", "area") .attr("d", area); 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)");});</script> https://d3js.org/d3.v3.min.js