D3 Examples - S18 - HW 3

S18 - HW 3 - Bar Chart

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

My Answers

A line mark is used for the bar charts.

There is a horizontal spatial position channel and a vertical spatial position channel. The horizontal spatial position channel is mapped to the letter attribute. The letter attribute represents the letters used in the English language. The vertical spatial position channel is mapped to the frequency attribute. The frequency attribute represents the frequency for the usage of a letter in the English language.

There is a horizontal spatial position channel, a vertical spatial position channel, and a color hue channel for the first chart. The horizontal spatial position channel and the vertical spatial position channel are the same as described in answer 2. The color hue channel is mapped to the letter attribute. The letter attribute represents the letters used in the English language.

For bar chart 2, there is a horizontal spatial channel, a vertical spatial channel, and a color saturation channel. The horizontal spatial channel and the vertical spatial channel are the same as described in answer 2. The color saturation channel is mapped to the frequency attribute. The frequency attribute represents the frequency for the usage of a letter in the English language.

xxxxxxxxxx
 
<!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> <!-- for color scales -->
​
<style>   
  body {font-family: calibri;} 
  .axis {font: 14px calibri;}
  .label {font: 16px calibri;}
</style>
​
<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>
​
<script>
  //Beginning of most of my code
    
  //Make it possible for each letter category in bar chart 1 to have a unique color hue.
  var colorScale_1 = d3.scaleSequential(d3.interpolateRainbow);
  colorScale_1.domain([0,25]);
  var barFill_1 = function(d, i){return colorScale_1(i);};
  
  //Create a color scale that will be used for the color saturation channel in bar chart 2.
    var colorScale_2 = d3.scaleLinear().domain([0,0.13]).range(["lightgrey","green"]);
  var barFill_2 = function(d, i){return colorScale_2(d.frequency)};
  
  //end of most of my code
  
// chart 1
var svg1 = d3.select("#chart1"), 
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg1.attr("width") - margin.left - margin.right,
    height = +svg1.attr("height") - margin.top - margin.bottom;
​
// 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 + ")");
​
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); })
        .style("fill", barFill_1)  // 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", barFill_2)  // color of the bars
  ;
});
</script>
</body>
</html>
    