JSFiddle - React, Tailwind, and code Playground

by adkf37

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Page Template</title>
        <script src="https://d3js.org/d3.v4.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
  
  <body>
    <div id = "fruitDropdown"></div>
    <div id= "yearDropdown"></div>
    <div id="graph"></div>
    <script src="Exploration7.js"></script>
  </body>
  
</html>

CSS

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

.selected{
  stroke: #EF5285;
}

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.scaleTime().domain([parseMonth("2016"), parseMonth("2027")]).range([0, width]);
var y = d3.scaleLinear().range([height, 0]);


// Define the line
var valueLine = d3.line()
    .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("#graph")
        .append("svg")
        .style("width", width + margin.left + margin.right + "px")
        .style("height", height + margin.top + margin.bottom + "px")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .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-%20030819.csv", function(error, data) {
  if (error) throw error;
  
   // Format the data
  data.forEach(function(d) {
      d.Month = parseMonth(d.Month);
      d.Sales = +d.Sales;
      d.Fruit = d.Fruit;
      d.Year = formatYear(parseYear(+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
            })
            var year = d3.nest().key(function(d){
            	return d.Year
            })
            .entries(leaves);
            return {max:max, year:year};
            })
	  .entries(data)
    console.log(nest)

  // Scale the range of the data
 ...