xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Population in Megacities</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> <script type="text/javascript" src="reuseable.d3.charts.js"></script> <style type="text/css"> body { background-color: #69425E; color: white; -webkit-font-smoothing: antialiased; } h3 { margin-top: 0; line-height: 40px; font-size: 22px; } footer { margin-top: 270px; } a { text-decoration: none; color: white; } #years li { text-decoration: none; display: inline-block; margin-left: 25px; margin-right: 60px; margin-top: 10px; font-size: 18px; font-weight: bold; -webkit-font-smoothing: antialiased; } #totals li { text-decoration: none; display: inline-block; margin-left: 15px; margin-right: 41px; margin-top: 2px; } #header { height: 100px; width: 100%; margin-bottom:25px; } svg { background-color: #69425E; } a:hover { color: #FF6ED6; } rect:hover { fill: #FF6ED6; } #legend2 { margin-bottom:25px; } </style> </head> <body> <div class="container"> <div class = "row"> <div class="col-md-12" id="header"> <h2>Population of the Top 5 Megacities 1950-2015</h2> </div> </div> <div class = "row"> <div class="col-md-5" id = "barChart"> </div> <div class="col-md-7" id = "chartDescr"> <h3 class="text-justify">A megacity is an urban agglomeration of ten or more million people.</h3> <h3 class="text-justify">This chart shows the growth in population of the five largest megacities in the world: Tokyo, New York, Mexico City, Mumbai, and Sao Paolo.</h3> <footer>Source: <a href="https://www.earth-policy.org/">Earth Policy Institute</a></footer> </div> </div> <div class = "row" id = "additionalInfo"> <ul id="years"> <li>1950</li> <li>2007</li> <li>2015</li> </ul> <ul id="totals"> <li>31 million</li> <li>111 million</li> <li>119 million</li> </ul> </div> </div> <script type="text/javascript"> //Width and height var w = 400; var h = 500; //Reusable charts takes an ordintal scale as input for legend text and color var colors = d3.scale.ordinal() .range(["#FC5C64", "#7A0751", "#EE9D2A", "#FED3C9", "#9A427C"]) //var colors = ["#FC5C64", "#7A0751", "#EE9D2A", "#FED3C9", "#9A427C"]; //Original data var dataset = [ [ { x: 1950, y: 11.3 , z: "Tokyo"}, { x: 2007, y: 35.7, z: "Tokyo" }, { x: 2015, y: 36.4, z: "Tokyo" } ], [ { x: 1950, y: 12.3, z: "New York" }, { x: 2007, y: 19.0, z: "New York" }, { x: 2015, y: 20.0, z: "New York" } ], [ { x: 1950, y: 2.9, z: "Mexico City" }, { x: 2007, y: 19.0, z: "Mexico City" }, { x: 2015, y: 20.2, z: "Mexico City" } ], [ { x: 1950, y: 2.9, z: "Mumbai" }, { x: 2007, y: 19.0, z: "Mumbai" }, { x: 2015, y: 21.9, z: "Mumbai" } ], [ { x: 1950, y: 2.3, z:"Sao Paolo" }, { x: 2007, y: 18.8, z:"Sao Paolo" }, { x: 2015, y: 20.5, z:"Sao Paolo" } ] ]; //Set up stack method var stack = d3.layout.stack() .order("reverse"); //Flip the order //Data, stacked stack(dataset); //Set up scales var xScale = d3.scale.ordinal() .domain(d3.range(dataset[0].length)) .rangeRoundBands([0, w], 0.2); var yScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d3.max(d, function(d) { return d.y0 + d.y; }); }) ]) .range([0, h]); //Create SVG element var svg = d3.select("#barChart") .append("svg") .attr("width", w) .attr("height", h); // Add a group for each row of data var groups = svg.selectAll("g") .data(dataset) .enter() .append("g") .style("fill", function(d, i) { //return colors[colors.length - 1 - i]; return colors(i) }) .style("stroke", "white"); // Add a rect for each data value var rects = groups.selectAll("rect") .data(function(d) { return d; }) .enter() .append("rect") .attr("x", function(d, i) { return xScale(i); }) .attr("width", xScale.rangeBand()) .attr("y", function(d) { return h - yScale(d.y0) - yScale(d.y); //Flip the math! }) .attr("height", function(d) { return yScale(d.y); }) .append("title").text(function(d,i) {return d.z + ": " + d.y + "mn Residents";}); //PULLED OUT THE Z VALUES AND ADDED TO COLORS SCALE var cityNames = d3.set(dataset.map(function(d) { return d[0].z })).values() colors.domain(cityNames) //CREATED THE VERTICAL LEGEND var rlegend_vertical = d3.models.legend() //.fontSize(".8em") .position("vertical").gxPos(25).gyPos(200).item_height(30).fontColor("white").inputScale(colors) //.on("onClick", filterLegend); svg.call(rlegend_vertical); //CREATED THE HORIZONTAL LEGEND WITH RECS var rlegend_horizontal_recs = d3.models.legend() .position("horizontal-recs").fontSize(20).inputScale(colors) var svg_legend = d3.select('#header') svg_legend.call(rlegend_horizontal_recs); //CREATED THE HORIZONTAL LEGEND WITH NO RECS var rlegend_horizontal_norecs = d3.models.legend() .position("horizontal-norecs").fontSize(20).inputScale(colors) var svg_legend = d3.select('#header') //svg_legend.call(rlegend_horizontal_norecs); </script> </body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js