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", -704541, {}],
    ["2021", -720288, {}],
    ["2022", -737301, {}],
    ["2023", -754734, {}],
    ["2024", -773541, {}],
    ["2025", -790900, {}],
    ["2026", -809655, {}],
    ["2027", -828872, {}],
    ["2028", -849606, {}],
    ["2029", -867905, {}],
    ["2030", -888415, {}],
    ["2031", -909567, {}],
    ["2032", -930935, {}],
    ["2033", -945636, {}],
    ["2034", -960696, {}],
    ["2035", -976125, {}],
    ["2036", -991932, {}],
    ["2037", -1008126, {}],
    ["2038", -1024716, {}]
  ],
  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", 4168212, {}],
    ["2021", 4244142, {}],
    ["2022", 4337905, {}],
    ["2023", 4433825, {}],
    ["2024", 4549113, {}],
    ["2025", 4632334, {}],
    ["2026", 4735026, {}],
   ...