S18 - HW 3 - Bar Chart

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: S18 - HW 3 - Bar Chart

forked from Lecy277's block: S18 - HW 3 - Bar Chart

HW3 Barchart Q&A

1.What is the type of mark used in the bar chart?

A Line is used as the mark.

2.List the channels, the attribute they are mapped to, and the data type of that attribute.

3.After your changes, list the channels, the attribute they are mapped to, and the data type of that attribute.

The vertical line is the spatial position channel for the quantitative attribute of "Frequency" and the horizontal line is the spatial position channel for the categorical attribute "Letters of the alphabet" with a visual channel added to display each letter of the alphabet with a different color hue. The Colors start with browns at "A" & "B", then Reds for "C" through "F", then Purples for "G" through "I", then Yellows for "J" through "M", then Greens for "N" through "T", and finally blues for "U" through "Z".

4.After your changes, list the channels, the attribute they are mapped to, and the data type of that attribute.List all of the channels mapped to the frequency attribute.

The horizontal line is the spatial position channel for the categorical attribute "Letters of the alphabet" and the vertical line is the spatial position channel for the quantitative attribute of "Frequency" with a color saturation channel added to help distinguish the frequency with which each letter of the alphabet was used based on the frequency tics that range from .01 to .12 as follows:

Frequency tic <= .01 "Pink".

Between frequency tic > 01 && frequency tic <= .02 display as "HotPink".

Between frequency tic >.02 && frequency tic <= .03 display as "DeepPink".

Between frequency tic >.03 && frequency tic <= .04 display as "PaleVioletRed".

Between frequency tic >.04 && frequency tic <= .05 display as "MediumVioletRed".

Between frequency tic >.05 && frequency tic <= .06 display as "lightcoral".

Between frequency tic >.06 && frequency tic <= .07 display as "IndianRed".

Between frequency tic >.07 && frequency tic <= .08 display as "Crimson".

Between frequency tic >.08 && frequency tic<= .09 display as "FireBrick".

Between frequency tic >.09 && frequency tic <= .10 display as "Red".

Frequency tic >.10 display as "OrangeRed".

<!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.1),
    y1 = d3.scaleLinear().rangeRound([height, 0]); // note that we've reversed the range

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

d3.tsv("data.tsv", function(d) {
  d.frequency = +d.frequency;    // convert text to number
  return d;
	}, function(error, data) {
  if (error) throw error;
	// creates new svg <g> space, sets new (0,0) at left, top margin
  // 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.letter; }));  
  // 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.frequency; })]);

// 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(10, "#")); // 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 ("Frequency")
  
  // bars
  g1.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { console.log ("letter: " + d.letter + ", x: " + x1(d.letter)); return x1(d.letter); })
      .attr("y", function(d) { console.log ("freq: " + d.frequency + ", y: " + y1(d.frequency)); return y1(d.frequency); })
      .attr("width", x1.bandwidth()) // width of each band 
      .attr("height", function(d) { return height - y1(d.frequency); })
  		.style("fill", function(d) {  if (d.letter =="A") {return "MAROON"} 
                                 else if (d.letter =="B") {return "#93400D"} 
                                 else if (d.letter =="C") {return "#F5330A"}  
                                 else if (d.letter =="D") {return "red"} 
                                 else if (d.letter =="E") {return "ORANGERED"}  
                                 else if (d.letter =="F") {return "ORANGE"} 
                                 else if (d.letter =="G") {return "PINK"} 
                                 else if (d.letter =="H") {return "fuchsia"} 
                                 else if (d.letter =="I") {return "purple"} 
                                 else if (d.letter =="J") {return "KHAKI"}
                                 else if (d.letter =="K") {return "SANDYBROWN"} 
                                 else if (d.letter =="L") {return "gOLD"}  
                                 else if (d.letter =="M") {return "yELLOW"} 
                                 else if (d.letter =="N") {return "#CCFF33"}  
                                 else if (d.letter =="O") {return "yELLOWGREEN"} 
                                 else if (d.letter =="P") {return "LIGHTGREEN"} 
                                 else if (d.letter =="Q") {return "sPRINGGREEN"} 
                                 else if (d.letter =="R") {return "OLIVE"} 
                                 else if (d.letter =="S") {return "green"} 
                                 else if (d.letter =="T") {return "DARKGREEN"} 
                                 else if (d.letter =="U") {return "teal"}  
                                 else if (d.letter =="V") {return " #19EBFA"} 
                                 else if (d.letter =="W") {return "LIGHTBLUE"} 
                                 else if (d.letter =="X") {return "BLUE"} 
                                 else if (d.letter =="Y") {return "nAVY"} 
                                 else if (d.letter =="Z") {return "DARKBLUE"}; })  // color of the bars
  ; 
});
  
// chart 2  
var svg2 = d3.select("#chart2"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg2.attr("width") - margin.left - margin.right,
    height = +svg2.attr("height") - margin.top - margin.bottom;

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

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

d3.tsv("data.tsv", function(d) {
  d.frequency = +d.frequency; 
  return d;
}, function(error, data) {
  if (error) throw error;

x2.domain(data.map(function(d) { return d.letter; }));
  y2.domain([0, d3.max(data, function(d) { return d.frequency; })]); 
 
  // x-axis
  g2.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x2));

// y-axis
  g2.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y2).ticks(10, "#"));

// y-axis label
  g2.append("text")
  	.attr("class", "label")
    .attr("x", 0-margin.left)
    .attr("y", 0-margin.top/2)
    .style("text-anchor", "begin")
  	.text ("Frequency")
  
  // bars
  g2.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x2(d.letter); })
      .attr("y", function(d) { return y2(d.frequency); })
      .attr("width", x2.bandwidth())
      .attr("height", function(d) { return height - y2(d.frequency); })
  		.style("fill", function(d){ if (d.frequency <= .01) {return "Pink"} 
                                 else if (d.frequency >.01 && d.frequency <=.02){return"HotPink"}
                                 else if (d.frequency >.02 && d.frequency <=.03) {return "DeepPink"} 
                                 else if (d.frequency >.03 && d.frequency <=.04){return"PaleVioletRed"}
                                 else if (d.frequency >.04 && d.frequency <=.05) {return "MediumVioletRed"} 
                                 else if (d.frequency >.05 && d.frequency <=.06){return"lightcoral"}
                                 else if (d.frequency >.06 && d.frequency <=.07) {return "IndianRed"}
                                 else if (d.frequency >.07 && d.frequency <=.08){return"Crimson"}
                                 else if (d.frequency >.08 && d.frequency <=.09) {return "FireBrick"} 
                                 else if (d.frequency >.09 && d.frequency <=.10){return"Red"}
                                 else if (d.frequency >.10){return"OrangeRed"};}) // <== Right here};
});
</script>
</body>
</html>

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

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