zischwartz/graph.js

## graph.js
function make_graph(data){

  var svg = d3.select("svg")
  // hackily just remove everything from last time.
  // a more sophisticated version would transition nicely
  svg.selectAll("*").remove()

  var margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = +svg.attr("width") - margin.left - margin.right,
      height = +svg.attr("height") - margin.top - margin.bottom;

  var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
      y = d3.scaleLinear().rangeRound([height, 0]);

  var g = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    x.domain(data.map(function(d) { return d.item; }));
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

    g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

    g.append("g")
        .attr("class", "axis axis--y")
        // .call(d3.axisLeft(y).ticks(10, "%"))
        .call(d3.axisLeft(y).ticks(10))
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .text("Frequency");

    g.selectAll(".bar")
      .data(data)
      .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.item); })
        .attr("y", function(d) { return y(d.frequency); })
        .attr("width", x.bandwidth())
        .attr("height", function(d) { return height - y(d.frequency); });
  // });
}

## helpers.js
// takes a string as input, returns an object of the counts of each char
function get_counts(input){
  let result = {}
  let arr = input.split('')
  for (var i = 0; i < arr.length; i++) {
    let char = arr[i]
    if (result[char]){
      result[char]++
    }
    else {
      result[char] = 1
    }
  }
  return result
}

// takes an object of counts, from get_counts
// returns an array of those counts as item, frequences objects
function make_freq_array(obj){
  let result = []
  for (let key in obj){
    result.push({item:key, frequency:obj[key]})
  }
  return result
}

// go through a counts object, return the top one
function get_top_count(obj){
  let max = 0
  let top = ''
  for (let x in obj){
    if (obj[x] > max) {
      top = x
      max = obj[x]
    }
  }
  return {frequency:max, item:top}
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    #app {
      margin-left: auto;
      margin-right: auto;
      width: 900px;
      margin-top: 30px;
    }
    .bar {  fill: steelblue;  }
    .bar:hover { fill: brown; }
    .axis--x path {  display: none; }
    img {display: block; margin-left: auto; margin-right: auto; }
    </style>
  </head>
  <body>
    <div id="app">
      <nav>
        <img src="netscape.gif"/>
        <label>Enter some text: <input id="text_input"></label>
      </nav>
      <svg width="900" height="500"></svg>
      <div id="winner"></div>
    </div>
  </body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <!-- <script src="d3.v4.min.js"></script> -->
  <script src="helpers.js"></script>
  <script src="graph.js"></script>
  <script>
    let text_input = document.getElementById('text_input')

    function key_handler(){
      let val = text_input.value
      let count_obj = get_counts(val)
      let freq_arr = make_freq_array(count_obj)
      make_graph(freq_arr)
      document.getElementById('winner').innerHTML = "Put the winner here!"
    }
    text_input.onkeyup = key_handler

  </script>

</html>
	function make_graph(data){

	var svg = d3.select("svg")
	// hackily just remove everything from last time.
	// a more sophisticated version would transition nicely
	svg.selectAll("*").remove()

	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom;

	var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
	y = d3.scaleLinear().rangeRound([height, 0]);

	var g = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	x.domain(data.map(function(d) { return d.item; }));
	y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

	g.append("g")
	.attr("class", "axis axis--x")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x));

	g.append("g")
	.attr("class", "axis axis--y")
	// .call(d3.axisLeft(y).ticks(10, "%"))
	.call(d3.axisLeft(y).ticks(10))
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", "0.71em")
	.attr("text-anchor", "end")
	.text("Frequency");

	g.selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return x(d.item); })
	.attr("y", function(d) { return y(d.frequency); })
	.attr("width", x.bandwidth())
	.attr("height", function(d) { return height - y(d.frequency); });
	// });
	}
	// takes a string as input, returns an object of the counts of each char
	function get_counts(input){
	let result = {}
	let arr = input.split('')
	for (var i = 0; i < arr.length; i++) {
	let char = arr[i]
	if (result[char]){
	result[char]++
	}
	else {
	result[char] = 1
	}
	}
	return result
	}

	// takes an object of counts, from get_counts
	// returns an array of those counts as item, frequences objects
	function make_freq_array(obj){
	let result = []
	for (let key in obj){
	result.push({item:key, frequency:obj[key]})
	}
	return result
	}

	// go through a counts object, return the top one
	function get_top_count(obj){
	let max = 0
	let top = ''
	for (let x in obj){
	if (obj[x] > max) {
	top = x
	max = obj[x]
	}
	}
	return {frequency:max, item:top}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<style>
	#app {
	margin-left: auto;
	margin-right: auto;
	width: 900px;
	margin-top: 30px;
	}
	.bar { fill: steelblue; }
	.bar:hover { fill: brown; }
	.axis--x path { display: none; }
	img {display: block; margin-left: auto; margin-right: auto; }
	</style>
	</head>
	<body>
	<div id="app">
	<nav>
	<img src="netscape.gif"/>
	<label>Enter some text: <input id="text_input"></label>
	</nav>
	<svg width="900" height="500"></svg>
	<div id="winner"></div>
	</div>
	</body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<!-- <script src="d3.v4.min.js"></script> -->
	<script src="helpers.js"></script>
	<script src="graph.js"></script>
	<script>
	let text_input = document.getElementById('text_input')

	function key_handler(){
	let val = text_input.value
	let count_obj = get_counts(val)
	let freq_arr = make_freq_array(count_obj)
	make_graph(freq_arr)
	document.getElementById('winner').innerHTML = "Put the winner here!"
	}
	text_input.onkeyup = key_handler

	</script>

	</html>