Bar Chart Lesson #4

2018-08-29.md

Invert Vertical "y axis"

1. change y to the height of viewport minus the datapoint
2. change the height of the bar to the datapoint

Adjust the scale of each bar

Use d3.scaleLinear

This is the example from mint green man. video is on local drive E: under Videos\d3\

Change Color to Teal

.attr("fill", "teal");

Adjust Color to Height of Data

.attr("fill", function(d) {
    return "rgb(0, 0, " + (d * 10) + ")";
});

Text

svg.selectAll("text")
   .data(dataset)
   .enter()
   .append("text")      
   .text(function(d) {
    return d;
})

Add Text Position

Chain attributes for x and y.

Set Color and Font Family

   .attr("font-family", "sans-serif")
   .attr("font-size", "11px")
   .attr("fill", "white");

Perfect alignment - follow tutorial

http://alignedleft.com/tutorials/d3/making-a-bar-chart