This simple line chart is constructed from a TSV file storing the closing value of AAPL stock over the last few years. The chart employs conventional margins and a number of D3 features:
forked from mbostock's block: Line Chart
xxxxxxxxxx<meta charset="utf-8"><style>.axis--x path { display: none;} .axis--y path { display: none;}.line { fill: none; stroke: steelblue; stroke-width: 3px;} .area { fill: steelblue; stroke: steelblue; stroke-width: 3px; opacity: .2} </style><svg width="960" height="500"></svg><script src="https://d3js.org/d3.v4.min.js"></script><script>var svg = d3.select("svg"), margin = {top: 20, right: 20, bottom: 30, left: 50}, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom, g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");var parseTime = d3.timeParse("%d-%b-%y");var x = d3.scaleTime() .rangeRound([0, width]);var y = d3.scaleLinear() .rangeRound([height, 0]); var area = d3.area().curve(d3.curveBasis) .x(function(d) { return x(d.date); }) .y0(function(d) { return y(d.lower);}) .y1(function(d) { return y(d.upper); }); var line = d3.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.close); });d3.tsv("data.tsv", function(d) { d.date = parseTime(d.date); d.close = +d.close; return d;}, function(error, data) { if (error) throw error; data = data.map(function(d){ d.upper = Math.random()*100 + d.close; d.lower = Math.max(0,-Math.random()*100 + d.close); return d }) var extentDate = d3.extent(data, function(d) { return d.date; }) var releaseDate = new Date(2012,10,0); extentDate[1] = releaseDate; x.domain(extentDate); y.domain(d3.extent(data, function(d) { return d.close; })); g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x).tickFormat(d3.timeFormat('%b %Y'))); g.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(y)) .append("text") .attr("fill", "#000") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .style("text-anchor", "end") .text("Gross ($)"); g.append("path") .datum(data) .attr("class", "line") .attr("d", line); g.append("path") .datum(data) .attr("class", "area") .attr("d", area); g.append("line") .attr("x1", x(releaseDate)) .attr("y1", height) .attr("x2", x(releaseDate)) .attr("y2", height * 0.2) .attr("stroke-width", 2) .attr("stroke", "lightgray");var color = "gray";var triangleSize = 30;var triangle = d3.symbol() .type(d3.symbolTriangle) .size(triangleSize);g.append("path") .attr("d", triangle) .attr("stroke", color) .attr("fill", color) .attr("transform", function(d) { return "translate(" + x(releaseDate) + "," + height * 0.187 + ") rotate(180)"; });g.append("text") .text('Release Date') .attr("transform", function(d) { return "translate(" + x(new Date(2012,4,0)) + "," + height * 0.15 + ")"; });g.append("text") .text('Feb. 11') .attr("transform", function(d) { return "translate(" + x(new Date(2012,4,0)) + "," + height * 0.19 + ")"; }); });</script> https://d3js.org/d3.v4.min.js