pm5/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Distribution of users on wethepeople.tw


## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Distribution of users on wethepeople.tw</title>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="//cdn.firebase.com/v0/firebase.js"></script>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      (function () {
        function reverseScale(scale) {
          return d3.scale.linear()
        }
        function chart() {
          var width = 960,
            height = 600,
            margin = { top: 30, right: 30, bottom: 50, left: 50 };
          var yScale = d3.scale.linear()
              .range([0, height]);
          var yAxis = d3.svg.axis()
              .scale(yScale)
              .orient("left");
          var xScale = d3.scale.linear()
              .range([0, width]);
          var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom");

          function getFirebase(done) {
            var root = new Firebase('https://askkkkk.firebaseio.com/');
            root.child('user_signatures').once('value', function (snap) {
              done(snap.val());
            });
          };

          function keys(obj) {
            var count = 0;
            for (var name in obj) {
              ++count;
            }
            return count;
          }

          function layoutData(user_signatures) {
            var data = [];
            for (var user in user_signatures) {
              var count = keys(user_signatures[user])
              if (! data[count]) {
                data[count] = 0;
              }
              ++data[count];
            }
            for (var i = 0; i < data.length; i++) {
              if (! data[i]) { data[i] = 0; }
            };
            return data;
          }

          function draw(selection) {
            var svg = selection.append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
              .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            getFirebase(function (user_signatures) {
              var data = layoutData(user_signatures);
              yScale.domain([1200, 0]);
              xScale.domain([0, 50]);
              var bar = svg.selectAll("g.bar")
                  .data(data)
                .enter().append("g")
                  .attr("class", "bar")
                  .attr("transform", function (d, i) { return "translate(" + (xScale(i) - xScale(1) * 0.4) + ",0)"; });
              bar.append("rect")
                .attr("height", function (d) { return height - yScale(d); })
                .attr("width", xScale(1) * 0.8)
                .attr("transform", function (d) { return "translate(0," + yScale(d) + ")"; })

              svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
              svg.append("g")
                .attr("class", "y axis")
                .call(yAxis);
              svg.append("g")
                  .attr("class", "x label")
                  .attr("transform", "translate(" + (width - 35) + "," + (height - 10) + ")")
                .append("text")
                  .text("連署數");
              svg.append("g")
                  .attr("class", "y label")
                  .attr("transform", "translate(10,5)rotate(90)")
                .append("text")
                  .text("人數");
            });
          }

          return draw;
        }
        d3.select("#chart")
          .call(chart());
      })();
    </script>
    <style>
      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
      .bar rect {
        fill: steelblue;
        shape-rendering: crispEdges;
      }
    </style>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Distribution of users on wethepeople.tw</title>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//cdn.firebase.com/v0/firebase.js"></script>
	</head>
	<body>
	<div id="chart"></div>
	<script>
	(function () {
	function reverseScale(scale) {
	return d3.scale.linear()
	}
	function chart() {
	var width = 960,
	height = 600,
	margin = { top: 30, right: 30, bottom: 50, left: 50 };
	var yScale = d3.scale.linear()
	.range([0, height]);
	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");
	var xScale = d3.scale.linear()
	.range([0, width]);
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom");

	function getFirebase(done) {
	var root = new Firebase('https://askkkkk.firebaseio.com/');
	root.child('user_signatures').once('value', function (snap) {
	done(snap.val());
	});
	};

	function keys(obj) {
	var count = 0;
	for (var name in obj) {
	++count;
	}
	return count;
	}

	function layoutData(user_signatures) {
	var data = [];
	for (var user in user_signatures) {
	var count = keys(user_signatures[user])
	if (! data[count]) {
	data[count] = 0;
	}
	++data[count];
	}
	for (var i = 0; i < data.length; i++) {
	if (! data[i]) { data[i] = 0; }
	};
	return data;
	}

	function draw(selection) {
	var svg = selection.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	getFirebase(function (user_signatures) {
	var data = layoutData(user_signatures);
	yScale.domain([1200, 0]);
	xScale.domain([0, 50]);
	var bar = svg.selectAll("g.bar")
	.data(data)
	.enter().append("g")
	.attr("class", "bar")
	.attr("transform", function (d, i) { return "translate(" + (xScale(i) - xScale(1) * 0.4) + ",0)"; });
	bar.append("rect")
	.attr("height", function (d) { return height - yScale(d); })
	.attr("width", xScale(1) * 0.8)
	.attr("transform", function (d) { return "translate(0," + yScale(d) + ")"; })

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);
	svg.append("g")
	.attr("class", "x label")
	.attr("transform", "translate(" + (width - 35) + "," + (height - 10) + ")")
	.append("text")
	.text("連署數");
	svg.append("g")
	.attr("class", "y label")
	.attr("transform", "translate(10,5)rotate(90)")
	.append("text")
	.text("人數");
	});
	}

	return draw;
	}
	d3.select("#chart")
	.call(chart());
	})();
	</script>
	<style>
	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	.bar rect {
	fill: steelblue;
	shape-rendering: crispEdges;
	}
	</style>
	</body>
	</html>