D3 Examples - DCF income-cost summary

xxxxxxxxxx
 
<!DOCTYPE html>
<style>
body {
  font-family: 'Open Sans', sans-serif;
}
#main {
  width: 960px;
}
.axis .domain {
  display: none;
}
​
.bar:hover {
  fill: #FF7C03 ;
}
​
</style>
<div id="main">
<svg width="100" height="500" viewBox="-50 0 200 250"></svg>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
// create the svg
var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
// set x scale
var x = d3.scaleBand()
    .rangeRound([0, width])
;
  
// set y scale
var y = d3.scaleLinear()
    .rangeRound([height, 0]);
​
var z = d3.scaleOrdinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var zIncome = d3.scaleOrdinal()
    .range(["#008DD2", "#35A5D9", "#74BEE0", "#B2D6E7"]);
var zCost = d3.scaleOrdinal()
    .range(["#EA4424", "#ED6E52", "#EE9887", "#EEC44B"]);
var zNet = d3.scaleOrdinal()
    .range(["#00A859"]);
​
  var data = [
    {
      "type": "INCOME",
      "INCOME_SHALL": 100,
      "INCOME_OTHER": 50
    },
    {
      "type": "COST",
      "INCOME_NET": 80,
      "COSTS_RUNNING": 50,
      "INCOME_VACANCY": 20
    }
  ];
​
  var keys = [];
  for (var i = 0; i < data.length; i++) {
    var e = data[i];
    for (var j in e) {
      if (j !== "type") keys.push(j);
    }
  }
  
  var stack = d3.stack().keys(keys);
  var stackedData = stack(data);
  stackedData.forEach(d => d.forEach(e => e.serie = d.key));
​
  var yMax = d3.max(stackedData, d => d3.max(d, e=>e))[1];
  x.domain(data.map(d => d.type));
  y.domain([0, yMax]).nice();
  z.domain(keys);
​
  g.append("g")
    .selectAll("g")
    .data(stackedData)
    .enter().append("g")
      .attr("fill", function(d) {
    if (d.key === "INCOME_NET")
        return zNet(d.key);
    else if (d.key.includes("INCOME")) {
      return zIncome(d.key);
    } else {
      return zCost(d.key);
    }
  })
    .selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
        .attr("class", "bar")
      .attr("x", function(d) { return x(d.data.type); })
      .attr("y", function(d) { return y(d[1] || 0); })
      .attr("height", function(d) { return y(d[0]) - y(d[1]) || 0 })
      .attr("width", x.bandwidth())
    .on("mouseover", function() {
    tooltip.style("display", null);
  })
    .on("mouseout", function() { tooltip.style("display", "none"); })
    .on("mousemove", function(d) {
      var xPosition = d3.mouse(this)[0] - 5;
      var yPosition = d3.mouse(this)[1] - 5;
      tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
      tooltip.select("text").text(d.serie + ": " + (d[1]-d[0]));
    });
​
/*
  g.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
​
  g.append("g")
      .attr("class", "axis")
      .call(d3.axisLeft(y).ticks(null, "s"))
    .append("text")
      .attr("x", 2)
      .attr("y", y(y.ticks().pop()) + 0.5)
      .attr("dy", "0.32em")
      .attr("fill", "#000")
      .attr("font-weight", "bold")
      .attr("text-anchor", "start");
​
  var legend = g.append("g")
      .attr("font-family", "sans-serif")
      .attr("font-size", 10)
      .attr("text-anchor", "end")
    .selectAll("g")
    .data(keys.slice().reverse())
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
​
  legend.append("rect")
      .attr("x", width - 19)
      .attr("width", 19)
      .attr("height", 19)
      .attr("fill", z);
​
  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9.5)
      .attr("dy", "0.32em")
      .text(function(d) { return d; });
});
*/
​
  // Prep the tooltip bits, initial display is hidden
  var tooltip = svg.append("g")
    .attr("class", "tooltip")
    .style("display", "none");
      
  tooltip.append("rect")
    .attr("width", 60)
    .attr("height", 20)
    .attr("fill", "white")
    .style("opacity", 0.5);
​
  tooltip.append("text")
    .attr("x", 30)
    .attr("dy", "1.2em")
    .style("text-anchor", "middle")
    .attr("font-size", "12px")
    .attr("font-weight", "bold");
​
</script>
    