Created
August 22, 2018 14:18
-
-
Save codetricity/e5fcb724a28ae18391abb3677cc65c09 to your computer and use it in GitHub Desktop.
starting point for lesson on 2018 23 08. Extend to use scaleLinear
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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}, | |
| {name: "blue whale", population: 25000}, | |
| {name: "asian elephant", population: 45000}, | |
| {name: "sea otter", population: 100000}, | |
| {name: "snow leopard", population: 6500}, | |
| {name: "gorilla", population: 220000}, | |
| {name: "tasmanian devil", population: 10000}, | |
| {name: "orangutan", population: 60000}]; | |
| var dataOnly = [2500, 4000, 400, 25000, 45000]; | |
| var min2 = d3.min(data, function(d){ | |
| return d.population; | |
| }); | |
| var max2 = d3.max(data, function(d){ | |
| return d.population; | |
| }); | |
| var extent2 = d3.extent(data, function(d){ | |
| return d.population; | |
| }); | |
| console.log("MIN: " + min2); | |
| console.log("MAX: " + max2); | |
| console.log("EXTENT: " + extent2); | |
| var y = d3.scaleLinear() | |
| .domain(extent2) | |
| .range([0, 400]); | |
| var svg = d3.select("#canvas"); | |
| var rectangles = svg.selectAll("rect") | |
| .data(dataOnly); | |
| rectangles.enter() | |
| .append("rect") | |
| .attr("x", function(d, i){ | |
| return i*30 | |
| }) | |
| .attr("y", 30) | |
| .attr("width", 20) | |
| .attr("height", 50) | |
| .attr("fill", "pink"); | |
| </script> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment