S18 - HW 3 - Bar Chart

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

** Shwetha Shyam Sunder - 01067337 **

1) Original Bar Chart 1

Mark - Line
Channels - Length, position
Mapping - vertical y-axis(Ferequency), horizontal x-axis(letter)
Data type - Frequency and Letter

a) Modified Bar Chart 1

Channels - Length, position and color hue
Mapping - vertical y-axis(frequency), horizontal x-axis(letter) and Letters
Data type - Frequency(quantitative) and Letter(categorical)

b) Modified Bar Chart 2

Channels - Length, position and color saturation
Mapping - vertical y-axis(frequency), horizontal x-axis(letter) and Frequency
Data type - Frequency(quantitative) and Letter(categorical)

References:

Color Scale D3 - Fill attibutes
Color Brewer - Color hue and Color Saturation

<!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 + ")");

var color = d3.scaleOrdinal()
    .domain(["A", "B", "C","D", "E", "F","G", "H", "I","J", "K", "L","M", "N", "O","P", "Q", "R","S", "T", "U","V", "W", "X","Y", "Z"])
    .range(['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f','#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928',"#333"]);

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", function(d) { return color(d.letter); })  // 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 + ")");

// var colors = ["#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494", "#081d58"];
var color_domain = [0.01,0.025,0.04,0.06,0.08,0.10,0.12];

var fill = d3.scaleLinear()
    .domain(color_domain)
    .range(['#ffffcc','#c7e9b4','#7fcdbb','#41b6c4','#1d91c0','#225ea8','#0c2c84']);

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; })]);

// var colorScale = d3.scaleLinear()
  // .domain([0, colors.length - 1, d3.max(data, function(d) {
  //   return d;
  // })])
  // .range(colors);

// 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) { return fill(d.frequency); })  // color of the bars
  ;
});
</script>
</body>
</html>

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

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