motus/jobs.html

## jobs.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']);
      d['is_apple'] = (d['company'] == 'Apple');
      return d;
    }

    function draw(data) {

      "use strict";

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

      var x = chart.addCategoryAxis("x", "company");
      x.title = "Manufacturer";
      x.addOrderRule("rank");

      var y = chart.addMeasureAxis("y", "share");
      y.title = "Market Share";

      chart.addSeries("Market Share", dimple.plot.bar);

      chart.draw();

      svg.select('.dimple-apple')
        .attr('fill', 'salmon');

    };

  </script>
</head>
<body>
  <div id="plot"></div>
  <script type="text/javascript">
    d3.csv("jobs.csv", transform, draw);
  </script>
</body>
</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']);
	d['is_apple'] = (d['company'] == 'Apple');
	return d;
	}

	function draw(data) {

	"use strict";

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

	var x = chart.addCategoryAxis("x", "company");
	x.title = "Manufacturer";
	x.addOrderRule("rank");

	var y = chart.addMeasureAxis("y", "share");
	y.title = "Market Share";

	chart.addSeries("Market Share", dimple.plot.bar);

	chart.draw();

	svg.select('.dimple-apple')
	.attr('fill', 'salmon');

	};

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