Values are generated when hovering the blue or red circles. Two bars fill according to the percentage of values created per color

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.area {
  fill: steelblue;
}

</style>
<body>
  
  <div id="vis">
  </id>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var nodes = [],
    totalNodes = 0,
    totalNodesType1 = 0,
    totalNodesType2 = 0,
    barWidth = 50,
    barHeight = 100,
    color = d3.scale.category10().domain([1, 2, 4]),
    y = d3.scale.linear()
                .range([0, barHeight])
                .domain([0, totalNodesType1]),
    pos1 = 
    {
      x: width / 2 - barWidth - barWidth/2,
      y: height - barHeight
    }
    pos2 = 
    {
      x: width / 2 + barWidth,
      y: height - barHeight
    };

var force = d3.layout.force()
    .gravity(0.06)
    .charge(-150)
    // .linkDistance(40)
    .size([width, height]);

var svg = d3.select("#vis").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 p0;

svg.append("svg:rect")
    .attr("width", width)
    .attr("height", height)
    .style("stroke", "#000")
    .style('fill', 'white');

var circles = svg.selectAll("#hola")
    .data([0, 0])
    .enter()
    .append("circle")
      .attr("cx", function(d, i) { return width/2 - 25 + 50*i })
      .attr("cy", 100)
      .attr("r", 25)
      .style("fill", function(d, i) {
        return color(i);
      })
      .on("mouseover", createValues)
      .on("mousemove", createValues);

function createValues(d, i) {
        var p1 = d3.mouse(this),
        node = {x: p1[0], y: p1[1], px: (p0 || (p0 = p1))[0], py: p0[1]};

totalNodes++;
        y.domain([0, totalNodes]);  
        if (i == 0) {
          node.type = 0;
          totalNodesType1++;          
        } else {
          node.type = 1;
          totalNodesType2++;          
        }

barFill1.attr("height", function(d) { return y(totalNodesType1); })
        barFill1.attr("y", function(d) { return barHeight - y(totalNodesType1); })  
        barFill2.attr("height", function(d) { return y(totalNodesType2); })
        barFill2.attr("y", function(d) { return barHeight - y(totalNodesType2); })

var bar1 = svg.append("g")        
        .attr("transform", function(d) { return "translate(" + pos1.x + "," + pos1.y + ")"; });

var bar2 = svg.append("g")        
        .attr("transform", function(d) { return "translate(" + pos2.x + "," + pos2.y + ")"; });

var barRect1 = bar1.append("rect")
    .attr("width", barWidth)
    .attr("height", barHeight)
    .style("stroke", "#222")
    .style('fill', 'white');

var barRect2 = bar2.append("rect")
    .attr("width", barWidth)
    .attr("height", barHeight)
    .style("stroke", "#222")
    .style('fill', 'white');

var barFill1 = bar1.append("rect")
    .attr("y", function(d) { return y(0); })
    .attr("width", barWidth - 1)
    .style('fill', color(0));

var barFill2 = bar2.append("rect")
    .attr("y", function(d) { return y(0); })
    .attr("width", barWidth - 1)
    .style("fill", color(1));

// force.on("tick", function(e) {

// });
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js