Last active
February 9, 2017 22:44
-
-
Save sdowsland/00ee2386195c772324e31cb3f159b671 to your computer and use it in GitHub Desktop.
Pie D3 Example
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
| <html> | |
| <head> | |
| <title>Pie example</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> | |
| </head> | |
| <body onload="loadup()"> | |
| <script> | |
| function loadup(){ | |
| var data = [ | |
| { | |
| "_index": "cloudviz-render-reporting", | |
| "_type": "render-event-report", | |
| "_id": "777cc279-c44f-4166-b05a-46d7dec179ec", | |
| "_score": 0.8951659, | |
| "_source": { | |
| "eventName": "requestAccepted", | |
| "eventTimestamp": "2017-02-09T16:04:22.921Z", | |
| "frameID": "4470b892-04ae-4a26-9fa6-876fc948805d", | |
| "queryTime": 17 | |
| } | |
| }, | |
| { | |
| "_index": "cloudviz-render-reporting", | |
| "_type": "render-event-report", | |
| "_id": "44ad8d36-e8ca-4af0-9b31-b69a4c6e651e", | |
| "_score": 0.8951659, | |
| "_source": { | |
| "eventName": "jobReduced", | |
| "eventTimestamp": "2017-02-09T16:04:47.321Z", | |
| "frameID": "4470b892-04ae-4a26-9fa6-876fc948805d" | |
| } | |
| }, | |
| { | |
| "_index": "cloudviz-render-reporting", | |
| "_type": "render-event-report", | |
| "_id": "0f9920b8-a80c-46dd-95c2-45eaa5f85710", | |
| "_score": 0.4272101, | |
| "_source": { | |
| "eventName": "requestReceived", | |
| "eventTimestamp": "2017-02-09T16:04:22.895Z", | |
| "frameID": "4470b892-04ae-4a26-9fa6-876fc948805d" | |
| } | |
| }, | |
| { | |
| "_index": "cloudviz-render-reporting", | |
| "_type": "render-event-report", | |
| "_id": "dc93091f-e2b0-434e-a696-4fd752aeaa2d", | |
| "_score": 0.4272101, | |
| "_source": { | |
| "eventName": "dataRequested", | |
| "eventTimestamp": "2017-02-09T16:04:22.897Z", | |
| "frameID": "4470b892-04ae-4a26-9fa6-876fc948805d" | |
| } | |
| }, | |
| { | |
| "_index": "cloudviz-render-reporting", | |
| "_type": "render-event-report", | |
| "_id": "6dc921ea-1d7d-4401-9bb7-1bb4787af306", | |
| "_score": 0.4272101, | |
| "_source": { | |
| "eventName": "jobDispatched", | |
| "eventTimestamp": "2017-02-09T16:04:22.993Z", | |
| "frameID": "4470b892-04ae-4a26-9fa6-876fc948805d", | |
| "parts": 8 | |
| } | |
| }, | |
| { | |
| "_index": "cloudviz-render-reporting", | |
| "_type": "render-event-report", | |
| "_id": "cd3cf196-b3e4-4bcb-872f-2a1c93100755", | |
| "_score": 0.4272101, | |
| "_source": { | |
| "eventName": "frameReturned", | |
| "eventTimestamp": "2017-02-09T16:04:47.400Z", | |
| "frameID": "4470b892-04ae-4a26-9fa6-876fc948805d" | |
| } | |
| }, | |
| { | |
| "_index": "cloudviz-render-reporting", | |
| "_type": "render-event-report", | |
| "_id": "a331866d-5750-416d-942b-949d3c189f28", | |
| "_score": 0.4272101, | |
| "_source": { | |
| "eventName": "frameDisplayed", | |
| "eventTimestamp": "2017-02-09T16:04:47.984Z", | |
| "frameID": "4470b892-04ae-4a26-9fa6-876fc948805d" | |
| } | |
| } | |
| ] | |
| var events = [ | |
| { | |
| "name": "Response Processed", | |
| "events": ["requestReceived", "dataRequested"] | |
| }, | |
| { | |
| "name": "Data retrieved", | |
| "events": ["dataRequested", "requestAccepted"] | |
| }, | |
| { | |
| "name": "Job Calculated", | |
| "events": ["requestAccepted", "jobDispatched"] | |
| }, | |
| { | |
| "name": "Rendering", | |
| "events": ["jobDispatched", "jobReduced"] | |
| }, | |
| { | |
| "name": "Returned to user", | |
| "events": ["frameReturned", "frameDisplayed"] | |
| } | |
| ] | |
| prevEvent = false; | |
| var totalElapsed = 0; | |
| var pieData = [] | |
| events.forEach(function(item){ | |
| var event1 = _.find(data, {_source: {eventName: item.events[0]}})._source; | |
| var event2 = _.find(data, {_source: {eventName: item.events[1]}})._source; | |
| console.log(item.name); | |
| console.log(event2.eventTimestamp); | |
| var elapsed = new Date(event2.eventTimestamp) - new Date(event1.eventTimestamp); | |
| console.log((elapsed/1000) + " seconds."); | |
| totalElapsed += elapsed; | |
| if (item.name !== "jobReduced" && item.name !== "frameDisplayed") { | |
| pieData.push({task: item.name + " " +(elapsed/1000) + "s", elapsed: elapsed}) | |
| } | |
| }) | |
| console.log("Total elapsed: " + (totalElapsed/1000) + " seconds.") | |
| var width = 960, | |
| height = 500, | |
| radius = Math.min(width, height) / 2; | |
| var color = d3.scale.ordinal() | |
| .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00", "#CCC"]); | |
| var arc = d3.svg.arc() | |
| .outerRadius(radius - 10) | |
| .innerRadius(radius - 70); | |
| var labelArc = d3.svg.arc() | |
| .outerRadius(radius - 40) | |
| .innerRadius(radius - 40); | |
| var pie = d3.layout.pie() | |
| .sort(null) | |
| .value(function(d) { return d.elapsed; }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| var g = svg.selectAll(".arc") | |
| .data(pie(pieData)) | |
| .enter().append("g") | |
| .attr("class", "arc"); | |
| g.append("path") | |
| .attr("d", arc) | |
| .style("fill", function(d) { return color(d.data.task); }); | |
| g.append("text") | |
| .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; }) | |
| .attr("dy", ".35em") | |
| .text(function(d) { return d.data.task; }); | |
| function type(d) { | |
| d.elapsed = +d.elapsed; | |
| return d; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment