S18 - HW 3 - Bar Chart

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

** Modified README.md by dralph **

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

The mark for the bar chart is a Line.

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

Length which maps to the frequency attribute (numerical/quantitative).
Position on the x axis which maps to the letter attribute (label/categorical).

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

These channels remain the same:

Length which maps to the frequency attribute (numerical/quantitative).
Position on the x axis which maps to the letter attribute (label/categorical).

Added:

Hue channel which maps to the letter attribute (label/categorical).

Hue/Color Assignments:

"#1b70fc"--> A
"#faff16"--> B
"#d50527"--> C
"#158940"--> D
"#f898fd"--> E
"#24c9d7"--> F
"#cb9b64"--> G
"#866888"--> H
"#22e67a"--> I
"#e509ae"--> J
"#9dabfa"--> K
"#437e8a"--> L
"#b21bff"--> M
"#ff7b91"--> N
"#94aa05"--> O
"#ac5906"--> P
"#82a68d"--> Q
"#fe6616"--> R
"#7a7352"--> S
"#f9bc0f"--> T
"#b65d66"--> U
"#07a2e6"--> V
"#c091ae"--> W
"#8a91a7"--> X
"#88fc07"--> Y
"#ea42fe"--> Z

Q4. 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.

These channels remain the same:

Length which maps to the frequency attribute (numerical/quantitative).
Position on the x axis which maps to the letter attribute (label/categorical).

Added:

Color saturation channel (magnitude/ordered data) which maps to the frequency attribute (numerical/quantitative).

Channels that map to frequency:

Length which maps to the frequency attribute (numerical/quantitative).
Color saturation channel (magnitude/ordered data) which maps to the frequency attribute (numerical/quantitative).

References:

https://jnnnnn.blogspot.com.au/2017/02/distinct-colours-2.html
https://bl.ocks.org/d3indepth/fabe4d1adbf658c0b73c74d3ea36d465
https://stackoverflow.com/questions/35186840/add-different-colors-to-each-bar-in-d3
/weiglemc/6185069
https://bl.ocks.org/enjalot/7c0fe907ba2010fed420
https://github.com/d3/d3-color

forked from mbostock's block: Bar Chart

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

<!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

// 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 + ")");
  
// Added by dralph
// Set up color scale for letters and 26 colors
var colorScale = d3.scaleOrdinal()
.domain(x1)
.range(["#1b70fc", "#faff16", "#d50527", "#158940", "#f898fd", "#24c9d7", "#cb9b64", "#866888", "#22e67a", "#e509ae", "#9dabfa", "#437e8a", "#b21bff", "#ff7b91", "#94aa05", "#ac5906", "#82a68d", "#fe6616", "#7a7352", "#f9bc0f", "#b65d66", "#07a2e6", "#c091ae", "#8a91a7", "#88fc07", "#ea42fe"]);
// End dralph

d3.tsv("data.tsv", function(d) {
  d.frequency = +d.frequency;    // 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.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); })
      // Modified by dralph
      .style("fill", function(d,i) { return colorScale(i); })  // 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; })]);
  
  // Added by dralph
  var maxfreq = d3.max(data, function(d) { return d.frequency; });
  
  var c = d3.hsl("teal");
  
  // Func calculates the Saturation value 0 to 1
  function getsat (f)
  {  	
    c.s = (f/maxfreq);
  }  
  // End dralph

// 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); })
      // Modified by dralph
      .style("fill", function(d) { getsat(d.frequency); return c; })  // color of the bars
  ;
});
</script>
</body>
</html>

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

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