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):
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:
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:
xxxxxxxxxx<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 1var 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-scalevar 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 marginvar 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> https://d3js.org/d3.v4.min.js
https://d3js.org/d3-scale-chromatic.v1.min.js