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", -2089638, {}],
    ["2020", -1624082, {}],
    ["2021", -1589426, {}],
    ["2022", -1553384, {}],
    ["2023", -1515901, {}],
    ["2024", -1476918, {}],
    ["2025", -1436375, {}],
    ["2026", -1394211, {}],
    ["2027", -1350361, {}],
    ["2028", -1201833, {}],
    ["2029", -120090, {}],
    ["2030", 0, {}],
    ["2031", 0, {}],
    ["2032", 0, {}],
    ["2033", 0, {}],
    ["2034", 0, {}],
    ["2035", 0, {}],
    ["2036", 0, {}],
    ["2037", 0, {}],
    ["2038", 0, {}]
  ],
  label: "Financing"
}, 
{
  data: [
    ["2018", 0, {}],
    ["2019", 2242378, {}],
    ["2020", 6410590, {}],
    ["2021", 10654732, {}],
    ["2022", 14992637, {}],
    ["2023", 19426463, {}],
    ["2024", 23975577, {}],
    ["2025", 28607911, {}],
   ...