Best Function Selector 031919

Best example so far, while understanding most of the code.

by adkf37

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>"dasfadsfa"</title>
    <script src="https://d3js.org/d3.v4.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="FunctionDropdown"></div>
    <div id="container" class="svg-container"></div>
      </body>

</html>

CSS

.line {
  fill: none;
  stroke-width: 2px;
}

.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;/* aspect ratio */
  vertical-align: top;
  overflow: hidden;
}

.FunctionDropdown {
  position: relative;
  bottom: 0;
  right: 100;
  width: 300px;
  border: 3px solid #73AD21;
}

.svg-content-responsive {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;
}

JavaScript

// Set the margins
var margin = {
    top: 60,
    right: 100,
    bottom: 20,
    left: 80
  },
  width = 850 - margin.left - margin.right,
  height = 370 - margin.top - margin.bottom;

//Format the Year Variable
var parseTime = d3.timeParse("%Y");

// Set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// Set the color scheme
var colors = d3.scaleOrdinal()
  .domain(["CBO","Pres"])
  .range(["#2a5e2c", "#883271"]);

// Define the line
var valueLine = d3.line()
  .x(function(d) {    return x(d.Year);  })
  .y(function(d) {    return y(+d.Outlays);
  })

// Create the svg canvas in the "graph" div
var svg = d3.select("div#container")
  .classed("svg-container", true)
  .append("svg")
  .attr("preserveAspectRatio", "xMinYMin meet")
  .attr("viewBox", "0 0 800 600") // these two lines help autoscale for whatever device
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .attr("class", "svg");

// Import the CSV data
d3.csv("https://raw.githubusercontent.com/adkf37/Line-Chart-Comp-Base-and-Reest/master/Function%20Base%20vs%20Reest%20Multiline%20Test%20%232-%20030819.csv", function(error, data) {
  if (error) throw error;

  // Format the data
  data.forEach(function(d) {
    d.Year = parseTime(+d.Year);
    d.Outlays = +d.Outlays;
    d.Function = d.Function;
    d.Budgettype = d.BudgetType;
  });

  var nest = d3.nest()
    .key(function(d) {return d.Function;    })
    .sortKeys(d3.ascending) //sorts grouped by variable
   
     .rollup(function(leaves){
            var max = d3.max(leaves, function(d){
            	return d.Outlays
            })
            var budgettype = d3.nest().key(function(d){
            	return d.Budgettype
            })
             .entries(leaves);
              return {max:max, budgettype:budgettype};
            })
      	  .entries(data)

	  console.log(nest)

    
    
  // Scale the range of the data
  x.domain(d3.extent(data, function(d)...