piyushchauhan2011 · February 11, 2015 22:04 · piyushchauhan2011 · Feb 11, 2015
diff --git a/question1_equityzen.html b/question1_equityzen.html
 <!DOCTYPE html>
 <html>
  <meta charset="utf-8">
  <head>
    <title>Question 1 - EquityZen</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
  </head>
  <style>

 .bar {
  fill: steelblue;
 }

 .bar:hover {
  fill: brown;
 }

 .axis {
  font: 10px sans-serif;
 }

 .axis path,
 .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
 }

 .x.axis path {
  display: none;
 }

 @media (max-width: 767px) {
  #searchbar > .navbar-form input {
    width: 100%;
  }
 }

 @media (min-width: 768px) and (max-width: 991px) {
  #searchbar > .navbar-form input {
    width: 205px;
  }
 }

 @media (min-width: 992px) and (max-width: 1199px) {
  #searchbar > .navbar-form input {
    width: 425px;
  }
 }

 @media (min-width: 1200px) {
  #searchbar > .navbar-form input {
    width: 625px;
  }
 }

  </style>
  <body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Question 1</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div id="searchbar">
          <form class="navbar-form navbar-left" role="search" id="searchForm">
            <div class="form-group">
              <input id="searchQuery" type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div class="container">
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    counts = {};
    function clear_counts() {
      counts = {
        'a': 0,
        'b': 0,
        'c': 0,
        'd': 0,
        'e': 0,
        'f': 0,
        'g': 0,
        'h': 0,
        'i': 0,
        'j': 0,
        'k': 0,
        'l': 0,
        'm': 0,
        'n': 0,
        'o': 0,
        'p': 0,
        'q': 0,
        'r': 0,
        's': 0,
        't': 0,
        'u': 0,
        'v': 0,
        'w': 0,
        'x': 0,
        'y': 0,
        'z': 0,
        'other': 0,
      };
    }

    function count_letters(name) {
      name.split('').forEach(function(letter) {
        var tmp = letter.toLowerCase();
        if(tmp >= 'a' && tmp <= 'z') counts[tmp] += 1;
        else counts['other'] += 1;
      });
    }

    function make_chart() {
      var margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

      var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

      var y = d3.scale.linear()
        .range([height, 0]);

      var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

      var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(10, "%");

      jQuery(".container").html("");
      var svg = d3.select(".container").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 + ")");

      var tmp_data = [];
      var xdomain = _.keys(counts);
      var ydomain = _.values(counts);
      xdomain.forEach(function(letter) {
        tmp_data.push({ 'letter': letter, 'frequency': counts[letter] });
      });
      // x.domain(xdomain);
      // y.domain([0, d3.max(ydomain)]);
      x.domain(tmp_data.map(function(d) { return d.letter; }));
      y.domain([0, d3.max(tmp_data, function(d) { return d.frequency; })]);

      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

      svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Frequency");

      svg.selectAll(".bar")
        .data(tmp_data)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.letter); })
        .attr("width", x.rangeBand())
        .attr("y", function(d) { return y(d.frequency); })
        .attr("height", function(d) { return height - y(d.frequency); });
    }

    function fetch_and_execute(query) {
      jQuery.ajax({
        url: "https://api.angel.co/1/search?query=" + query + "&type=User",
        type: "GET",
        dataType: "JSONP",
        success: function(data) {
          clear_counts();
          var length = data.length < 5 ? data.length : 5;
          for(var i=0;i<length;i++) {
            count_letters(data[i].name);
          }
          make_chart();
        }
      });
    }

    jQuery("#searchForm").submit(function(e) {
      e.preventDefault();
      var query = jQuery("#searchQuery").val();
      fetch_and_execute(query);
    });

    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<meta charset="utf-8">
	<head>
	<title>Question 1 - EquityZen</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
	</head>
	<style>

	.bar {
	fill: steelblue;
	}

	.bar:hover {
	fill: brown;
	}

	.axis {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	display: none;
	}

	@media (max-width: 767px) {
	#searchbar > .navbar-form input {
	width: 100%;
	}
	}

	@media (min-width: 768px) and (max-width: 991px) {
	#searchbar > .navbar-form input {
	width: 205px;
	}
	}

	@media (min-width: 992px) and (max-width: 1199px) {
	#searchbar > .navbar-form input {
	width: 425px;
	}
	}

	@media (min-width: 1200px) {
	#searchbar > .navbar-form input {
	width: 625px;
	}
	}

	</style>
	<body>
	<nav class="navbar navbar-default">
	<div class="container-fluid">
	<!-- Brand and toggle get grouped for better mobile display -->
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="#">Question 1</a>
	</div>

	<!-- Collect the nav links, forms, and other content for toggling -->
	<div id="searchbar">
	<form class="navbar-form navbar-left" role="search" id="searchForm">
	<div class="form-group">
	<input id="searchQuery" type="text" class="form-control" placeholder="Search">
	</div>
	<button type="submit" class="btn btn-default">Submit</button>
	</form>
	</div><!-- /.navbar-collapse -->
	</div><!-- /.container-fluid -->
	</nav>

	<div class="container">
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	counts = {};
	function clear_counts() {
	counts = {
	'a': 0,
	'b': 0,
	'c': 0,
	'd': 0,
	'e': 0,
	'f': 0,
	'g': 0,
	'h': 0,
	'i': 0,
	'j': 0,
	'k': 0,
	'l': 0,
	'm': 0,
	'n': 0,
	'o': 0,
	'p': 0,
	'q': 0,
	'r': 0,
	's': 0,
	't': 0,
	'u': 0,
	'v': 0,
	'w': 0,
	'x': 0,
	'y': 0,
	'z': 0,
	'other': 0,
	};
	}

	function count_letters(name) {
	name.split('').forEach(function(letter) {
	var tmp = letter.toLowerCase();
	if(tmp >= 'a' && tmp <= 'z') counts[tmp] += 1;
	else counts['other'] += 1;
	});
	}

	function make_chart() {
	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var x = d3.scale.ordinal()
	.rangeRoundBands([0, width], .1);

	var y = d3.scale.linear()
	.range([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.ticks(10, "%");

	jQuery(".container").html("");
	var svg = d3.select(".container").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 + ")");

	var tmp_data = [];
	var xdomain = _.keys(counts);
	var ydomain = _.values(counts);
	xdomain.forEach(function(letter) {
	tmp_data.push({ 'letter': letter, 'frequency': counts[letter] });
	});
	// x.domain(xdomain);
	// y.domain([0, d3.max(ydomain)]);
	x.domain(tmp_data.map(function(d) { return d.letter; }));
	y.domain([0, d3.max(tmp_data, function(d) { return d.frequency; })]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Frequency");

	svg.selectAll(".bar")
	.data(tmp_data)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return x(d.letter); })
	.attr("width", x.rangeBand())
	.attr("y", function(d) { return y(d.frequency); })
	.attr("height", function(d) { return height - y(d.frequency); });
	}

	function fetch_and_execute(query) {
	jQuery.ajax({
	url: "https://api.angel.co/1/search?query=" + query + "&type=User",
	type: "GET",
	dataType: "JSONP",
	success: function(data) {
	clear_counts();
	var length = data.length < 5 ? data.length : 5;
	for(var i=0;i<length;i++) {
	count_letters(data[i].name);
	}
	make_chart();
	}
	});
	}

	jQuery("#searchForm").submit(function(e) {
	e.preventDefault();
	var query = jQuery("#searchQuery").val();
	fetch_and_execute(query);
	});

	</script>
	</body>
	</html>