D3 Examples - S18 - HW 3

xxxxxxxxxx
 
<!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>
// 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
​
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;
    // creates new svg <g> space, sets new (0,0) at left, top margin
  // 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) {  if (d.letter =="A") {return "MAROON"} 
                                 else if (d.letter =="B") {return "#93400D"} 
                                 else if (d.letter =="C") {return "#F5330A"}  
                                 else if (d.letter =="D") {return "red"} 
                                 else if (d.letter =="E") {return "ORANGERED"}  
                                 else if (d.letter =="F") {return "ORANGE"} 
                                 else if (d.letter =="G") {return "PINK"} 
                                 else if (d.letter =="H") {return "fuchsia"} 
                                 else if (d.letter =="I") {return "purple"} 
                                 else if (d.letter =="J") {return "KHAKI"}
                                 else if (d.letter =="K") {return "SANDYBROWN"} 
                                 else if (d.letter =="L") {return "gOLD"}  
                                 else if (d.letter =="M") {return "yELLOW"} 
                                 else if (d.letter =="N") {return "#CCFF33"}  
                                 else if (d.letter =="O") {return "yELLOWGREEN"} 
                                 else if (d.letter =="P") {return "LIGHTGREEN"} 
                                 else if (d.letter =="Q") {return "sPRINGGREEN"} 
                                 else if (d.letter =="R") {return "OLIVE"} 
                                 else if (d.letter =="S") {return "green"} 
                                 else if (d.letter =="T") {return "DARKGREEN"} 
                                 else if (d.letter =="U") {return "teal"}  
                                 else if (d.letter =="V") {return " #19EBFA"} 
                                 else if (d.letter =="W") {return "LIGHTBLUE"} 
                                 else if (d.letter =="X") {return "BLUE"} 
                                 else if (d.letter =="Y") {return "nAVY"} 
                                 else if (d.letter =="Z") {return "DARKBLUE"}; })  // 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 <= .01) {return "Pink"} 
                                 else if (d.frequency >.01 && d.frequency <=.02){return"HotPink"}
                                 else if (d.frequency >.02 && d.frequency <=.03) {return "DeepPink"} 
                                 else if (d.frequency >.03 && d.frequency <=.04){return"PaleVioletRed"}
                                 else if (d.frequency >.04 && d.frequency <=.05) {return "MediumVioletRed"} 
                                 else if (d.frequency >.05 && d.frequency <=.06){return"lightcoral"}
                                 else if (d.frequency >.06 && d.frequency <=.07) {return "IndianRed"}
                                 else if (d.frequency >.07 && d.frequency <=.08){return"Crimson"}
                                 else if (d.frequency >.08 && d.frequency <=.09) {return "FireBrick"} 
                                 else if (d.frequency >.09 && d.frequency <=.10){return"Red"}
                                 else if (d.frequency >.10){return"OrangeRed"};}) // <== Right here};
});
</script>
</body>
</html>
    