bar chart 1 (w/ comments)

Built with blockbuilder.org

forked from scresawn's block: bar chart 1

<!DOCTYPE html>
<meta charset="utf-8">

<style>

.title {
  font: 20px sans-serif;
  fill: black;
}

.bar:hover {
  fill: brown;
}

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
</style>

<body>
  

<script src="https://d3js.org/d3.v3.min.js"></script>

<script>
//The margin variable is an example of an object, and gives us the margins of our chart. 
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--It allows easy mapping between one set of values and another set of values ("domain" or rangeRoundBands corresponds to input numbers; "range" corresponds to output numbers); x-axis is linear (numbers) and y-axis is ordinal(categories).
var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
    .range([height, 0]);

//Lines 50-56 define the x and y axes by setting scale to variables x/y, and orienting the axes to the correct locations. 
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

//Create an SVG (note that the variable name can be anything, here we just call it SVG) by selecting the body, then appending an SVG element to the body. Width, height, and margin are all previously defined variables that we call at this point.  The '.append(g)' makes a group out of all of these svg elements so they all move together, when we translate on line 63.
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  	.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//This is where we are calling the data. 'D3.csv' is a function that accepts three arguments: "data.csv" calls the data file (located in the tabs at the top of this block), 'type' calls the function located on line 127 of this code and converts text into numers, and 'function (error, data)' prints an error if the data file is wrong and stops the code OR if the data file is correct, filters the rows in the CSV data file and adds them into an object called 'data'. 'x.domain' and 'y.domain' use the data to defined where the bars go on the x axis and how tall to make the bar on the y axis.
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 for the graph, calling css from the beginning defined as '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)");

//This creates the x-axis: appending another group, calling previously defined CSS, moving it to the botom, and 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 +  ")"});

//Adds and positions the x-axis lable.
  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");

//Adds the y-axis and positions the y-axis lable.
  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)");

//This is the part where we actually make the bars of the graph, (including binding the data); '.bar' means we are going to create some objects with the CSS class 'bar'; then we code what the bar is going be. 'bar' is bound to the data object created on line 68. Line 121 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 124 is determining where the top of the bar is and line 125 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); });
});

//Function called earlier that turns text into numbers.
function type(d) {
  d.Expression = +d.Expression;
  return d;
}

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js