This example of d3-template is combining the approaches of:
| .unselect { | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| div.chart { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| pre#data { | |
| display:none; | |
| } | |
| div.center { | |
| width: 850px; | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| svg.Chart { | |
| display: block; | |
| margin: auto; | |
| } |
| var reUsableChart = function(_myData) { | |
| "use strict"; | |
| var file; // reference to data (embedded or in file) | |
| var margin = {top: 20, right: 20, bottom: 20, left: 20}, | |
| width = 760, | |
| height = 120, | |
| xValue = function(d) { return d[0]; }, | |
| yValue = function(d) { return d[1]; }, | |
| xScale = d3.time.scale(), | |
| yScale = d3.scale.linear(), | |
| xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(6, 0), | |
| area = d3.svg.area().x(X).y1(Y), | |
| line = d3.svg.line().x(X).y(Y); | |
| // 0.1 functions for external access | |
| function chartAPI(selection) { | |
| selection.each( function (d) { | |
| console.log(d); | |
| console.log("_myData "+ _myData); | |
| if (typeof d !== 'undefined') { // data processing from outside | |
| createChart(selection, d); | |
| } | |
| else { // data processing here | |
| if (typeof _myData !== 'undefined') { | |
| readData(_myData, selection); | |
| } | |
| else { | |
| readData("<pre>", selection); | |
| } | |
| } | |
| }); | |
| } | |
| // API - example for getter-setter method | |
| chartAPI.barHeight = function (_barHeight) { | |
| if (!arguments.length) { | |
| return myHeight; | |
| } | |
| myHeight = _barHeight; | |
| return chart; | |
| }; | |
| // 0.2 XHR to load data | |
| function readData(csvFile, selection) { | |
| if (csvFile !== "<pre>") { | |
| d3.csv(csvFile, convertToNumber, function(error, f) { | |
| createChart(selection, f); | |
| }); | |
| } | |
| else { | |
| file = d3.csv.parse(d3.select("pre#data").text()); | |
| file.forEach( function (row) { | |
| convertToNumber(row); | |
| }); | |
| console.log(file); | |
| createChart(selection, file); | |
| } | |
| } | |
| // 0.3 helper for XHR in 0.2 | |
| function convertToNumber(d) { | |
| for (var perm in d) { | |
| if (Object.prototype.hasOwnProperty.call(d, perm)) { | |
| d[perm] = +d[perm]; | |
| } | |
| } | |
| return d; | |
| } | |
| function createChart(selection, _file) { | |
| var data = _file; | |
| selection.each(function () { | |
| // Convert data to standard representation greedily; | |
| // this is needed for nondeterministic accessors. | |
| data = data.map(function(d, i) { | |
| return [xValue.call(data, d, i), yValue.call(data, d, i)]; | |
| }); | |
| // Update the x-scale. | |
| xScale | |
| .domain(d3.extent(data, function(d) { return d[0]; })) | |
| .range([0, width - margin.left - margin.right]); | |
| // Update the y-scale. | |
| yScale | |
| .domain([0, d3.max(data, function(d) { return d[1]; })]) | |
| .range([height - margin.top - margin.bottom, 0]); | |
| // Select the svg element, if it exists. | |
| var svg = d3.select(this).selectAll("svg").data([data]); | |
| // Otherwise, create the skeletal chart. | |
| var gEnter = svg.enter().append("svg").append("g"); | |
| gEnter.append("path").attr("class", "area"); | |
| gEnter.append("path").attr("class", "line"); | |
| gEnter.append("g").attr("class", "x axis"); | |
| // Update the outer dimensions. | |
| svg .attr("width", width) | |
| .attr("height", height); | |
| // Update the inner dimensions. | |
| var g = svg.select("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| // Update the area path. | |
| g.select(".area") | |
| .attr("d", area.y0(yScale.range()[0])); | |
| // Update the line path. | |
| g.select(".line") | |
| .attr("d", line); | |
| // Update the x-axis. | |
| g.select(".x.axis") | |
| .attr("transform", "translate(0," + yScale.range()[0] + ")") | |
| .call(xAxis); | |
| }); | |
| } | |
| // The x-accessor for the path generator; xScale ° xValue. | |
| function X(d) { | |
| return xScale(d[0]); | |
| } | |
| // The x-accessor for the path generator; yScale ° yValue. | |
| function Y(d) { | |
| return yScale(d[1]); | |
| } | |
| chartAPI.margin = function(_) { | |
| if (!arguments.length) return margin; | |
| margin = _; | |
| return chartAPI; | |
| }; | |
| chartAPI.width = function(_) { | |
| if (!arguments.length) return width; | |
| width = _; | |
| return chartAPI; | |
| }; | |
| chartAPI.height = function(_) { | |
| if (!arguments.length) return height; | |
| height = _; | |
| return chartAPI; | |
| }; | |
| chartAPI.x = function(_) { | |
| if (!arguments.length) return xValue; | |
| xValue = _; | |
| return chartAPI; | |
| }; | |
| chartAPI.y = function(_) { | |
| if (!arguments.length) return yValue; | |
| yValue = _; | |
| return chartAPI; | |
| }; | |
| return chartAPI; | |
| }; |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> <!-- also save this file as unicode-8 ! --> | |
| <head> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <link rel="stylesheet" type="text/css" href="d3_template_reusable.css"> | |
| <script src="d3_template_reusable.js"></script> | |
| <style> | |
| .area { | |
| fill: steelblue; | |
| } | |
| .line { | |
| fill: none; | |
| stroke: #000; | |
| stroke-width: 1.5px; | |
| } | |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| svg { | |
| font: 10px sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- A: paste data in pre tag --> | |
| <pre id="data"> | |
| date,price | |
| Jan 2000,1394.46 | |
| Feb 2000,1366.42 | |
| Mar 2000,1498.58 | |
| Apr 2000,1452.43 | |
| May 2000,1420.6 | |
| Jun 2000,1454.6 | |
| Jul 2000,1430.83 | |
| Aug 2000,1517.68 | |
| Sep 2000,1436.51 | |
| Oct 2000,1429.4 | |
| Nov 2000,1314.95 | |
| Dec 2000,1320.28 | |
| Jan 2001,1366.01 | |
| Feb 2001,1239.94 | |
| Mar 2001,1160.33 | |
| Apr 2001,1249.46 | |
| May 2001,1255.82 | |
| Jun 2001,1224.38 | |
| Jul 2001,1211.23 | |
| Aug 2001,1133.58 | |
| Sep 2001,1040.94 | |
| Oct 2001,1059.78 | |
| Nov 2001,1139.45 | |
| Dec 2001,1148.08 | |
| Jan 2002,1130.2 | |
| Feb 2002,1106.73 | |
| Mar 2002,1147.39 | |
| Apr 2002,1076.92 | |
| May 2002,1067.14 | |
| Jun 2002,989.82 | |
| Jul 2002,911.62 | |
| Aug 2002,916.07 | |
| Sep 2002,815.28 | |
| Oct 2002,885.76 | |
| Nov 2002,936.31 | |
| Dec 2002,879.82 | |
| Jan 2003,855.7 | |
| Feb 2003,841.15 | |
| Mar 2003,848.18 | |
| Apr 2003,916.92 | |
| May 2003,963.59 | |
| Jun 2003,974.5 | |
| Jul 2003,990.31 | |
| Aug 2003,1008.01 | |
| Sep 2003,995.97 | |
| Oct 2003,1050.71 | |
| Nov 2003,1058.2 | |
| Dec 2003,1111.92 | |
| Jan 2004,1131.13 | |
| Feb 2004,1144.94 | |
| Mar 2004,1126.21 | |
| Apr 2004,1107.3 | |
| May 2004,1120.68 | |
| Jun 2004,1140.84 | |
| Jul 2004,1101.72 | |
| Aug 2004,1104.24 | |
| Sep 2004,1114.58 | |
| Oct 2004,1130.2 | |
| Nov 2004,1173.82 | |
| Dec 2004,1211.92 | |
| Jan 2005,1181.27 | |
| Feb 2005,1203.6 | |
| Mar 2005,1180.59 | |
| Apr 2005,1156.85 | |
| May 2005,1191.5 | |
| Jun 2005,1191.33 | |
| Jul 2005,1234.18 | |
| Aug 2005,1220.33 | |
| Sep 2005,1228.81 | |
| Oct 2005,1207.01 | |
| Nov 2005,1249.48 | |
| Dec 2005,1248.29 | |
| Jan 2006,1280.08 | |
| Feb 2006,1280.66 | |
| Mar 2006,1294.87 | |
| Apr 2006,1310.61 | |
| May 2006,1270.09 | |
| Jun 2006,1270.2 | |
| Jul 2006,1276.66 | |
| Aug 2006,1303.82 | |
| Sep 2006,1335.85 | |
| Oct 2006,1377.94 | |
| Nov 2006,1400.63 | |
| Dec 2006,1418.3 | |
| Jan 2007,1438.24 | |
| Feb 2007,1406.82 | |
| Mar 2007,1420.86 | |
| Apr 2007,1482.37 | |
| May 2007,1530.62 | |
| Jun 2007,1503.35 | |
| Jul 2007,1455.27 | |
| Aug 2007,1473.99 | |
| Sep 2007,1526.75 | |
| Oct 2007,1549.38 | |
| Nov 2007,1481.14 | |
| Dec 2007,1468.36 | |
| Jan 2008,1378.55 | |
| Feb 2008,1330.63 | |
| Mar 2008,1322.7 | |
| Apr 2008,1385.59 | |
| May 2008,1400.38 | |
| Jun 2008,1280 | |
| Jul 2008,1267.38 | |
| Aug 2008,1282.83 | |
| Sep 2008,1166.36 | |
| Oct 2008,968.75 | |
| Nov 2008,896.24 | |
| Dec 2008,903.25 | |
| Jan 2009,825.88 | |
| Feb 2009,735.09 | |
| Mar 2009,797.87 | |
| Apr 2009,872.81 | |
| May 2009,919.14 | |
| Jun 2009,919.32 | |
| Jul 2009,987.48 | |
| Aug 2009,1020.62 | |
| Sep 2009,1057.08 | |
| Oct 2009,1036.19 | |
| Nov 2009,1095.63 | |
| Dec 2009,1115.1 | |
| Jan 2010,1073.87 | |
| Feb 2010,1104.49 | |
| Mar 2010,1140.45 | |
| </pre> | |
| <script> | |
| var myChart = reUsableChart() | |
| .x(function(d) { return formatDate.parse(d.date); }) | |
| .y(function(d) { return +d.price; }); | |
| var formatDate = d3.time.format("%b %Y"); | |
| // showChart(); | |
| function showChart(_file, preprocessed) { | |
| console.log(preprocessed); | |
| var selection = d3.select("body") | |
| .append("div") | |
| .attr("class", "chart"); | |
| if (preprocessed) { | |
| selection.datum(_file); | |
| } | |
| selection.call(myChart); | |
| } | |
| //////////////////////////////////////////////////////////////// | |
| // If data needs to be processed before passing it on // | |
| // substitute showChart() with readData() // | |
| //////////////////////////////////////////////////////////////// | |
| readData("sp500.csv"); // when data is embedded in <pre> tag, otherwise readData(file); | |
| function readData(csvFile) { | |
| if (typeof csvFile !== 'undefined') { | |
| d3.csv(csvFile, processData, function(error, file) { | |
| showChart(file, true); | |
| showChart(file, true); | |
| }); | |
| } | |
| else { | |
| file = d3.csv.parse(d3.select("pre#data").text()); | |
| file.forEach( function (row) { | |
| processData(row); | |
| }); | |
| showChart(file, true); | |
| showChart(file, true); | |
| showChart(file, true); | |
| showChart(file, true); | |
| } | |
| } | |
| //////////////////////////////////////////////////////////////// | |
| // This function converts each data element to a number // | |
| // update this function to process data accordingly // | |
| //////////////////////////////////////////////////////////////// | |
| function processData(d) { | |
| for (var perm in d) { | |
| if (Object.prototype.hasOwnProperty.call(d, perm)) { | |
| //d[perm] = +d[perm]; | |
| } | |
| } | |
| return d; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment