UM/Configurations/Performance: profileOutput.html

File profileOutput.html, 6.6 KB (added by dcase, 7 days ago)
Line 
1<!DOCTYPE html>
2<html>
3<meta charset="utf-8">
4
5<!-- Example based on http://bl.ocks.org/mbostock/3887118 -->
6<!-- Tooltip example from http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html -->
7<!-- Coding style based on http://gist.github.com/mbostock/5977197 -->
8
9<style>
10body {
11  font: 11px sans-serif;
12}
13
14.axis path,
15.axis line {
16  fill: none;
17  stroke: #000;
18  shape-rendering: crispEdges;
19}
20
21.dot {
22  stroke: #000;
23}
24
25.tooltip {
26  position: absolute;
27  width: 200px;
28  height: 28px;
29  pointer-events: none;
30}
31</style>
32<body>
33<script src="https://d3js.org/d3.v3.min.js"></script>
34
35<!-- Add 2 buttons -->
36<button onclick="update_x_axis(data, 'ncpus')">Years/Day vs nCPUs</button>
37<button onclick="update_x_axis(data, 'CostPerYear')">Years/Day vs Cost/Year</button>
38
39<script>
40
41function update_x_axis(d, key){
42  for (var i = 0; i < d.length; i++){
43    d[i].x_value = d[i][key];
44//    console.log(d[i]['x_value']);
45    }
46
47  refresh_graph(key);
48  }
49
50                     
51    var base_width = 768;
52
53
54                     
55    var base_height = 280;
56
57
58                     
59var margin = {top: 20, right: 20, bottom: 30, left: 40},
60    width =  base_width  - margin.left - margin.right,
61    height = base_height - margin.top - margin.bottom;
62/*
63 * value accessor - returns the value to encode for a given data object.
64 * scale - maps value to a visual display encoding, such as a pixel position.
65 * map function - maps from data value to display value
66 * axis - sets up axis
67 */ 
68
69                     
70// setup x
71var xValue = function(d) { return d.x_value;}, // data -> value
72    xScale = d3.scale.linear().range([0, width]), // value -> display
73    xMap = function(d) { return xScale(xValue(d));}, // data -> display
74    xAxis = d3.svg.axis().scale(xScale).orient("bottom");
75
76// setup y
77var yValue = function(d) { return d.YearsPerDay;}, // data -> value
78    yScale = d3.scale.linear().range([height, 0]), // value -> display
79    yMap = function(d) { return yScale(yValue(d));}, // data -> display
80    yAxis = d3.svg.axis().scale(yScale).orient("left");
81
82// setup fill color
83var cValue = function(d) { return d.nOMP;},
84    color = d3.scale.category10();
85
86
87// add the graph canvas to the body of the webpage
88var svg = d3.select("body").append("svg")
89    .attr("width", width + margin.left + margin.right)
90    .attr("height", height + margin.top + margin.bottom)
91  .append("g")
92    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
93
94
95// add the tooltip area to the webpage
96var tooltip = d3.select("body").append("div")
97    .attr("class", "tooltip")
98    .style("opacity", 0);
99
100var data = [{"EW": 24, "NS": 21, "nOMP": 2, "walltime": 7176.0, "ncpus": 1008, "YearsPerDay": 3.0100334448160537, "CostPerYear": 120.5568}, {"EW": 30, "NS": 28, "nOMP": 1, "walltime": 9100.0, "ncpus": 840, "YearsPerDay": 2.3736263736263736, "CostPerYear": 127.39999999999999}, {"EW": 24, "NS": 25, "nOMP": 2, "walltime": 6985.0, "ncpus": 1200, "YearsPerDay": 3.0923407301360055, "CostPerYear": 139.7}, {"EW": 26, "NS": 18, "nOMP": 1, "walltime": 11375.0, "ncpus": 480, "YearsPerDay": 1.898901098901099, "CostPerYear": 91.0}, {"EW": 26, "NS": 24, "nOMP": 2, "walltime": 6833.0, "ncpus": 1248, "YearsPerDay": 3.161129811210303, "CostPerYear": 142.1264}, {"EW": 36, "NS": 28, "nOMP": 1, "walltime": 8064.0, "ncpus": 1008, "YearsPerDay": 2.6785714285714284, "CostPerYear": 135.4752}, {"EW": 14, "NS": 18, "nOMP": 2, "walltime": 11729.0, "ncpus": 504, "YearsPerDay": 1.8415892232926934, "CostPerYear": 98.52359999999999}, {"EW": 18, "NS": 20, "nOMP": 2, "walltime": 9468.0, "ncpus": 720, "YearsPerDay": 2.2813688212927756, "CostPerYear": 113.61599999999999}, {"EW": 24, "NS": 21, "nOMP": 2, "walltime": 6546.0, "ncpus": 1008, "YearsPerDay": 3.2997250229147568, "CostPerYear": 109.97279999999999}, {"EW": 26, "NS": 24, "nOMP": 1, "walltime": 9334.0, "ncpus": 624, "YearsPerDay": 2.3141204199700023, "CostPerYear": 97.07359999999998}, {"EW": 18, "NS": 20, "nOMP": 2, "walltime": 9792.0, "ncpus": 720, "YearsPerDay": 2.2058823529411766, "CostPerYear": 117.50399999999999}, {"EW": 14, "NS": 18, "nOMP": 2, "walltime": 11814.0, "ncpus": 504, "YearsPerDay": 1.8283392585068563, "CostPerYear": 99.2376}];
101var graph_labels = {
102    "x_axis" : {
103    "ncpus" : "CPUs",
104    "CostPerYear": "kAU per Model Year"
105    },
106    "y_axis" : "Model Years Per Day"
107    }
108
109function refresh_graph(label_code){
110   
111  // don't want dots overlapping axis, so add in buffer to data domain
112  xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
113  yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);
114
115  // x-axis (remove (both???) axes first??
116  d3.select("svg").selectAll(".axis").remove();
117  svg.append("g")
118      .attr("class", "x axis")
119      .attr("transform", "translate(0," + height + ")")
120      .call(xAxis)
121    .append("text")
122      .attr("class", "label")
123      .attr("x", width)
124      .attr("y", -6)
125      .style("text-anchor", "end")
126      .text(graph_labels["x_axis"][label_code]);
127
128  // y-axis
129  svg.append("g")
130      .attr("class", "y axis")
131      .call(yAxis)
132    .append("text")
133      .attr("class", "label")
134      .attr("transform", "rotate(-90)")
135      .attr("y", 6)
136      .attr("dy", ".71em")
137      .style("text-anchor", "end")
138      .text(graph_labels["y_axis"]);
139  // draw dots
140  d3.select("svg").selectAll(".dot").remove();
141  svg.selectAll(".dot")
142      .data(data)
143    .enter().append("circle")
144      .attr("class", "dot")
145      .attr("r", 3.5)
146      .attr("cx", xMap)
147      .attr("cy", yMap)
148      .style("fill", function(d) { return color(cValue(d));}) 
149      .on("mouseover", function(d) {
150          tooltip.transition()
151               .duration(200)
152               .style("opacity", .9);
153          tooltip.html("nOMP = " + d.nOMP + "<br/> (NS, EW) = (" + d.NS 
154        + ", " + d.EW + ")")
155               .style("left", (d3.event.pageX + 5) + "px")
156               .style("top", (d3.event.pageY - 28) + "px");
157      })
158      .on("mouseout", function(d) {
159          tooltip.transition()
160               .duration(500)
161               .style("opacity", 0);
162      });
163
164  // draw legend
165  var legend = svg.selectAll(".legend")
166      .data(color.domain())
167    .enter().append("g")
168      .attr("class", "legend")
169      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
170
171  // draw legend colored rectangles
172  legend.append("rect")
173      .attr("x", width - 18)
174      .attr("width", 18)
175      .attr("height", 18)
176      .style("fill", color);
177
178  // draw legend text
179  legend.append("text")
180      .attr("x", width - 24)
181      .attr("y", 9)
182      .attr("dy", ".35em")
183      .style("text-anchor", "end")
184      .text(function(d) { return d;});
185//});
186};
187// initially choose ncpus
188update_x_axis(data, 'ncpus')   
189
190</script>
191</body>
192</html>