Skip to content

Instantly share code, notes, and snippets.

@andrewberls
Last active December 20, 2015 09:49
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save andrewberls/6110861 to your computer and use it in GitHub Desktop.
Bash command visualization
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bash Command Visualization</title>
<style type="text/css">
* { margin: 0; padding: 0; }
#chart {
background-color: white;
font: 14px sans-serif;
margin: 0 auto 50px;
width: 600px;
height: 600px;
}
#chart .label{
fill: #404040;
font-size: 12px;
}
</style>
</head>
<body>
<div id="chart"></div>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
var json = {"commands":[{"command":"cs","count":458},{"command":"vim","count":238},{"command":"ll","count":204},{"command":"cd","count":133},{"command":"x","count":93},{"command":"up","count":62},{"command":"j","count":59},{"command":"cat","count":44},{"command":"git_add","count":43},{"command":"rake","count":39},{"command":"rm","count":39},{"command":"gds","count":38},{"command":"gd","count":34}]};
var width = 500;
height = 500;
radius = width / 2.5;
var pie = d3.layout.pie()
.value(function(d) { return d.count; })
var piedata = pie(json.commands);
var color = d3.scale.category20();
var arc = d3.svg.arc()
.innerRadius(0)
.outerRadius(radius - 7);
// Create svg element
var svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
// Tick marks
var ticks = svg.selectAll("line")
.data(piedata)
.enter()
.append("line");
ticks.attr("x1", 0)
.attr("x2", 0)
.attr("y1", -radius+4)
.attr("y2", -radius-2)
.attr("stroke", "gray")
.attr("transform", function(d) {
return "rotate(" + (d.startAngle+d.endAngle)/2 * (180/Math.PI) + ")";
});
// Labels
var labels = svg.selectAll("text")
.data(piedata)
.enter()
.append("text");
labels.attr("class", "label")
.attr("transform", function(d) {
var dist = radius + 25;
angle = (d.startAngle + d.endAngle) / 2; // Middle of wedge
x = dist * Math.sin(angle);
y = -dist * Math.cos(angle);
return "translate(" + x + "," + y + ")";
})
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.text(function(d){
return d.data.command + " (" + d.data.count + ")";
});
// Piechart
var path = svg.selectAll("path")
.data(piedata)
.enter()
.append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment