Skip to content

Instantly share code, notes, and snippets.

@biovisualize

biovisualize/README.md

Last active March 6, 2016 05:22
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 biovisualize/456231b87e1c2fca8bfb to your computer and use it in GitHub Desktop.
Save biovisualize/456231b87e1c2fca8bfb to your computer and use it in GitHub Desktop.
Download ZIP
Minimal stem-and-leaf plot
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>
<style>
table {
border-collapse: collapse;
}
th:first-child, td:first-child {
border-right: 1px solid silver;
text-align: right;
}
th {
border-bottom: 2px solid silver;
}
td {
font-family: monospace;
}
th, td {
padding: 4px;
}
</style>
</head>
<body>
<div class="container"></div>
<script>
var groupBy = function(xs, accessor) {
return xs.reduce(function(rv, x) {
(rv[accessor(x)] = rv[accessor(x)] || []).push(x);
return rv;
}, {});
};
var rnd = d3.random.normal(1.0, 0.3);
var data = d3.range(100).map(function(d, i){ return ~~(Math.abs(rnd())*100); });
var dataGroups = groupBy(data, function(d){ return ~~(d/10); });
console.log(JSON.stringify(data));
var table = d3.select('.container')
.append('table');
table.selectAll('th').data(['stem', 'leaf'])
.enter().append('th')
.text(function(d){ return d; });
table.selectAll('tr')
.data(d3.keys(dataGroups).map(function(d, i){ return [d, dataGroups[d]]; }))
.enter().append('tr')
.selectAll('td')
.data(function(d){ return d; })
.enter().append('td')
.text(function(d, i, pI){
return !i ? d : d.map(function(dB, i){
return parseInt(dB.toString().slice(-1));
}).sort().join(' ');
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment