| license: gpl-3.0 |
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
forked from andrewwitherspoon's block: Line Chart
| <!DOCTYPE html> | |
| <style> | |
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| #axios-stock-chart { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .domain { | |
| display: none; | |
| } | |
| .y-axis .tick:first-of-type line { | |
| stroke-width: 2px; | |
| } | |
| .tick line { | |
| stroke-width: 0.5px; | |
| } | |
| .tick text { | |
| font-family: 'gordita',helvetica,helvetica-neue,arial,sans-serif; | |
| fill: #848484; | |
| } | |
| .tick line{ | |
| stroke: #DCDCDC; | |
| } | |
| </style> | |
| <div id="axios-stock-chart"></div> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| // new axiosStockChart d3 module | |
| var axiosStockChart = function axiosStockChart(configObj) { | |
| var configObj = configObj, | |
| selector = configObj.selector || "#axios-stock-chart", | |
| margins = configObj.margins || {top: 20, right: 20, bottom: 30, left: 50}, | |
| aspectRatio = configObj.aspectRatio || 3.2, | |
| gGrid, // background | |
| gAxis, // mid-ground | |
| gLine, // foreground | |
| xScale = d3.scaleTime(), | |
| yScale = d3.scaleLinear(), | |
| dispatcher = d3.dispatch(['render']); | |
| function getData() { | |
| var dataUrl = configObj.dataUrl; | |
| d3.csv(dataUrl, function(data) { | |
| return cleanData(data); | |
| }, function(error, data) { | |
| console.log("error", error); | |
| console.log("data", data); | |
| renderChart(error, data); | |
| }) | |
| } | |
| dispatcher.on('render.data', getData) | |
| function cleanData(data) { | |
| data["UNIX Time"] = new Date(data["UNIX Time"] * 1000); | |
| data.Price = +data.Price; | |
| delete data[""]; | |
| return data; | |
| } | |
| function renderChart(error, data) { | |
| if (error) throw error; | |
| var width = d3.select("#axios-stock-chart").node().getBoundingClientRect().width - margins.left - margins.right; | |
| var height = (width / aspectRatio) - margins.top - margins.bottom; | |
| var svg = d3.select(selector) | |
| .append("svg") | |
| .style("width", width) | |
| .style("height", height + margins.top + margins.bottom) | |
| .data(data); | |
| var g = svg.append("g") | |
| .attr("transform", "translate(" + margins.left + "," + margins.top + ")"); | |
| xScale.rangeRound([0, width]) | |
| .domain(d3.extent(data, function(d) { return d["UNIX Time"]; })); | |
| yScale.rangeRound([height, 0]) | |
| .domain(d3.extent(data, function(d) { return d.Price; })) | |
| // .nice(); | |
| g.append("g") | |
| .attr("transform", "translate(0," + height + ")") | |
| .classed("x-axis", true) | |
| .call( | |
| d3.axisBottom(xScale) | |
| .tickSize(-height) | |
| ) | |
| g.append("g") | |
| .classed("y-axis", true) | |
| .call( | |
| d3.axisLeft(yScale) | |
| .tickSize(-width) | |
| ) | |
| .selectAll("line") | |
| .attr("x1",-6) | |
| g.selectAll(".y-axis text") | |
| .attr("x", -10); | |
| var line = d3.line() | |
| .x(function(d) { return xScale(d["UNIX Time"]); }) | |
| .y(function(d) { return yScale(d.Price); }); | |
| g.append("path") | |
| .datum(data) | |
| .attr("fill", "none") | |
| .attr("stroke", "#e74e29") | |
| .attr("stroke-linejoin", "round") | |
| .attr("stroke-linecap", "round") | |
| .attr("stroke-width", 2) | |
| .attr("d", line); | |
| } | |
| // function renderLegend() { | |
| // // | |
| // } | |
| // dispatcher.on('render.legend', renderLegend) | |
| document.addEventListener("resize", function() { | |
| dispatcher.call('render') | |
| }) | |
| dispatcher.call("render") | |
| } | |
| axiosStockChart({ | |
| dataUrl: "https://graphics.axios.com/line-chart-tool/data/one-day.csv" | |
| }); | |
| </script> |