Craig Oda codetricity

use anonymous function to move x coordinate

replace the static integer assigned to x to an anonymous function. Use the index value i. Multiply it by the width of each bar plus a margin.

function(d, i){
    return ADD_THING_TO_RETURN_HERE

}

Invert Vertical "y axis"

change y to the height of viewport minus the datapoint
change the height of the bar to the datapoint

Adjust the scale of each bar

Use d3.scaleLinear

Review code sections from previous lesson.

rect

svg.selectAll("rect")

text

svg.selectAll("text")

Create new project

Create a new project called, "wind" with separate files for

html
css
js

link the html file to your css and js files, similar to the previous lesson.

alter x axis

 .attr("x", function(d, i){
        return i * 40 + margin;

.attr("transform", function(d, i){

Simple Axis Tutorial with D3

set up files

Create js and css sub-directories in main project folder
Create these files:
- html file - index.html
  - HTML file must contain <body> and <head> tags.
- blank JavaScript file - axis.js

atyle sheet - axis.cs

Simple Axis Tutorial Part 2

Add Margins

create object to hold margin information

var margin = {top: 100, bottom: 100, right: 100, left: 50};

set up variables for width and height of chart

d3 interval loop part 1

d3.interval syntax

callback function, delay in milliseconds

example 1 second delay

X and Y Axis Creation

Future Dataset Discussion

https://data.world/datanerd/cat-vs-dog-popularity-in-u-s/discuss/cat-vs-dog-popularity-in-u-s/4194

	var dataset = [
	"No", "one", "can", "tell", "me,",
	"Nobody", "knows,",
	"Where", "the", "wind", "comes", "from,",
	"Where", "the", "wind", "goes."];

	var width = 900;
	var height = 900;
	var margin = 100;