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: 56px;
  font-family: 'Metric Regular', 'Metric';
  text-align: center;
  font-style: normal;
  text-transform: uppercase;
}

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

.axis path,
.axis line {
  fill: none;
  stroke: grey;
  stroke-width: 2;
  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.category20();

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", -704541, {}],
    ["2021", -720288, {}],
    ["2022", 0, {}],
    ["2023", 0, {}],
    ["2024", 0, {}],
    ["2025", 0, {}],
    ["2026", 0, {}],
    ["2027", 0, {}],
    ["2028", 0, {}],
    ["2029", 0, {}],
    ["2030", 0, {}],
    ["2031", 0, {}],
    ["2032", 0, {}],
    ["2033", 0, {}],
    ["2034", 0, {}],
    ["2035", 0, {}],
    ["2036", 0, {}],
    ["2037", 0, {}],
    ["2038", 0, {}],
    ["2039", -284061, {}]
  ],
  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, {}],
    ["2039", 0.0, {}]
  ],
  label: "Financing"
}, {
  data: [
    ["2018", -4419630, {}],
    ["2019", -11476911, {}],
    ["2020", 3569201, {}],
    ["2021", 3388751, {}],
    ["2022", 2463283, {}],
    ["2023", 2221979, {}],
    ["2024", 1977381, {}],
    ["2025", 1467087, {}],
    ["2026", 1316457, {}],
    ["2027", 1416101, {}],
    ["2028", 1633186, {}],
    ["2029", 2670878, {}],
    ["2030", 2785429, {}],
  ...