d3 packs

by namit101

HTML

<script src="https://raw.github.com/mbostock/d3/master/d3.min.js"></script>
<script src="https://raw.github.com/mbostock/d3/master/d3.layout.min.js"></script>
<div id="chart"></div>

CSS

body {
    font-family: Helvetica, Arial, sans;
    font-size: 13px;
}

JavaScript

//draw chart
    var width = 400,
        height = 100,
        topMargin = 10;

    var vis = d3.select("#chart")
        .append("svg")
        .attr("width",width)
        .attr("height",height);    

function rightRoundedRect(x, y, width, height, radius) {    
  return "M" + x + "," + y
       + "h" + (width - radius)
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
       + "v" + (height - 2 * radius)
       + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
       + "h" + (radius - width)
       + "z";
}

var drawGraph = function(vis,w,h)
{    
    var color = itgcolors,
        x1 = 0,
        x2 = w/3,
        x3 = w,
        y1 = topMargin,
        y2 = h;
    
    var x = d3.scale.linear().domain([0,1]).range([x2,x3]),
        y = d3.scale.ordinal().domain([""]).rangeBands([y1,y2]),
        yalt = d3.scale.ordinal().domain([""]).rangeBands([y1,y2]);
    
    var rectg = vis.append("g");
    var dataLabelg = vis.append("g");
    var labelg = vis.append("g");
        
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient('left');

    var yax = labelg.append('g')
        .attr('transform', 'translate('+x2+',0)')
        .attr('class', 'axis predictedGraphLabel')
        .call(yAxis);
    
    var yAxisAlt = d3.svg.axis()
        .scale(yalt)
        .orient('right');

    var yaxAlt = labelg.append('g')
        .attr('transform', 'translate('+x2+',0)')
        .attr('class', 'axis predictedGraphLabel')
        .call(yAxisAlt);
    /*

    /*
    want axis?
        var yAxis = d3.svg.axis()
        .scale(y)
        .orient('left');

    var yax = vis.append('g')
        .attr('transform', 'translate('+x2+',0)')
        .attr('class', 'axis predictedGraphLabel')
        .call(yAxis); */
    
    
    var redraw = function(data)
    {
        var maxx = _.reduce(data,function(a,b){ return Math.max(a,b.value); },0);
        var labels = _.map(data,function(a){ return a.name; });
        var values =...