JSFiddle - React, Tailwind, and code Playground

by gdicerbo

CSS

text.inner-circle {
  font-weight: 300;
  font-size: 12px;
  text-transform: uppercase;
}

text.inner-text {
  font-weight: 400;
  font-size: 900px;
  font-family: 'Metric Regular', 'Metric';
  text-align: center;
  font-style: normal;
  text-transform: uppercase;
}

path {
  stroke: steelblue;
  stroke-width: 2;
  fill: none;
}

.axis text {
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;;
  
}
.axis path,
.axis line {
  fill: none;
  stroke: grey;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.grid .tick {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
  }

JavaScript

var margin = {
    top: 20,
    right: 60,
    bottom: 30,
    left: 115
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var z = d3.scale.ordinal()
      .range(["#8aafcf", "#ccddea" , "#588EBB", "#82a26d" ]);

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseDate = d3.time.format("%Y");

var format = d3.format(",");

var data = [{
  data: [
    ["2018", 0, {}],
    ["2019", -515070, {}],
    ["2020", -1219611, {}],
    ["2021", -1939900, {}],
    ["2022", -2677202, {}],
    ["2023", -3431937, {}],
    ["2024", -4205478, {}],
    ["2025", -4996379, {}],
    ["2026", -5806034, {}],
    ["2027", -6634906, {}],
    ["2028", -7484513, {}],
    ["2029", -8352419, {}],
    ["2030", -9240834, {}],
    ["2031", -10150401, {}],
    ["2032", -11081337, {}],
    ["2033", -12026973, {}],
    ["2034", -12987670, {}],
    ["2035", -13963796, {}],
    ["2036", -14955728, {}],
    ["2037", -15963855, {}],
    ["2038", -16988571, {}]
  ],
  label: "OpEx"
}, {
  data: [
    ["2018", 9783125, {}],
    ["2019", 7693486, {}],
   ["2020", 6069404, {}],
   ["2021", 4479977, {}],
    ["2022", 2926592, {}],
    ["2023", 1410691, {}],
    ["2024", -66226, {}],
    ["2025", -1502602, {}],
    ["2026", -2896814, {}],
    ["2027", -4247175, {}],
    ["2028", -5449008, {}],
    ["2029", -5569099, {}],
    ["2030", -5569099, {}],
    ["2031", -5569099, {}],
    ["2032", -5569099, {}],
    ["2033", -5569099, {}],
    ["2034", -5569099, {}],
    ["2035", -5569099, {}],
    ["2036", -5569099, {}],
    ["2037", -5569099, {}],
    ["2038", -5569099, {}]
  ],
  label: "Financing"
}, 
{
  data: [
    ["2018", 0, {}],
    ["2019", 2242378, {}],
    ["2020", 6410590, {}],
    ["2021", 10654732, {}],
    ["2022", 14992637, {}],
    ["2023", 19426463, {}],
   ...