JSFiddle - React, Tailwind, and code Playground

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 = "fruitDropdown"></div> 
     <div id="container" class="svg-container"></div>
    <script src="Exploration7.js"></script>
  </body>
  
</html>

CSS

.line {
  fill: none;
  stroke: #999999;
  stroke-width: 1px;
}

.selected {
  stroke: #EF5285;
}

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

 .fruitDropdown {
  position: fixed;
  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;

// Parse the month variable
var parseMonth = d3.timeParse("%b");
var formatMonth = d3.timeFormat("%b");

var formatYear = d3.timeFormat("%Y");
var parseYear = d3.timeParse("%Y");

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


// Define the line
var valueLine = d3.line()
   // .defined (function (d) { return d.Budgettype =="Pres";}) //trying to create different lines here
    .x(function(d) { return x(d.Month); })
    .y(function(d) { return y(+d.Sales); })

// Define the Pres line
//var CBOvalueLine = d3.line()
    //.defined (function (d) { return d.Budgettype =="CBO";}) //trying to create different lines here
  //  .x(function(d) { return x(d.Month); })
  //  .y(function(d) { return y(+d.Sales); })//

// 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.Month = formatYear(parseYear(+d.Month));
      d.Sales = +d.Sales;
      d.Fruit = d.Fruit;
      d.Budgettype = d.Year;
  });

  var nest = d3.nest()
	    .key(function(d){
	    	return d.Fruit;
	    })
		.rollup(function(leaves){
            var max = d3.max(leaves, function(d){
            	return d.Sales
        ...