S19 - HW 4 - Bar Chart

Chandrasekhar Reddy Muthyala - 01088628

CS 725/825

Spring 2019

See the assignment instructions at http://www.cs.odu.edu/~mweigle/CS725-S19/HW3

Homework 3 - Bar Chart

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.

Inital Bar Chart

Mark Used: 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.

After Changes

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.scaleOrdinal and d3.schemeCategory10
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. Each Bar will have different color based on frequency using d3.scaleSequential and d3.interpolateBlues.

References

https://beta.observablehq.com/@mbostock/d3-bar-chart
https://github.com/d3/d3-scale#sequential-scales
https://bl.ocks.org/pstuffa/d5934843ee3a7d2cc8406de64e6e4ea5
https://bl.ocks.org/pstuffa/3393ff2711a53975040077b7453781a9

forked from cmuth001's block: S19 - HW 3 - Bar Chart

forked from cmuth001's block: S19 - HW 4 - Bar Chart

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.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>

// 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;

var x1 = d3.scaleBand().rangeRound([0, width]).padding(0.2),
    y1 = d3.scaleLinear().rangeRound([height, 0]); 
// // 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 + ")");

// load data
  d3.tsv("data.tsv").then(function(data) {
     data.forEach(function(d) {
    	d.amount = parseInt(d.amount);
       console.log("amount:"+d.amount);
     });
  // 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.donor	; }));  
  // maps domain of y values (frequencies 0, max freq) to range of positions on y-axis
  y1.domain([0, d3.max(data, d => d.amount)]); // shorthand

// 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 ("Millions $")
  
  // bars
  g1.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { console.log ("letter: " + d.donor	 + ", x: " + x1(d.donor	)); return x1(d.donor	); })
      .attr("y", function(d) { console.log ("freq: " + d.amount + ", y: " + d.amount); return y1(d.amount); })
      .attr("width", x1.bandwidth()) // width of each band 
      .attr("height", function(d) { return height - y1(d.amount); })
  		.style("fill", function(d, i) { return "lightBlue"; });  // color of the bars
  ;
});

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

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

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