Craig Oda codetricity

Review code sections from previous lesson.

rect

svg.selectAll("rect")

svg.selectAll("text")

Use d3.scaleLinear

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

}

Create new HTML file with tag <body></body>

Download and save d3.js to your project.

In the HTML file, access the d3.js file using `

reverse linear scale output (range)
set starting y coordinate of rectangle to be length height of reversed rectangle
adjust height of each rectangle in bar chart

Using the simple array of numbers only, create a bar chart.

var dataOnly = [2500, 4000, 400, 25000, 45000];

Note on lesson: easily completed

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script>

// replace data below with data from endangered animals

	<!DOCTYPE html>
	<meta charset="utf-8">
	<svg id = "canvas" width="800" height = "450"></svg>
	<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
	<script>
	var data = [
	{name: "panda", population: 2500},
	{name: "tiger", population: 4000},
	{name: "whooping crane", population: 400},
	{name: "blue whale", population: 25000},

	<!DOCTYPE html>
	<meta charset="utf-8">
	<svg id = "canvas" width="800" height = "450"></svg>
	<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
	<script>
	var data = [
	{name: "panda", population: 2500},
	{name: "tiger", population: 4000},
	{name: "whooping crane", population: 400},
	{name: "blue whale", population: 25000},

	<!DOCTYPE html>
	<meta charset="utf-8">
	<svg id = "canvas" width="800" height = "400"></svg>
	<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
	<script>

	var data = [
	{name: "panda", population: 2500},
	{name: "tiger", population: 4000},
	{name: "whooping crane", population: 400},