Created
August 23, 2018 05:43
-
-
Save codetricity/1ca60f7fec5b6bf834174625bd2d8ee9 to your computer and use it in GitHub Desktop.
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, max2]) | |
| .range([400, 0]); | |
| var svg = d3.select("#canvas"); | |
| var rectangles = svg.selectAll("rect") | |
| .data(data); | |
| rectangles.enter() | |
| .append("rect") | |
| .attr("x", function(d, i){ | |
| return i*30 | |
| }) | |
| .attr("y", function(d){ | |
| return y(d.population); | |
| }) | |
| .attr("width", 20) | |
| .attr("height", function(d){ | |
| var height = 450 - y(d.population); | |
| 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