Surf-N-Perf D3 Visualization
JohnRiv opened this issue · comments
Provide another demo page that provides visualization of Surf-N-Perf data, similar to how Comcast uses it with the data we log and then visualize:
https://speakerdeck.com/johnriv/the-truth-about-your-web-apps-performance?slide=53
Feel free to come up with other visualizations as well.
The data visualized should be Network Time, Server Time & Processing Load Time.
My vision for this is that there would be a parent page with the D3 visuals, and that would include an iframe that would serve up another page, run Surf-N-Perf in that iframe, and then send the Network Time, Server Time & Processing Load Time to the parent page so that D3 can visualize it. After it sends the data to the page and D3 renders it, the iframe would reload to gather a new set of those same data points, so it looks like data is coming in in real time. So you'll end up with something that looks like this:
https://fastly.github.io/epoch/real-time/#area
Ideally, we'd publish it to http://comcast.github.io/Surf-N-Perf/visualize/
This & Issue #1 are part of Pull Request #37. Before I merge in that Pull Request, I want these changes made:
- move demo.html to /demo/index.html
- move public/bootstrap.min.css to demo/bootstrap.min.css (& update the path reference to it in demo/index.html)
- move visualize.html to visualize/index.html
- move public/nv.d3.css to visualize/nv.d3.css (& update the path reference to it in visualize/index.html)
- move public/nv.d3.js to visualize/nv.d3.js (& update the path reference to it in visualize/index.html)
- move public/surfnperf.html to visualize/surfnperf.html (& update the path reference to it in visualize/index.html)
gh-pages branch, not master
The best way to go about this (since you don't have access to shynp's repo) to actually fetch the pull request in progress (see https://help.github.com/articles/checking-out-pull-requests-locally/), make another commit with the changes listed above, and then push that.
#42 closes this