Line graph over time with multiple data points ...
2013-03-17 00:00
411 查看
<html> <head> <title>Line graph over time with multiple data points using SVG and d3.js</title> <script src="http://mbostock.github.com/d3/d3.v2.js"></script> <style> body { font-family: "Helvetica Neue", Helvetica; } /* tell the SVG path to be a thin blue line without any area fill */ path { stroke-width: 1; fill: none; } .data1 { stroke: green; } .data2 { stroke: orange; } .axis { shape-rendering: crispEdges; } .x.axis line { stroke: lightgrey; } .x.axis .minor { stroke-opacity: .5; } .x.axis path { display: none; } .x.axis text { font-size: 10px; } .y.axis line, .y.axis path { fill: none; stroke: #000; } .y.axis text { font-size: 12px; } </style> </head> <body> <div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div> <script> /* implementation heavily influenced by http://bl.ocks.org/1166403 */ // define dimensions of graph var m = [80, 80, 80, 80]; // margins var w = 1000 - m[1] - m[3]; // width var h = 400 - m[0] - m[2]; // height /* * sample data to plot over time * [Success, Failure] * Start: 1335035400000 * End: 1335294600000 * Step: 300000ms */ var data = [[28,22],[28,21],[28,25],[28,24],[28,22],[29,21],[29,24],[29,22],[28,21],[29,24],[29,20],[29,21],[29,24],[29,24],[30,24],[28,22],[28,21],[28,22],[28,24],[29,24],[28,22],[30,26],[31,22],[32,26],[30,24],[31,22],[30,27],[30,25], [30,20],[31,23],[31,24],[30,25],[31,23],[31,27],[31,48],[33,32],[31,28],[32,39],[31,27],[32,24],[34,28],[32,29],[34,27],[34,28],[33,29],[34,28],[34,31],[36,27],[34,28],[35,28],[35,56],[37,42],[36,34],[38,38],[37,41],[37,35],[38,35], [38,34],[39,33],[43,34],[42,37],[41,43],[44,89],[42,50],[41,39],[43,38],[42,37],[41,45],[42,42],[43,38],[42,37],[46,37],[47,39],[45,46],[44,40],[45,36],[45,104],[45,51],[45,40],[45,42],[45,46],[44,49],[44,52],[45,53],[44,54],[43,60], [44,56],[44,53],[44,48],[43,51],[43,46],[42,43],[42,42],[41,43],[43,48],[43,44],[42,42],[41,38],[40,36],[41,40],[39,44],[39,41],[38,41],[36,37],[37,37],[35,40],[35,36],[36,41],[34,34],[32,35],[32,31],[32,32],[32,37],[31,30],[31,31], [30,31],[30,29],[28,28],[29,31],[29,36],[30,50],[27,30],[25,29],[24,29],[23,29],[22,25],[22,24],[21,28],[20,23],[21,23],[21,24],[20,23],[19,19],[19,22],[20,26],[17,23],[18,20],[16,21],[15,17],[17,17],[15,20],[15,17],[14,21],[14,18], [12,17],[12,17],[12,12],[12,15],[12,12],[11,14],[11,14],[11,13],[11,12],[11,14],[10,12],[11,14],[10,12],[10,12],[10,11],[9,12],[9,13],[9,9],[9,11],[8,9],[11,10],[8,9],[9,9],[8,10],[7,9],[7,8],[7,9],[7,7],[7,7],[7,7],[7,6],[7,6],[7,6], [7,6],[6,8],[7,7],[7,6],[7,7],[7,7],[7,6],[7,6],[7,7],[7,9],[7,8],[7,7],[7,7],[8,6],[9,7],[8,8],[9,8],[9,7],[10,7],[10,8],[10,12],[11,13],[11,9],[12,11],[11,15],[12,13],[12,11],[12,13],[14,20],[14,22],[14,13],[15,15],[15,29],[17,17], [16,18],[18,18],[16,38],[17,27],[19,27],[18,29],[19,23],[19,33],[19,27],[20,20],[20,21],[21,32],[20,27],[20,21],[21,19],[21,19],[22,19],[22,22],[21,18],[23,20],[23,25],[24,38],[25,21],[24,44],[24,26],[24,22],[24,22],[25,46],[26,30], [25,23],[25,24],[25,22],[25,21],[26,22],[26,20],[27,29],[27,23],[26,24],[26,23],[27,20],[28,22],[27,22],[28,29],[27,25],[27,26],[27,26],[28,27],[28,45],[27,46],[27,29],[28,44],[27,32],[29,32],[28,31],[29,28],[29,26],[28,24],[30,27], [30,34],[30,27],[29,24],[30,25],[32,25],[32,24],[33,28],[30,26],[30,32],[30,26],[29,27],[31,56],[31,29],[31,29],[32,30],[32,26],[32,29],[33,28],[34,31],[32,29],[33,29],[32,31],[32,28],[32,28],[32,28],[33,28],[32,30],[32,29],[32,27], [33,26],[34,30],[34,29],[33,30],[33,33],[35,55],[34,42],[34,34],[34,30],[34,33],[33,35],[34,30],[35,31],[35,34],[35,32],[35,29],[35,32],[35,30],[35,30],[35,29],[35,31],[36,30],[35,32],[36,32],[36,33],[38,34],[36,34],[37,32],[36,32], [36,32],[37,34],[37,34],[37,40],[37,35],[38,33],[39,37],[40,34],[42,37],[39,39],[39,38],[40,35],[39,38],[41,90],[41,45],[41,39],[41,39],[42,49],[41,36],[43,41],[47,38],[46,44],[46,50],[43,55],[43,43],[44,64],[43,78],[44,48],[44,46], [42,77],[43,82],[48,57],[48,53],[47,50],[45,54],[43,43],[45,91],[44,67],[43,40],[43,38],[41,41],[43,39],[47,45],[41,49],[44,42],[43,43],[44,62],[42,41],[39,40],[39,40],[39,57],[40,106],[39,68],[36,40],[36,39],[36,41],[39,40],[37,39], [37,38],[35,34],[34,33],[34,41],[36,38],[33,35],[32,32],[31,33],[30,38],[30,37],[31,32],[28,30],[29,34],[27,33],[26,28],[25,28],[25,27],[24,27],[24,27],[22,24],[21,25],[20,22],[22,23],[21,26],[20,23],[19,23],[18,19],[18,19],[17,19], [17,19],[16,17],[15,19],[15,14],[15,17],[14,18],[13,15],[13,16],[13,16],[12,14],[11,14],[13,12],[14,11],[12,14],[10,10],[10,13],[10,11],[10,13],[9,14],[9,10],[9,8],[9,11],[9,9],[8,8],[8,11],[8,10],[8,8],[8,10],[8,8],[8,9],[7,8],[7,8], [7,7],[6,7],[6,7],[6,8],[6,6],[7,7],[9,7],[7,7],[6,7],[6,7],[6,7],[6,7],[6,7],[6,7],[5,5],[6,5],[5,6],[5,5],[6,6],[5,6],[6,6],[6,7],[6,6],[6,6],[7,6],[7,7],[7,6],[7,7],[8,7],[7,7],[7,7],[8,7],[8,7],[9,8],[8,8],[9,8],[10,8],[10,8],[10,8], [10,8],[10,9],[10,9],[11,9],[10,10],[10,11],[10,11],[11,11],[11,10],[11,10],[12,14],[11,9],[11,10],[11,11],[12,10],[12,9],[11,9],[12,9],[12,14],[12,14],[12,10],[13,10],[13,11],[13,13],[12,23],[14,9],[13,9],[13,8],[13,11],[13,18],[14,9], [14,8],[14,8],[15,15],[14,18],[15,10],[14,13],[14,10],[14,10],[14,11],[14,10],[14,8],[15,10],[15,12],[15,11],[15,11],[15,20],[14,15],[14,9],[14,11],[14,11],[14,11],[14,11],[16,11],[16,11],[15,10],[16,11],[16,12],[15,12],[16,24],[16,15], [16,14],[15,12],[16,11],[16,11],[17,13],[17,12],[17,13],[16,12],[17,15],[16,31],[17,15],[17,12],[17,13],[18,14],[17,12],[17,13],[17,14],[17,14],[16,14],[17,16],[17,15],[17,14],[18,14],[17,16],[18,20],[18,26],[18,15],[19,16],[20,17], [20,16],[19,15],[21,18],[19,14],[20,16],[20,16],[21,28],[20,34],[23,19],[24,21],[23,38],[23,27],[24,18],[24,25],[23,24],[25,24],[24,21],[25,21],[24,21],[27,24],[25,21],[25,28],[26,46],[25,25],[28,34],[27,51],[26,34],[27,30],[27,27], [27,24],[28,26],[27,27],[26,31],[28,24],[28,22],[28,24],[30,24],[30,25],[30,25],[31,25],[30,38],[31,63],[32,37],[30,28],[30,63],[32,41],[32,33],[33,31],[34,25],[33,26],[32,27],[33,30],[34,37],[35,31],[35,31],[35,40],[35,57],[35,30], [35,37],[38,39],[40,40],[38,36],[39,41],[39,33],[37,39],[39,74],[39,39],[40,35],[39,42],[39,45],[38,37],[39,34],[43,37],[42,32],[40,31],[40,35],[39,32],[39,36],[40,33],[40,29],[38,35],[40,36],[38,35],[39,73],[43,49],[41,43],[40,49], [40,46],[38,38],[39,40],[38,40],[38,37],[35,33],[36,33],[35,30],[35,30],[36,31],[35,34],[35,32],[34,31],[33,35],[33,30],[33,32],[32,34],[30,32],[30,29],[29,27],[28,29],[29,32],[27,27],[26,31],[26,25],[25,27],[25,26],[24,25],[23,24], [23,24],[21,21],[21,25],[21,21],[21,22],[21,22],[20,23],[19,20],[18,19],[17,16],[18,19],[17,21],[15,15],[15,17],[15,18],[14,15],[14,16],[13,14],[13,15],[14,13],[12,11],[12,11],[14,12],[13,12],[11,14],[10,10],[10,12],[10,10],[10,9], [10,11],[9,8],[9,9],[9,8],[8,10],[8,10],[9,9],[8,9],[8,11],[8,9],[9,9],[8,7],[8,9],[7,7],[7,6],[7,7],[7,8],[7,6],[7,7],[7,6],[9,7],[7,5],[7,6],[6,6],[7,7],[6,6],[6,6],[6,5],[6,5],[6,6],[6,6],[6,5],[6,6],[6,5],[6,5],[6,6],[7,5],[7,5], [7,5],[8,5],[8,5],[8,5],[8,5],[9,6],[9,7],[9,6],[9,7],[10,7],[10,6],[10,6],[10,6],[11,6],[11,7],[12,8],[12,8],[12,8],[13,9],[12,7],[13,7],[13,17],[13,10],[13,7],[12,8],[13,8],[14,10],[14,18],[13,17],[13,8],[13,8],[13,7],[13,8],[14,8], [14,9],[14,8],[15,8],[14,8],[15,8],[14,10],[15,9],[15,7],[15,9],[15,11],[25,110],[16,9],[16,18],[25,138],[16,13],[18,25],[16,11],[16,9],[15,10],[15,9],[16,11],[16,10],[16,10],[17,11],[16,11],[16,12],[16,9],[16,11],[16,11],[17,12], [15,11],[16,11],[16,10],[16,10],[16,9],[18,10],[16,10],[17,18],[17,17],[17,12],[18,27],[17,17],[17,16],[17,12],[17,15],[17,15],[18,13],[18,13],[17,13],[18,13],[18,15],[18,13],[18,13],[20,12],[19,13],[18,13],[18,12],[18,13],[18,13], [19,14],[19,13],[19,13],[18,17],[19,27],[19,18],[19,16],[19,12],[20,13],[19,13],[19,13],[20,13]]; var startTime = new Date(1335035400000); var endTime = new Date(1335294600000); var timeStep = 300000; // X scale starts at epoch time 1335035400000, ends at 1335294600000 with 300s increments var x = d3.time.scale().domain([startTime, endTime]).range([0, w]); x.tickFormat(d3.time.format("%Y-%m-%d")); // Y scale will fit values from 0-10 within pixels h-0 (Note the inverted domain for the y-scale: bigger is up!) var y = d3.scale.linear().domain([0, d3.max(data, function(d) { return d[1]; })]).range([h, 0]); // create a line function that can convert data[] into x and y points var line1 = d3.svg.line() // assign the X function to plot our line as we wish .x(function(d,i) { // verbose logging to show what's actually being done //console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.'); // return the X coordinate where we want to plot this datapoint return x(startTime.getTime() + (timeStep*i)); }) .y(function(d) { // verbose logging to show what's actually being done //console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale."); // return the Y coordinate where we want to plot this datapoint return y(d[0]); // use the 1st index of data (for example, get 20 from [20,13]) }) var line2 = d3.svg.line() // assign the X function to plot our line as we wish .x(function(d,i) { // verbose logging to show what's actually being done //console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.'); // return the X coordinate where we want to plot this datapoint return x(startTime.getTime() + (timeStep*i)); }) .y(function(d) { // verbose logging to show what's actually being done //console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale."); // return the Y coordinate where we want to plot this datapoint return y(d[1]); // use the 2nd index of data (for example, get 13 from [20,13]) }) // Add an SVG element with the desired dimensions and margin. var graph = d3.select("#graph").append("svg:svg") .attr("width", w + m[1] + m[3]) .attr("height", h + m[0] + m[2]) .append("svg:g") .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); // create yAxis var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(1); // Add the x-axis. graph.append("svg:g") .attr("class", "x axis") .attr("transform", "translate(0," + h + ")") .call(xAxis); // create left yAxis var yAxisLeft = d3.svg.axis().scale(y).ticks(6).orient("left"); // Add the y-axis to the left graph.append("svg:g") .attr("class", "y axis") .attr("transform", "translate(-10,0)") .call(yAxisLeft); // add lines // do this AFTER the axes above so that the line is above the tick-lines graph.append("svg:path").attr("d", line1(data)).attr("class", "data1"); graph.append("svg:path").attr("d", line2(data)).attr("class", "data2"); </script> </body> </html>
相关文章推荐
- How to plot line chart with Real-time data at Dialog-base application?
- Implementing Virtual Mode with Just-In-Time Data Loading in the Windows Forms DataGridView Control
- session.run Requesting multiple values from graph at same time
- Design issues - Sending small data segments over TCP with Winsock
- Linux几个调试宏__FUNCTION__ __TIME__ __LINE__ __FILE__ __DATA__
- Design issues - Sending small data segments over TCP with Winsock
- Analyzing Time Series Cross-Sectional Data with the PANEL Procedure
- 《Efficient Batch Processing for Multiple Keyword Queries on Graph Data》——论文笔记
- Multiple Windows with Core Data
- Visualize real-time data streams with Gnuplot
- 【软件自动化测试-QTP实战技能 17】== QTP_Compare local sheet values with run time data table values
- Linux几个调试宏_FUNCTION_ _TIME_ _LINE_ _FILE_ _DATA_
- Become a Command Line Ninja With These Time-Saving Shortcuts
- define a static method to convert datatime to a formatted string with uesr-defined
- Distributed transactions with multiple databases, Spring Boot, Spring Data JPA and Atomikos
- Spring Data repositories with multiple databases
- How to setup multiple data sources with Spring and JPA
- [rxjs] Async, handle data over time
- Linux几个调试宏_FUNCTION_ _TIME_ _LINE_ _FILE_ _DATA_
- 文献阅读笔记: Real-time Multiple Objects Tracking with Occlusion Handling in Dynamic Scenes ---by 香蕉麦乐迪