dtchepak/README.md

## README.md

      
    Raw
  

              README.md
            
          
    My attempt at extending Mike's Let's make a bar chart, III example with updates.

  
## data-chars.tsv

          
            name
            value

            
              A
              .08167

            
              B
              .01492

            
              C
              .02782

            
              D
              .04253

            
              E
              .12702

            
              F
              .02288

            
              G
              .02015

            
              H
              .06094

            
              I
              .06966

            
              J
              .00153

            
              K
              .00772

            
              L
              .04025

            
              M
              .02406

            
              N
              .06749

            
              O
              .07507

            
              P
              .01929

            
              Q
              .00095

            
              R
              .05987

            
              S
              .06327

            
              T
              .09056

            
              U
              .02758

            
              V
              .00978

            
              W
              .02360

            
              X
              .00150

            
              Y
              .01974

            
              Z
              .00074

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>D3 newbie updates a bar chart</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
.bar {
  fill: steelblue;
}
.bar:hover {
    fill: brown;
}

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

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

.x.axis path {
    display: none;
}
</style>
</head>
<body>
<p>
    Adapted from <a href="http://bost.ocks.org/mike/bar/3/">http://bost.ocks.org/mike/bar/3/</a>.
</p>

<svg id="mychart" class="chart"></svg>

<div>
<form>
    <textarea id="textToAnalyse" name="textToAnalyse" cols="40" rows=5"></textarea>
    <input id="submitBtn" type="button" value="Update"></input>
</form>
</div>

<script>
var outerWidth = 960, outerHeight = 500;
var margin = { top: 20, right: 30, bottom: 30, left: 40 },
    width  = outerWidth - margin.left - margin.right,
    height = outerHeight - 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, "%");
var chart = d3.select("#mychart")
              .attr("width", outerWidth)
              .attr("height", outerHeight)
            .append("g")
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

d3.tsv("data-chars.tsv", type, update);

function update(err, data) {
    x.domain(data.map(function(d) { return d.name; }));
    y.domain([0, d3.max(data, function(d) { return d.value; })]);

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

    chart.select(".y.axis").remove();
    chart.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");

    var bar = chart.selectAll(".bar")
            .data(data, function(d) { return d.name; });
    // new data:
    bar.enter().append("rect")
       .attr("class", "bar")
       .attr("x", function(d) { return x(d.name); })
       .attr("y", function(d) { return y(d.value); })
       .attr("height", function(d) { return height - y(d.value); })
       .attr("width", x.rangeBand());
    // removed data:
    bar.exit().remove();
    // updated data:
    bar
       .transition()
       .duration(750)
          .attr("y", function(d) { return y(d.value); })
          .attr("height", function(d) { return height - y(d.value); });
    };

function type(d) {
    d.value = +d.value;
    return d;
}

document.getElementById("submitBtn")
        .onclick = function() {
                        var f = freqs(document.getElementById("textToAnalyse").value);
                        update({}, f);
                    }

function freqs(str) {
    var s = str.toUpperCase()
    var n = s.length
    var x = {}
    for (var i = "A".charCodeAt(0); i<="Z".charCodeAt(0); i++) {
        x[String.fromCharCode(i)] = 0;
    }
    for (var i=0; i<s.length; i++) {
        if (/[A-Z]/.test(s[i])) {
            x[s[i]]++;
        }
    }
    var f = []
    for (var c in x) {
        f.push( { name: c, value: x[c]/=n });
    }
    return f;
}
</script>
</body>
</html>
	name	value
	A	.08167
	B	.01492
	C	.02782
	D	.04253
	E	.12702
	F	.02288
	G	.02015
	H	.06094
	I	.06966
	J	.00153
	K	.00772
	L	.04025
	M	.02406
	N	.06749
	O	.07507
	P	.01929
	Q	.00095
	R	.05987
	S	.06327
	T	.09056
	U	.02758
	V	.00978
	W	.02360
	X	.00150
	Y	.01974
	Z	.00074
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>D3 newbie updates a bar chart</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style>
	.bar {
	fill: steelblue;
	}
	.bar:hover {
	fill: brown;
	}

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

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

	.x.axis path {
	display: none;
	}
	</style>
	</head>
	<body>
	<p>
	Adapted from <a href="http://bost.ocks.org/mike/bar/3/">http://bost.ocks.org/mike/bar/3/</a>.
	</p>

	<svg id="mychart" class="chart"></svg>

	<div>
	<form>
	<textarea id="textToAnalyse" name="textToAnalyse" cols="40" rows=5"></textarea>
	<input id="submitBtn" type="button" value="Update"></input>
	</form>
	</div>

	<script>
	var outerWidth = 960, outerHeight = 500;
	var margin = { top: 20, right: 30, bottom: 30, left: 40 },
	width = outerWidth - margin.left - margin.right,
	height = outerHeight - 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, "%");
	var chart = d3.select("#mychart")
	.attr("width", outerWidth)
	.attr("height", outerHeight)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

	d3.tsv("data-chars.tsv", type, update);

	function update(err, data) {
	x.domain(data.map(function(d) { return d.name; }));
	y.domain([0, d3.max(data, function(d) { return d.value; })]);

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

	chart.select(".y.axis").remove();
	chart.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");

	var bar = chart.selectAll(".bar")
	.data(data, function(d) { return d.name; });
	// new data:
	bar.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return x(d.name); })
	.attr("y", function(d) { return y(d.value); })
	.attr("height", function(d) { return height - y(d.value); })
	.attr("width", x.rangeBand());
	// removed data:
	bar.exit().remove();
	// updated data:
	bar
	.transition()
	.duration(750)
	.attr("y", function(d) { return y(d.value); })
	.attr("height", function(d) { return height - y(d.value); });
	};

	function type(d) {
	d.value = +d.value;
	return d;
	}

	document.getElementById("submitBtn")
	.onclick = function() {
	var f = freqs(document.getElementById("textToAnalyse").value);
	update({}, f);
	}

	function freqs(str) {
	var s = str.toUpperCase()
	var n = s.length
	var x = {}
	for (var i = "A".charCodeAt(0); i<="Z".charCodeAt(0); i++) {
	x[String.fromCharCode(i)] = 0;
	}
	for (var i=0; i<s.length; i++) {
	if (/[A-Z]/.test(s[i])) {
	x[s[i]]++;
	}
	}
	var f = []
	for (var c in x) {
	f.push( { name: c, value: x[c]/=n });
	}
	return f;
	}
	</script>
	</body>
	</html>