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
What is the type of mark used in the bar chart?
List the channels, the attribute they are mapped to, and the data type of that attribute.
After your changes, list the channels, the attribute they are mapped to, and the data type of that attribute.
After your changes, list the channels, the attribute they are mapped to, and the data type of that attribute.List all of the channels mapped to the frequency attribute.
References
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;} .legend { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 60%; }</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>// 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 + ")");// Eric - Color scalevar colorScale1 = d3.scaleOrdinal(d3.schemeCategory20);var colorScale2 = d3.scaleSequential(d3.interpolateOranges).domain([height, 0]); 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) {return colorScale1(i)}) // color of the bars - steelblue var legend = svg1.selectAll(".legend") .data(data) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(75," + i * 20 + ")"; }); legend.append("rect") .attr("x", width-25) .attr("width", 10) .attr("height", 10) .style("fill", function(d,i){return colorScale1(i)}); legend.append("text") .attr("x", width-30) .attr("y", 8) .attr("dy", ".35em") .attr("font-size", "1em") .style("text-anchor", "end") .text(function(d){return d.letter}) }); // 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) {return colorScale2(y2(d.frequency));}) // color of the bars - teal ;});</script></body></html> https://d3js.org/d3.v4.min.js
https://d3js.org/d3-scale-chromatic.v1.min.js