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

xxxxxxxxxx
 
<!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 circle = svg.append("svg:circle")
          .data([node])
          .attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; })
          .attr("r", 5)
          .style("fill", function(d) {
            return color(d.type);
          })    
        .transition()
          .duration(500)
          .attr("cx", function(d) {
            var offset = Math.random() * barWidth;
            return (node.type == 0) ? pos1.x + offset : pos2.x + offset;
          })
          .attr("cy", function(d) { 
            return pos1.y; 
          })
          .attr("r", 1)
          .each("end", function() { nodes.splice(3, 1); })
          .remove();
      }
​
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>
    