Skip to content

Instantly share code, notes, and snippets.

@gordonwoodhull

gordonwoodhull/.block

Last active May 6, 2020 16:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gordonwoodhull/4d5dfefabeb438303a9b1174988e990d to your computer and use it in GitHub Desktop.
Save gordonwoodhull/4d5dfefabeb438303a9b1174988e990d to your computer and use it in GitHub Desktop.
Download ZIP
boxplot dot data
Raw
.block
license: mit
Raw
index.html
<!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>
Raw
index.js
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