Built with blockbuilder.org
forked from anonymous's block: fresh block
forked from anonymous's block: fresh block
Last active
October 12, 2016 07:33
-
-
Save seemantk/5eba869f4aa06353d8c9ce6f8d88c714 to your computer and use it in GitHub Desktop.
fresh block
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
We can make this file beautiful and searchable if this error is corrected: No tabs found in this TSV file in line 0.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| dept,tim,count | |
| home,2016-10-06 23:15:44,220 | |
| home,2016-10-06 23:40:44,150 | |
| toys,2016-10-06 23:10:44,400 | |
| toys,2016-10-06 23:30:44,1000 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <style> | |
| body { font: 12px Arial;} | |
| path { | |
| stroke: steelblue; | |
| stroke-width: 2; | |
| fill: none; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: grey; | |
| stroke-width: 1; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| // Set the dimensions of the canvas / graph | |
| var margin = {top: 30, right: 20, bottom: 30, left: 50}, | |
| width = 600 - margin.left - margin.right, | |
| height = 300 - margin.top - margin.bottom; | |
| // Parse the date / time | |
| var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S"); | |
| // Set the ranges | |
| var x = d3.time.scale().range([0, width]); | |
| var y = d3.scale.linear().range([height, 0]); | |
| // Define the axes | |
| var xAxis = d3.svg.axis().scale(x) | |
| .orient("bottom") | |
| var yAxis = d3.svg.axis().scale(y) | |
| .orient("left").ticks(10); | |
| // Define the line | |
| var valueline = d3.svg.line() | |
| .x(function(d) { return x(d.tim); }) | |
| .y(function(d) { return y(d.count); }); | |
| // Adds the svg canvas | |
| 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 + ")"); | |
| // Get the data | |
| d3.csv("final_report_multi.tsv", function(error, data) { | |
| data.forEach(function(d) { | |
| d.tim = parseDate.parse(d.tim); | |
| d.count = +d.count; // convert it to a number | |
| }); | |
| // Scale the range of the data | |
| x.domain(d3.extent(data, function(d) { return d.tim; })); | |
| y.domain(d3.extent(data, function(d) { return d.count; })); | |
| var color = d3.scale.category10(); | |
| // Nest the entries by symbol | |
| var dataNest = d3.nest() | |
| .key(function(d) {return d.dept;}) | |
| .entries(data) | |
| .sort(function(a, b) { return d3.ascending(a.tim,b.tim); }) | |
| ; | |
| // Loop through each symbol / key | |
| var depts = svg.selectAll("path") | |
| .data(dataNest, function(d) { return d.key;}) // join | |
| .enter().append("path") | |
| .attr("class", function(d) { return d.key; }) | |
| .attr("d", function(d) { return valueline(d.values); }) | |
| .style("stroke", function(d) { return color(d.key); }) | |
| ; | |
| // Add the X Axis | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| // Add the Y Axis | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis); | |
| }); | |
| /* | |
| var inter = setInterval(function() { | |
| updateData(); | |
| }, 3000); | |
| */ | |
| // ** Update data section (Called from the onclick) | |
| function updateData() { | |
| // Get the data again | |
| d3.tsv("final_report_multi.tsv", function(error, data) { | |
| data.forEach(function(d) { | |
| d.date = parseDate(d.tim); | |
| d.close = d.count; | |
| console.log(d.date); | |
| console.log(d.close); | |
| }); | |
| // Scale the range of the data again | |
| x.domain(d3.extent(data, function(d) { return d.date; })); | |
| y.domain([0, d3.max(data, function(d) { return d.close; })]); | |
| // y.domain([d3.extent(data, function(d) { return d.close; })]); | |
| y.domain([0,100]); | |
| // Select the section we want to apply our changes to | |
| var svg = d3.select("body").transition(); | |
| // Nest the entries by symbol | |
| var dataNest = d3.nest() | |
| .key(function(d) {return d.dept;}) | |
| .entries(data); | |
| // Loop through each symbol / key | |
| dataNest.forEach(function(d) { | |
| var svg = d3.select("body").transition(); | |
| console.log(d.values) | |
| svg.select(".line") // change the line | |
| .duration(750) | |
| .attr("d", valueline(d.values)); | |
| svg.select(".x.axis") // change the x axis | |
| .duration(750) | |
| .call(xAxis); | |
| svg.select(".y.axis") // change the y axis | |
| .duration(750) | |
| .call(yAxis) | |
| }); | |
| // Make the changes | |
| // svg.select(".line") // change the line | |
| // .duration(750) | |
| // .attr("d", valueline(data)); | |
| // svg.select(".x.axis") // change the x axis | |
| // .duration(750) | |
| // .call(xAxis); | |
| // svg.select(".y.axis") // change the y axis | |
| // .duration(750) | |
| // .call(yAxis); | |
| }); | |
| } | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment