UdochukwuNweke/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    CS 725/825 - Spring 2018 - Homework 3 - Bar Chart
See the assignment instructions at http://www.cs.odu.edu/~mweigle/CS725-S18/HW3
Explanation of how the bar chart is constructed (for the most part) is available at
https://bost.ocks.org/mike/bar/3/
Other helpful links (scale, domain, range):

https://github.com/d3/d3-scale
https://www.dashingd3js.com/d3js-scales

Original README.md
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:

d3-dsv - parse tab-separated values
d3-format - number formatting
d3-scale - position encodings
d3-array - data processing
d3-axis - axes

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


The mark used in the bar chart is a line mark.


The channels are vertical and horizontal spatial positions. The vertical spatial position is mapped to the frequency of the letter usage. The horizontal spatial position is mapped to the letters in english word.

-Data type: Ordered


The channels after editing:


The hue (actual colors)


The channels are vertical and horizontal spatial positions. The vertical spatial position is mapped to the frequency of the letter usage. The horizontal spatial position is mapped to the letters in english word


Data type: Ordered


After editing the bottom chart, the channels are: 


The vertical and horizontal spatial positions, the vertical spatial position encodes the frequency of letter occurence

The next channels is saturation where the letter with the highest frequency has the highest intensity and the least letter has the least intensity. From the bottom chart, the letter "E" has the highest intensity because it has the highest frquency while letter "Z" has the least frquency and the least intensity.

Data Type: Ordered


## data.tsv

          
            letter
            frequency

            
              A
              .08167

            
              B
              .01492

            
              C
              .02782

            
              D
              .04253

            
              E
              .12702

            
              F
              .02288

            
              G
              .02015

            
              H
              .06094

            
              I
              .06966

            
              J
              .00153

            
              K
              .00772

            
              L
              .04025

            
              M
              .02406

            
              N
              .06749

            
              O
              .07507

            
              P
              .01929

            
              Q
              .00095

            
              R
              .05987

            
              S
              .06327

            
              T
              .09056

            
              U
              .02758

            
              V
              .00978

            
              W
              .02360

            
              X
              .00150

            
              Y
              .01974

            
              Z
              .00074

## index.html
<!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>

var colorScale = d3.scaleOrdinal(d3['schemeCategory20']);
var sixColors = ['yellow', 'navy', 'gold', 'lime', 'blue', 'black'];

var sequentialScale = d3.scaleSequential()
  .domain([0, 11])//https://github.com/d3/d3-scale-chromatic
  .interpolator( d3.interpolateBlues );

// 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", function(d, i)
      {
        //credit: https://bl.ocks.org/pstuffa/3393ff2711a53975040077b7453781a9
        if( i < 20 )
          return colorScale(i);
        else
          return sixColors[i-20];
      })  // 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, i)
      {
        return sequentialScale( d.frequency * 100);
      })  // color of the bars
  ;
});
</script>
</body>
</html>
	letter	frequency
	A	.08167
	B	.01492
	C	.02782
	D	.04253
	E	.12702
	F	.02288
	G	.02015
	H	.06094
	I	.06966
	J	.00153
	K	.00772
	L	.04025
	M	.02406
	N	.06749
	O	.07507
	P	.01929
	Q	.00095
	R	.05987
	S	.06327
	T	.09056
	U	.02758
	V	.00978
	W	.02360
	X	.00150
	Y	.01974
	Z	.00074
	<!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>

	var colorScale = d3.scaleOrdinal(d3['schemeCategory20']);
	var sixColors = ['yellow', 'navy', 'gold', 'lime', 'blue', 'black'];

	var sequentialScale = d3.scaleSequential()
	.domain([0, 11])//https://github.com/d3/d3-scale-chromatic
	.interpolator( d3.interpolateBlues );

	// 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", function(d, i)
	{
	//credit: https://bl.ocks.org/pstuffa/3393ff2711a53975040077b7453781a9
	if( i < 20 )
	return colorScale(i);
	else
	return sixColors[i-20];
	}) // 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, i)
	{
	return sequentialScale( d.frequency * 100);
	}) // color of the bars
	;
	});
	</script>
	</body>
	</html>