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
var data = [
{ grade: "A", value: 4},
{ grade: "B", value: 3},
{ grade: "C", value: 2}
]
// use anonymous function
// d3.min or d3.max
// d3.min(data, anonymous-function)
// anonymous function will loop through each line of data
var min2 = d3.min(data, function(d)
{
return d.value;
});
console.log(min2);
</script>
- Output max for the example above
- Output extent for the example above
Using the example above, use d3.scaleLinear to create the y axis of a population graph.
The format is:
d3.scaleLinear()
.domain([min, max])
.range([min, max])
Assume that the svg viewport has a height of 400 (size of screen you can draw the graph on).
- assign variable called populationExtent to the output of d3.extent
- print out the content of populationExtent as a test
- assign variable y to the output of d3.scaleLinear (this output will be a function called y)
- in the developer console, test different values of y(populationNumber). For example, y(25000)