Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(175)

Unified Diff: Source/devtools/front_end/profiler/d3js_trace/README.md

Issue 887673002: DevTools: CPU profiler sunburst view (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 5 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: Source/devtools/front_end/profiler/d3js_trace/README.md
diff --git a/Source/devtools/front_end/profiler/d3js_trace/README.md b/Source/devtools/front_end/profiler/d3js_trace/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..e93c6007920f95d7c44aa33b0ea37ded9f96fffe
--- /dev/null
+++ b/Source/devtools/front_end/profiler/d3js_trace/README.md
@@ -0,0 +1,75 @@
+d3js_trace
+==========
+
+Trace data visualization with D3js
+
+ORVERVIEW
+---------
+Finding CPU bottle neck is a usual tasks of performance analysis. One of the
+efficient way of finding the hot-path is to sampling stack trace of the system.
+However, it is difficult to read collected stack trace text data just as it
+is, because usually text trace data consists of enourmous amount of data.
+
+To solve the problem, making trace data human readable with visualization is a
+good solution. D3js_trace visualize the sampled stack trace data with D3js. D3js
+is a JavaScript library for manipulating documents based on data. By
+visualizing trace data with HTML, SVG and CSS, we can easily detect where the
+CPU bottle neck is.
+
+EXAMPLE
+-------
+The following image is the visualized stack traces sampled with 'perf'. perf is
+a performance counters subsystem in Linux. They form a basis for profiling
+applications to trace dynamic control flow and identify hot-spots.
+
+![alt tag](https://raw.github.com/etsukata/d3js_trace/master/img/screen_seq.png)
+
+Here 'sunburst' form is used. A sunburst is similar to the treemap, except it
+uses a radial layout. The root node of the tree is at the center, with leaves
+on the circumference. The area (or angle, depending on implementation) of each
+arc corresponds to its occurrence count.
+
+Interactive WEB page example is also available at [HERE](http://etsukata.com/d3js_trace/sample1/).
+
+USAGE
+-----
+
+Clone the repository:
+
+ # git clone https://github.com/Etsukata/d3js_trace.git
+ # cd d3js_trace
+
+First, we need to sampling stack traces. d3js_trace uses Linux 'perf' command to
+sample stack traces.
+This can be done with the following command:
+
+ # perf record -g fp -a sleep 3
+
+Translate sampled trace to json for visualizing it with D3js:
+
+ # perf script | ./d3trace.py > trace_json.js
+
+View HTML file with WEB browser:
+
+ # firefox index.html
+
+THANKS TO
+---------
+
+d3js_trace is very impressed by the following great job.
+
+- Brendan Gregg's [FlameGraph](https://github.com/brendangregg/FlameGraph)
+ visualize hot-CPU code-paths.
+
+And using the following D3js example for visualization.
+
+- D3js example: [Sequences sunburst](http://bl.ocks.org/kerryrodden/7090426)
+
+
+TODO
+----
+
+- Show stack traces with colors
+- Make sunburst trace graph zoomable
+- Visualize with other d3js tools(Collapsible Tree, Zoomable Pack, and more)
+- Visualize latency trace data collected with ftrace
« no previous file with comments | « Source/devtools/front_end/profiler/d3js_trace/LICENSE ('k') | Source/devtools/front_end/profiler/d3js_trace/d3trace.py » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698