underhilllabs · August 1, 2013 18:53
diff --git a/index.html b/index.html
 <!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":"ls","count":194},{"command":"cd","count":180},{"command":"vi","count":88},{"command":"exit","count":43},{"command":"sudo","count":39},{"command":"tmux","count":30},{"command":"drush","count":28},{"command":"git_commit","count":23},{"command":"git_push","count":23},{"command":"git_st","count":21},{"command":"git_pull","count":19},{"command":"~/projects/drush/drush","count":14},{"command":"git_clone","count":13}]}
    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>
	<!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":"ls","count":194},{"command":"cd","count":180},{"command":"vi","count":88},{"command":"exit","count":43},{"command":"sudo","count":39},{"command":"tmux","count":30},{"command":"drush","count":28},{"command":"git_commit","count":23},{"command":"git_push","count":23},{"command":"git_st","count":21},{"command":"git_pull","count":19},{"command":"~/projects/drush/drush","count":14},{"command":"git_clone","count":13}]}
	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>