motus/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Here's my attempt to review the following visualization:

The original plot has the following problems:

The numbers do not add up to 100%; therefore, pie char does not make sense;
Radius of each segment in the Coxcomb chart does not convey any information;
Area and radius of each segment also do not correspond to the actual values.

Given that, a simple bar plot seems to be a better option.

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
  <script type="text/javascript">

    function transform(d) {
      d['share'] = parseFloat(d['share']);
      return d;
    }

    function draw(data) {

      "use strict";

      var svg = dimple.newSvg("#plot", 960, 400);
      var chart = new dimple.chart(svg, data);

      var x = chart.addCategoryAxis("x", "sector");
      x.title = "Sector";
      x.addOrderRule("rank");

      var y = chart.addMeasureAxis("y", "share");
      y.title = "Percent of class";

      chart.addSeries("Class of 2014", dimple.plot.bar);

      chart.draw();

    };

  </script>
</head>
<body>
  <h2>Class of 2014</h2>
  <div id="plot"></div>
  <script type="text/javascript">
    d3.csv("wtf.csv", transform, draw);
  </script>
</body>
</html>

## wtf.csv

          
            rank
            sector
            share

            
              1
              Law Firms
              46

            
              2
              Business/In-House
              34

            
              3
              Government
              11

            
              4
              Environmentalist
              5

            
              5
              Public Interest
              3

            
              6
              Academia
              3
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
	<script type="text/javascript">

	function transform(d) {
	d['share'] = parseFloat(d['share']);
	return d;
	}

	function draw(data) {

	"use strict";

	var svg = dimple.newSvg("#plot", 960, 400);
	var chart = new dimple.chart(svg, data);

	var x = chart.addCategoryAxis("x", "sector");
	x.title = "Sector";
	x.addOrderRule("rank");

	var y = chart.addMeasureAxis("y", "share");
	y.title = "Percent of class";

	chart.addSeries("Class of 2014", dimple.plot.bar);

	chart.draw();

	};

	</script>
	</head>
	<body>
	<h2>Class of 2014</h2>
	<div id="plot"></div>
	<script type="text/javascript">
	d3.csv("wtf.csv", transform, draw);
	</script>
	</body>
	</html>
rank	sector	share
1	Law Firms	46
2	Business/In-House	34
3	Government	11
4	Environmentalist	5
5	Public Interest	3
6	Academia	3