D3 Examples - bar chart 1(notated)

xxxxxxxxxx
 
<!--something html 5 wants you to have-->
<!DOCTYPE html>
<meta charset="utf-8">
<!--css to handle the appearance-->
<style>
  
.title {
  font: 20px sans-serif;
  fill: black;
}
  
/*.bar {
  fill: steelblue;
}*/
​
.bar:hover {
  fill: brown;
}
​
.axis {
  font: 10px sans-serif;
}
​
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
</style>
​
<!--body begins here-->
<body>
  
<!--import the D3 library-->
<script src="https://d3js.org/d3.v3.min.js"></script>
​
<!--starts our javascript-->
<script>
​
//variable margin, it's an object
var margin = {top: 20, right: 20, bottom: 80, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
//variable X is a D3 scale--"D3 scales are cool"; mapping btwn one set of values and another set of values ("domain" corresponds to input numbers; "range" corresponds to output numbers); linear (numbers) v ordinal(categories)
​
var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);
​
var y = d3.scale.linear()
    .range([height, 0]);
​
//defining axis; scale is set to var x/y, orientation is where it is
var xAxis = d3.svg.axis()
        .scale(x)
    .orient("bottom");
​
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
​
//create an svg by creating variable named svg (name doesn't matter!), then selecting the body and appending an svg to the body; the 2 SVGs are different!!! Width, height, and margin are previously defined variables
​
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
//appending a group
        .append("g")
//transforming the group(because attr follows append, we are operating on the group, translating it)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
//This is where we are calling the data. d3.csv is a function that accepts 3 arguments (2 of these arguments are functions): the data file located up at the top [...3], type function that turns text into numbers, and a third a function that prints an error if the data file is wrong and stops automatically. If not, it filters the rows in the CSV file and adds them to an object called 'data'.
  
//x and y .domain are defining the areas where the map goes to based on the data
  
d3.csv("data.csv", type, function(error, data) {
  if (error) throw error;
    data = data.filter(function(row) {
        return row['TimePoint'] == '5';
    })
  x.domain(data.map(function(d) { return d.GeneNumber; }));
  y.domain([0, d3.max(data, function(d) { return d.Expression; })]);
​
//appending a text element title, calling css from the beginning where we defined title
  svg.append("text")
    .attr("class", "title")
    .attr("text-anchor", "middle")
    .attr("x", width/2)
    .attr("y", 26)
    .attr("shape-rendering", "crispEdges")
    .text("Kampy Gene Number versus Expression (5 minutes post-infection)");
​
//making an X axis: appending another group and assigning it to variable name x_group, giving it SVG class x axis, does a thing based on the css, movin it to the bottom. Then rotating the text.
  x_group = svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
  
  x_group
    .selectAll("text")
    .attr("transform", function (d) {return "rotate(-60," + 0 + "," + 14 +  ")"});
​
//positioning the x axis label
  svg.append("g")
    .attr("class", "axis")
    .append("text")
      .attr("font-size", 16)
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height + margin.bottom/2)
    .attr("shape-rendering", "crispEdges")
    .text("Kampy Gene Number");
 
 //adding the y axis and positioning the y axis label  
  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("font-size", 16)
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Expression (RPKM)");
​
//making the bars (including binding the data); .bar means I'm gonna create some objects and they will have css class bar; then I code what the bar is gonna be, bind to data object way up earlier; line 133 positions bar on axis by calling x scale; rangeband sets width based on how much space there is and how many bars there are; line 135 is determining where the top of the bar is and line 136 fills in the space from the top of the bar to the x axis
​
  svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.GeneNumber); })
    .attr("width", x.rangeBand())
    .attr("y", function(d) { return y(d.Expression); })
    .attr("height", function(d) { return height - y(d.Expression); });
});
​
//called earlier  
function type(d) {
  d.Expression = +d.Expression;
  return d;
}
​
</script>
    