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 |