D3 Examples - S19 - HW 3

S19 - HW 3 - Bar Chart

David Ash
CS725/825
Spring 2019

BAR CHART

Q1. What is the type of mark used in the bar chart?
A. The mark used is a two-dimenional (2D) mark

Q2. List the channels, the attribute they are mapped to, and the data type of that attribute.
** A.** The channel that is used is the magnitude channel.
The attributes for the magnitude channel are horizontal position, and vertical postion.
Vertical position is mapped to the frequency attribute.
Horizontal position is mapped to the letter attribute

Q3. After your changes, list the channels, the attribute they are mapped to, and the data type of that attribute
** A.** The channels that are used is the magnitude channel, and the identity channel.
The attributes for the magnitude channel are horizontal position, and vertical postion.
The attributes for the identity channel is color hue Vertical position is mapped to the frequency attribute.
Horizontal position is mapped to the letter attribute Color hue is mapped to the letter attribute

Q4. 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.
A. The channels that are used is the magnitude channel.
The attributes for the magnitude channel are horizontal position, vertical postion, and color saturation.
Vertical position is mapped to the frequency attribute.
Horizontal position is mapped to the letter attribute.
Color saturation is mapped to the frequency attribute

xxxxxxxxxx
 
<!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> <!-- 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 + ")");
​
      // load data
      d3.tsv("data.tsv").then(function(data) {
        x1.domain(data.map(function(d) { return d.letter; }));  
        y1.domain([0, d3.max(data, d => d.frequency)]); 
        g1.append("g").attr("class", "axis x-axis").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x1));
        g1.append("g").attr("class", "axis y-axis").call(d3.axisLeft(y1).ticks(10, "#")); 
        g1.append("text").attr("class", "label").attr("x", 0-margin.left).attr("y", 0-margin.top/2) .style("text-anchor", "start").text ("Frequency")
        
        colors=["red","orange","yellow","green","blue","violet"]
        var colorScale = d3.scaleOrdinal(colors)
 
        g1.selectAll(".bar")
          .data(data)
          .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return x1(d.letter); })
            .attr("y", function(d) { 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 colorScale(d.letter)})  // 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 + ")");
​
    // load data
  d3.tsv("data.tsv").then(function(data) {
​
  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 d3.hsl(100, d.frequency*30, 0.5)})  // color of the bars
  ;
});
</script>
</body>
</html>
    