JSFiddle - React, Tailwind, and code Playground

by adkf37

HTML

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

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

  <body>
    <div id="graph"></div>

  </body>

</html>

CSS

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

JavaScript

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

// set the colour scale
var colors = d3.scale.category10();  

//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]);


// 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("#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%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.FunctionName = d.Function;
    d.Budgettype = d.BudgetType;
  });

  var nest = d3.nest()
    .key(function(d) {
      return d.FunctionName;
    })
    .key(function(d) {
      return d.Budgettype;
    })
    .sortKeys(d3.ascending)
    .entries(data)

  var FunctionGroups = svg.selectAll(".FunctionName")
    .data(nest)
    .enter()
    .append("g")

  var paths = FunctionGroups.selectAll(".line")
    .data(function(d) {
      return d.values
    })
    .enter()
    .append("path")
    .attr("stroke", function(d){ return colors(d.key)});

  paths
    .attr("d", function(d) {
      return d.values
    })
    .attr("class", "line")
   ...