Skip to content

Instantly share code, notes, and snippets.

@SpaceActuary

SpaceActuary/README.md

Created July 9, 2016 03:05
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 SpaceActuary/4985e32f1b9a1c9dcd3eac2835bdcd2a to your computer and use it in GitHub Desktop.
Save SpaceActuary/4985e32f1b9a1c9dcd3eac2835bdcd2a to your computer and use it in GitHub Desktop.
Download ZIP
Statistical Summaries
Raw
data.csv
count min p25 median p75 max mean
20 -1.5962268562822681 -0.27496873806393995 0.590106005243372 1.6372920342677557 3.707343003109737 0.7166006482224265
66 -1.5851205060435567 -0.33785073255720427 0.023084836830005662 0.34559110995355913 1.4257981370845658 -0.012238454195877406
52 -5.203138771345231 -1.966842666609654 -0.11819865259216729 1.8101197428151161 4.5227710879501934 -0.2742241463649254
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/jstat/1.5.0/jstat.min.js"></script>
<style>
body {
margin:0;
position:fixed;
top:0;right:0;bottom:0;left:0;
font-size: 14px;
font-family: sans-serif;
}
svg { margin: 0px; }
table {
margin: 20px;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
padding: 5px;
}
rect { fill: steelblue; }
line { stroke: #222; stroke-width: 1px; }
circle { fill: #222; }
rect.outline {
stroke: #000000;
stroke-width: 1px;
fill: none;
}
text.count {
fill: #000;
text-anchor: end;
}
text {
dominant-baseline: central;
}
</style>
</head>
<body>
<script>
console.clear()
var margin = {top: 20, bottom: 20, left: 20, right: 20},
height = 500 - margin.top - margin.bottom, // default height
width = 900 - margin.left - margin.right; // default width
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function(mydata){
mydata.forEach(function(d){
d.count = +d.count;
d.min = +d.min;
d.p25 = +d.p25;
d.median = +d.median;
d.p75 = +d.p75;
d.max = +d.max;
d.mean = +d.mean;
})
//console.table(mydata);
var maxCount = d3.max(mydata, function(d){ return d.count; }),
minmin = d3.min(mydata, function(d){ return d.min; }),
maxmax = d3.max(mydata, function(d){ return d.max; })
var rows = svg.selectAll("g.row").data(mydata);
var myParamLevelSummary = ParamLevelSummary()
.countDomain([0, maxCount])
.paramDomain([minmin, maxmax])
.countValue(function(d){ return d.count; })
var rowsEnter = rows.enter().append("g")
.attr("class", "row")
rows.call(myParamLevelSummary)
});
function ParamLevelSummary() {
var height = 50, // default height
levelWidth = 100,
countWidth = 100,
paramWidth = 400,
width = countWidth + paramWidth + 200,
countFormat = d3.format(",.0f"),
paramFormat = d3.format(".3f"),
levelValue = function(d, i){ return i; },
countValue = function(d, i){ return i; },
paramValue = function(d, i){ return i; },
countScale = d3.scale.linear().range([0, 1]),
paramScale = d3.scale.linear(),
line = d3.svg.line()
.x(function(d, i, data){ return xScale(d.x); })
.y(function(d, i, data){ return yScale(d.y); });
function chart(selection) {
selection.each(function(data, i){
var chartData = data;
console.log(i);
console.table([chartData]);
var yExt = d3.extent(chartData, function(d){ return d.y; });
countScale
.range([0, countWidth]);
paramScale
.range([0, paramWidth]);
var gRow = d3.select(this).selectAll("g.main").data([chartData])
var gRowEnter = gRow.enter().append("g").attr("class", "main")
gRowEnter.append("rect").attr("class", "outline")
gRowEnter.append("text").attr("class", "level")
gRowEnter.append("text").attr("class", "count")
gRowEnter.append("rect").attr("class", "count")
var gParamEnter = gRowEnter.append("g").attr("class", "param")
var boxPlot = MinimalBoxPlot()
.width(paramWidth)
.height(height)
.xValue(paramValue)
.xDomain(paramScale.domain())
.xFormat(paramFormat)
var gParam = gRow.selectAll("g.param")
.attr("transform", "translate(" + (levelWidth+countWidth+40) + ",0)")
.call(boxPlot)
gRow.attr("transform", "translate(" + 0 + "," + (i * (height + 5)) + ")")
.attr("width", width)
.attr("height", height);
var outline = gRow.selectAll("rect.outline")
.attr("width", width )
.attr("height", height);
var countText = gRow.selectAll("text.level")
.text(levelValue(data, i))
.attr("transform", "translate(" + 10 + "," + (height / 2) + ")");
var countText = gRow.selectAll("text.count")
.text(countValue(data, i))
.attr("transform", "translate(" + (levelWidth+20) + "," + (height/2) + ")");
var countRect = gRow.selectAll("rect.count")
.attr("transform", "translate(" + (levelWidth+30) + "," + (height/4) + ")")
.attr("height", height / 2)
.attr("width", countScale(countValue(data)));
});
}
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
height = _;
return chart;
};
chart.countValue = function(_) {
if (!arguments.length) return countValue;
countValue = _;
return chart;
};
chart.paramValue = function(_) {
if (!arguments.length) return paramValue;
paramValue = _;
return chart;
};
chart.countFormat = function(_) {
if (!arguments.length) return countFormat;
countFormat = _;
return chart;
};
chart.paramFormat = function(_) {
if (!arguments.length) return paramFormat;
paramFormat = _;
return chart;
};
chart.countDomain = function(_) {
if (!arguments.length) return countScale.domain;
countScale.domain(_);
return chart;
};
chart.paramDomain = function(_) {
if (!arguments.length) return paramScale.domain;
paramScale.domain(_);
return chart;
};
return chart;
}
function MinimalBoxPlot() {
var height = 50, // default height
width = 400,
xFormat = d3.format(".3f"),
xValue = function(d, i){ return i; },
xScale = d3.scale.linear();
function chart(selection) {
selection.each(function(data, i){
var chartData = data;
console.log(i);
console.table([chartData]);
var yExt = d3.extent(chartData, function(d){ return d.y; });
xScale.range([0, width]);
var gElement = d3.select(this).selectAll("g.miniboxplot").data([chartData])
var gElementEnter = gElement.enter().append("g").attr("class", "miniboxplot")
gElementEnter.append("line").attr("class", "range")
gElementEnter.append("line").attr("class", "p25")
gElementEnter.append("line").attr("class", "p50")
gElementEnter.append("line").attr("class", "p75")
gElementEnter.append("circle").attr("class", "mean")
gElement.attr("transform", "translate(" + (0) + ",0)")
// range
var range = gElement.selectAll("line.range")
.attr("x1", function(d){ return xScale(d.min); })
.attr("x2", function(d){ return xScale(d.max); })
.attr("y1", height / 2)
.attr("y2", height / 2)
// 25th percentile
var p25 = gElement.selectAll("line.p25")
.attr("x1", function(d){ return xScale(d.p25); })
.attr("x2", function(d){ return xScale(d.p25); })
.attr("y1", 6)
.attr("y2", height - 6)
// median
var p50 = gElement.selectAll("line.p50")
.attr("x1", function(d){ return xScale(d.median); })
.attr("x2", function(d){ return xScale(d.median); })
.attr("y1", 2)
.attr("y2", height - 2)
// 75th percentile
var p75 = gElement.selectAll("line.p75")
.attr("x1", function(d){ return xScale(d.p75); })
.attr("x2", function(d){ return xScale(d.p75); })
.attr("y1", 6)
.attr("y2", height - 6)
// mean
var mean = gElement.selectAll("circle.mean")
.attr("cy", height / 2)
.attr("cx", function(d){ return xScale(d.mean); })
.attr("r", 5)
});
}
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
height = _;
return chart;
};
chart.xValue = function(_) {
if (!arguments.length) return xValue;
xValue = _;
return chart;
};
chart.xFormat = function(_) {
if (!arguments.length) return xFormat;
xFormat = _;
return chart;
};
chart.xDomain = function(_) {
if (!arguments.length) return xScale.domain;
xScale.domain(_);
return chart;
};
return chart;
}
d3.csv("data.csv", function(mydata){
mydata.forEach(function(d){
d.count = +d.count;
d.min = +d.min;
d.p25 = +d.p25;
d.median = +d.median;
d.p75 = +d.p75;
d.max = +d.max;
d.mean = +d.mean;
})
console.table(mydata);
var maxCount = d3.max(mydata, function(d){ return d.count; }),
minmin = d3.min(mydata, function(d){ return d.min; }),
maxmax = d3.max(mydata, function(d){ return d.max; })
/*
thead.selectAll("th").data(["Group", "Count", "Range"])
.enter().append("th")
.html(function(d){ return d; })
var tr = tbody.selectAll("tr").data(mydata);
var trEnter = tr.enter().append("tr")
trEnter.append("td").html(function(d, i){ return i; })
var countSVG = trEnter.append("td").html(function(d, i){ return d.count; })
.append("svg")
.attr("height", rowHeight)
.attr("width", barWidth)
countSVG.append("rect")
.attr("height", rowHeight)
.attr("width", function(d){ return d3.round(d.count / maxCount * barWidth); })
var rangeSVG = trEnter.append("td").append("svg")
.attr("height", rowHeight)
.attr("width", rangeWidth)
var rangeScale = d3.scale.linear()
.domain([minmin, maxmax])
.range([0, rangeWidth]);
// reference
rangeSVG.append("line")
.attr("x1", function(d){ return rangeScale(0); })
.attr("x2", function(d){ return rangeScale(0); })
.attr("y1", 0)
.attr("y2", rowHeight)
.attr("stroke-dasharray", "2 2 2 2")
*/
});
function data(n){
var samples = d3.range(0, n).map(function(){
var mean = Math.random() - 0.5,
sd = Math.random() * 3,
x = Math.floor(Math.random() * 60) + 20,
myrand = d3.random.normal(mean, sd);
return d3.range(0, x).map(function(){ return myrand(); });
});
return samples.map(function(d){
d = d.sort(d3.ascending)
return [
d.length,
d3.quantile(d, 0),
d3.quantile(d, 0.25),
d3.quantile(d, 0.5),
d3.quantile(d, 0.75),
d3.quantile(d, 1),
d3.mean(d)
]
})
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment