IBCS Chart

by jeffersonswartz

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<div style="height: 600px; width: 600px;">

</div>

CSS

.baseBar {
	fill: none;
	stroke: #2e8ab8;
	stroke-dasharray: 1, 2;
	stroke-width: 1px;
	shape-rendering: crispEdges;
	cursor: pointer;
}

.bar {
	fill: #bbb;
	fill-opacity: .75;
	cursor: pointer;
}

.bar.current {
	fill: #3399CC;
}

.bar.future {
	fill: #dedede;
}

.bar.neg {
	fill: rgb(255, 0, 0);
	fill-opacity: .7;
}

.bar.pos {
	fill: rgb(0, 176, 80);
	fill-opacity: .7;
}

.barLabel {
	fill: #666;
	font-family: AvenirNextCondensed-Regular, Arial Narrow, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.line {
	fill: none;
	stroke: #2e8ab8;
	stroke-width: 1px;
	/*  shape-rendering: crispEdges; */
	stroke-linecap: "round";
}

.avg {
	fill: none;
	stroke-width: .5px;
	stroke: #999;
	stroke-dasharray: 5, 10;
	shape-rendering: crispEdges;
}

.bar .future:first-child {
  fill: rgb(255, 0, 0);
}

JavaScript

const data = [{
  "key": "1",
  "text": "Jan",
  "act": 36587365.94664,
  "base": 26403525.977222834,
  "tgt": 26776114.986258,
  "varAbs": 9811250.960382,
  "varPct": "37",
  "origVarAbs": -372589.00903516635,
  "origVarPct": "-1",
  "simChangeAbs": 10183839.969417166,
  "simChangePct": "39",
  "simChangeText": "better",
  "simChangeStatus": "Green",
  "status": "Green",
  "change": null,
  "changePct": null,
  "preAct": null,
  "green": 28114920.7355709,
  "amber": 26508353.83639542,
  "red": 24098503.4876322,
  "statusMax": 64083996.90952,
  "statusMin": 23475812.584010314,
  "min": 23475812.584010314,
  "max": 64083996.90952,
  "range": 40608184.32550968,
  "statusRange": 40608184.32550968,
  "pctRange": {
    "Tgt": 0.08127185337302724,
    "Act": 0.3228795766274418,
    "Prev": -0.5781054478041026,
    "Green": 0.11424071843188373,
    "Amber": 0.07467808036125594,
    "Red": 0.015334123255314257
  }
}, {
  "key": "2",
  "text": " Feb",
  "act": 32530433.49766,
  "base": 23475812.584010314,
  "tgt": 24800959.111104,
  "varAbs": 7729474.3865559995,
  "varPct": "31",
  "origVarAbs": -1325146.5270936862,
  "origVarPct": "-5",
  "simChangeAbs": 9054620.913649686,
  "simChangePct": "39",
  "simChangeText": "better",
  "simChangeStatus": "Green",
  "status": "Green",
  "change": -4056932.44898,
  "changePct": "-11",
  "preAct": 36587365.94664,
  "green": 26041007.0666592,
  "amber": 24552949.51999296,
  "red": 22320863.1999936,
  "statusMax": 64083996.90952,
  "statusMin": 23475812.584010314,
  "min": 23475812.584010314,
  "max": 64083996.90952,
  "range": 40608184.32550968,
  "statusRange": 40608184.32550968,
  "pctRange": {
    "Tgt": 0.0326324988202253,
    "Act": 0.2229752712179662,
    "Prev": 0.3228795766274418,
    "Green": 0.06316939615144171,
    "Amber": 0.02652511935398198,
    "Red": -0.028441295842207517
  }
}, {
  "key": "3",
  "text": " Mar",
  "act": 41456104.31459,
  "base": 29917084.733051427,
  "tgt": 29799224.742770992,
  "varAbs":...