9

CS 725/825 - Spring 2018 - Homework 3 - Bar Chart

See the assignment instructions at http://www.cs.odu.edu/~mweigle/CS725-S18/HW3

Explanation of how the bar chart is constructed (for the most part) is available at https://bost.ocks.org/mike/bar/3/

Other helpful links (scale, domain, range):

https://github.com/d3/d3-scale
https://www.dashingd3js.com/d3js-scales

Original README.md

This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs conventional margins and a number of D3 features:

d3-dsv - parse tab-separated values
d3-format - number formatting
d3-scale - position encodings
d3-array - data processing
d3-axis - axes

forked from mbostock's block: Bar Chart

forked from weiglemc's block: 9

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

<body>
	<p>Frequency of usage of letters in English</p>
	<h2>Bar Chart 1</h2>
  <div><svg id="chart1" width="800" height="400"></svg></div>
	<h2>Bar Chart 2</h2>
  <div><svg id="chart2" width="800" height="400"></svg></div>

// See https://github.com/d3/d3-scale
var x1 = d3.scaleBand().rangeRound([0, width]).padding(0.3),
    y1 = d3.scaleLinear().rangeRound([height, 0]); // note that we've reversed the range

// creates new svg <g> space, sets new (0,0) at left, top margin
var g1 = svg1.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data1.tsv", function(d) {
  d.Count = +d.Count;    // convert text to number
  return d;
}, function(error, data) {
  if (error) throw error;

// See https://www.dashingd3js.com/d3js-scales
  // maps domain of x values (letters) to range of positions on x-axis
  x1.domain(data.map(function(d) { return d.Team; }));  
  // maps domain of y values (frequencies 0, max freq) to range of positions on y-axis
  y1.domain([0, d3.max(data, function(d) { return d.Count; })]);

// x-axis
  g1.append("g")
    .attr("class", "axis x-axis")
    .attr("transform", "translate(0," + height + ")") // move axis to bottom of chart
    .call(d3.axisBottom(x1));
  
  // y-axis
  g1.append("g")
    .attr("class", "axis y-axis")
    .call(d3.axisLeft(y1).ticks(26, "#")); // number of ticks and type

// y-axis label
  g1.append("text")
  	.attr("class", "label")
    .attr("x", 0-margin.left)       // set x position of label
    .attr("y", 0-margin.top/2)			// set y position of label
    .style("text-anchor", "start")  // left-justify
  	.text ("Wins")
  
  // bars
  g1.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { console.log ("Team: " + d.Team + ", x: " + x1(d.Team)); return x1(d.Team); })
      .attr("y", function(d) { console.log ("Wins: " + d.Count + ", y: " + y1(d.Count)); return y1(d.Count); })
      .attr("width", x1.bandwidth()) // width of each band 
      .attr("height", function(d) { return height - y1(d.Count); })
  		.style("fill", "steelblue")  // color of the bars
  ;
});

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

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js