Best Function Selector 031919

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

by kevinp

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: 90%;
  padding-bottom: 90%;/* 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%233-%20032019.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 priority_order = ['Total Outlays', 
                        'Mandatory', 
                        'Social Security', 
                        'Medicare', 
                        'Medicaid', 
                        'Other Mandatory', 
                        'Discretionary', 
                        'Defense discretionary ', 
                        'Nondefense discretionary ', 
                        'Net Interest']; 
  
  var nest = d3.nest()
               .key(function(d) {return d.Function;})
               .sortKeys(function(a, b) {return...