Skip to content

Instantly share code, notes, and snippets.

@zischwartz
Created November 2, 2017 17:33
Show Gist options
  • Save zischwartz/cb599f45216a92a0271f77e11f97b9ee to your computer and use it in GitHub Desktop.
Save zischwartz/cb599f45216a92a0271f77e11f97b9ee to your computer and use it in GitHub Desktop.
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment