Built with blockbuilder.org
Last active
May 6, 2020 16:21
-
-
Save gordonwoodhull/4d5dfefabeb438303a9b1174988e990d to your computer and use it in GitHub Desktop.
boxplot dot data
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
| license: mit |
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Boxplot test</title> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script> | |
| <script type="text/javascript" src="https://unpkg.com/dc@4/dist/dc.js"></script> | |
| <link rel="stylesheet" type="text/css" href="https://unpkg.com/dc@4/dist/style/dc.css"> | |
| </head> | |
| <body> | |
| <div id="cycletime-chart"></div> | |
| <script type="text/javascript" src="index.js"></script> | |
| </body> | |
| </html> |
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
| const data = [{ | |
| "duration": 248, | |
| "type": "M248", | |
| "sfc": "M248BJ0L2809783", | |
| "pass": 1 | |
| }, | |
| { | |
| "duration": 249, | |
| "type": "M248", | |
| "sfc": "M248BK0L2809676", | |
| "pass": 1 | |
| }, | |
| { | |
| "duration": 156, | |
| "type": "M248", | |
| "sfc": "M248BK0L2809676", | |
| "pass": 1 | |
| }, | |
| { | |
| "duration": 254, | |
| "type": "M248", | |
| "sfc": "M248BP0L2809798", | |
| "pass": 1 | |
| }, | |
| { | |
| "duration": 134, | |
| "type": "M248", | |
| "sfc": "M248BJ0L2809783", | |
| "pass": 1 | |
| }, | |
| { | |
| "duration": 128, | |
| "type": "M248", | |
| "sfc": "M248BP0L2809798", | |
| "pass": 0 | |
| }, | |
| { | |
| "duration": 228, | |
| "type": "M248", | |
| "sfc": "M248B90L2809800", | |
| "pass": 0 | |
| }, | |
| { | |
| "duration": 125, | |
| "type": "M248", | |
| "sfc": "M248B90L2809800", | |
| "pass": 0 | |
| }, | |
| { | |
| "duration": 242, | |
| "type": "M248", | |
| "sfc": "M248BJ0L2809792", | |
| "pass": 1 | |
| }, | |
| { | |
| "duration": 149, | |
| "type": "M248", | |
| "sfc": "M248BJ0L2809792", | |
| "pass": 1 | |
| }, | |
| { | |
| "duration": 237, | |
| "type": "M248", | |
| "sfc": "M248BJ0L2809819", | |
| "pass": 1 | |
| }, | |
| { | |
| "duration": 153, | |
| "type": "M248", | |
| "sfc": "M248BJ0L2809819", | |
| "pass": 1 | |
| }, | |
| { | |
| "duration": 232, | |
| "type": "M248", | |
| "sfc": "M248BK0L2809847", | |
| "pass": 1 | |
| }, | |
| { | |
| "duration": 482, | |
| "type": "M248", | |
| "sfc": "M248BK0L2809847", | |
| "pass": 1 | |
| }, | |
| { | |
| "duration": 238, | |
| "type": "M248", | |
| "sfc": "M248BK0L2809883", | |
| "pass": 1 | |
| }, | |
| { | |
| "duration": 143, | |
| "type": "M248", | |
| "sfc": "M248BK0L2809883", | |
| "pass": 1 | |
| }, | |
| { | |
| "duration": 213, | |
| "type": "M247", | |
| "sfc": "M247B50L2693004", | |
| "pass": 1 | |
| }, | |
| { | |
| "duration": 217, | |
| "type": "M247", | |
| "sfc": "M247B50L2693004", | |
| "pass": 0 | |
| }, | |
| { | |
| "duration": 229, | |
| "type": "M248", | |
| "sfc": "M248BC0L2809902", | |
| "pass": 1 | |
| }, | |
| { | |
| "duration": 151, | |
| "type": "M248", | |
| "sfc": "M248BC0L2809902", | |
| "pass": 0 | |
| } | |
| ]; | |
| const cycletimeChart = dc.boxPlot('#cycletime-chart'); | |
| const ndx = crossfilter(data), | |
| typeDimension = ndx.dimension(function(d) { | |
| return d.type; | |
| }), | |
| bisectLeft = d3.bisector(d => d.duration).left, | |
| cycletimeGroupByType = typeDimension.group().reduce(function(p, v) { | |
| // keep array sorted for efficiency | |
| p.splice(bisectLeft(p, v.duration), 0, v); | |
| return p; | |
| }, function(p, v) { | |
| let i = bisectLeft(p, v.duration); | |
| while(p[i] !== v) ++i; | |
| p.splice(i, 1); | |
| return p; | |
| }, function() { | |
| return []; | |
| }); | |
| cycletimeChart | |
| .dimension(typeDimension) | |
| .group(cycletimeGroupByType) | |
| .valueAccessor(d => d.value.map(r => r.duration)) | |
| .on('pretransition', function(chart) { | |
| chart.selectAll('circle.outlier').on('click.sfcClick', function(datum, index, nodes) { | |
| console.log(`Clicked on outlier with datum, index, nodes ${datum}, ${index}, ${nodes}.`); | |
| console.log('parent array', d3.select(this.parentNode).datum().value); | |
| console.log(`Original datum`, d3.select(this.parentNode).datum().value[datum]); | |
| //Here I would like to retrieve the the sfc attribute from the original data object. | |
| }); | |
| }); | |
| cycletimeChart.render(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment