S18 - HW 3 - Bar Chart

Hariharan Thiyagarajan

CS 725/825

Spring 2018

Homework 3 - Bar Chart

Inital Bar Chart

Mark Used

The mark used in this is Line

Channel and Attribute

Length,Position is the Channel used in the chart.
They are mapped to the attribute Letter and Frequency.
The data type of the attribute is where letter is Ordered and frequency Quantitative.

Color Hue Channel

Channel and Attribute

Length,Position and color is the Channel used in the chart.
color channel is applied which is Hue based on the letter attribute.Each Bar will have different color based on d3.schemeattribute20 and d3.schemepaired
The data type of the attribute is Ordered

Color Saturation Channel

Channel and Attribute

Length,Position and color is the Channel used in the chart.
color channel is applied which is saturation based on the Frequency attribute.
The data type of the atribute is Quantitative
Each color channel is applied based on the frequency from low to high with color range of light grey to dark grey

<!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>
  <script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.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 + ")");

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
  var color = d3.schemeCategory20;
  color.push.apply(color, d3.schemePaired);
//   ["FFCCCC", "FFE5CC", "99FF99","CCFFCC",
//                 "#DC143C","9999FF","CC99FF","C0C0C0",
//                 "FF33FF","#8B008B","#556B2F","#FF8C00",
//                 "#9932CC","#8B0000","#E9967A","#8FBC8F",
//                 "#483D8B","#2F4F4F","#00CED1","#0073d1",
//                 "#1bd100","#d1001f","#000000","#007554",
//                 "#4f00ef","#d100c6"];
  
  //var accent = d3.scaleOrdinal(d3.schemeOranges[26]);
   //var color = d3.scaleOrdinal(d3.schemeAccent);
  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); }).data(color)
  		.style("fill", function(d){return d;})  // 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 <0.01)return "#e0e0e0";
   else if(d.frequency <0.02 && d.frequency>=0.01)return      "#b2b2b2";
   else if(d.frequency <0.03 && d.frequency>=0.02)return      "#a0a0a0";
   else if(d.frequency <0.05 && d.frequency>=0.03)return      "#919191";
    else if(d.frequency <0.06 && d.frequency>=0.05)return      "#828282";
    else if(d.frequency <0.07 && d.frequency>=0.06)return      "#606060";
    else if(d.frequency <0.08 && d.frequency>=0.07)return      "#4c4c4c";
     else if(d.frequency <0.09 && d.frequency>=0.08)return    "#3a3a3a";
    else if(d.frequency <0.10 && d.frequency>=0.09)return    "#282828";
     else if(d.frequency >0.10 )return    "#000000";
    
    
  })
    } )  // color of the bars
  ;

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

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

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

https://d3js.org/d3-color.v1.min.js

https://d3js.org/d3-interpolate.v1.min.js