Created
August 23, 2018 05:00
-
-
Save codetricity/11c7991ac32ef7247d4300cfabb34144 to your computer and use it in GitHub Desktop.
basic number only
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 = "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}, | |
| {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; | |
| }); | |
| var maxNumbers = d3.max(dataOnly); | |
| console.log("MIN: " + min2); | |
| console.log("MAX: " + max2); | |
| console.log("EXTENT: " + extent2); | |
| var y = d3.scaleLinear() | |
| .domain([0, maxNumbers]) | |
| .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", function(d){ | |
| var height = y(d); | |
| console.log(height) | |
| return height; | |
| }) | |
| .attr("fill", "pink"); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment