hdickie · August 2, 2017 03:33
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/histogram-test.csv b/histogram-test.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
 </head>

 <body>
  <svg width="960" height="500" id = "vis1"></svg>
  <script>
    var w = 960, h = 500;
    
    var svg = d3.select("#vis1"),
      margin = {top: 20, right: 80, bottom: 30, left: 60},
      width = svg.attr("width") - margin.left - margin.right,
      height = svg.attr("height") - margin.top - margin.bottom,
      g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var wordScale = d3.scaleBand().rangeRound([0,w]).padding(0.1);
    var freq = d3.scaleLinear().rangeRound([h,0]);
    
    
    	d3.csv("histogram-test.csv", function(error,data){
        if (error) throw error;
        
        words = [];
        values = [];
        
        for (var i = 0 ; i < data.length; ++i){
          words.push(data[i].word);
          values.push(data[i].frequency);
        }
        
        //var labelOffset = d3.scaleBand().domain(words).rangeRound([0,w])
        
        wordScale.domain(words);
        freq.domain([0,18]);
        
        console.log(freq(2));
        
        var bars = g.selectAll("bar").data(data).enter().append("rect")
          .attr("class", "bar")
          .attr("width", wordScale.bandwidth())
          .attr("fill", "blue")
          .attr("x", function(d) {
            return wordScale(d.word);
          })
          .attr("y", function(d) {
            return margin.bottom;
          })
          .attr("height", function(d) {
            return wordScale(d.word);
      	});
        
        var labels = g.selectAll("label").data(data).enter().append("text")
        	.attr("class","label")
        	.attr("text",function(d){
            return d.word
          })
        	.attr("x", function(d){
            return wordScale(d.word)
          })
        	.attr("y", 5);
        
      });
  </script>
 </body>
diff --git a/speak.csv b/speak.csv
	word	frequency
	good	5
	bad	1
	excellent	10
	verycool	9
	stellar	8
	magnificent	7
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<svg width="960" height="500" id = "vis1"></svg>
	<script>
	var w = 960, h = 500;

	var svg = d3.select("#vis1"),
	margin = {top: 20, right: 80, bottom: 30, left: 60},
	width = svg.attr("width") - margin.left - margin.right,
	height = svg.attr("height") - margin.top - margin.bottom,
	g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var wordScale = d3.scaleBand().rangeRound([0,w]).padding(0.1);
	var freq = d3.scaleLinear().rangeRound([h,0]);


	d3.csv("histogram-test.csv", function(error,data){
	if (error) throw error;

	words = [];
	values = [];

	for (var i = 0 ; i < data.length; ++i){
	words.push(data[i].word);
	values.push(data[i].frequency);
	}

	//var labelOffset = d3.scaleBand().domain(words).rangeRound([0,w])

	wordScale.domain(words);
	freq.domain([0,18]);

	console.log(freq(2));

	var bars = g.selectAll("bar").data(data).enter().append("rect")
	.attr("class", "bar")
	.attr("width", wordScale.bandwidth())
	.attr("fill", "blue")
	.attr("x", function(d) {
	return wordScale(d.word);
	})
	.attr("y", function(d) {
	return margin.bottom;
	})
	.attr("height", function(d) {
	return wordScale(d.word);
	});

	var labels = g.selectAll("label").data(data).enter().append("text")
	.attr("class","label")
	.attr("text",function(d){
	return d.word
	})
	.attr("x", function(d){
	return wordScale(d.word)
	})
	.attr("y", 5);

	});
	</script>
	</body>