Horizontal Bar Chart

data.js

var dataset = {

data1 : 
  { chem:"Amitriptyline",
    data : [ 
      {"value":.8244,"name":"Least"},
      {"value":.7776,"name":"Less"},
      {"value":.4922,"name":"More"},
      {"value":.4567,"name":"Most"}
    ] 
  },

data2 : 
  { chem:"Chlordiazepoxide",
    data : [ 
      {"value":2.4612,"name":"Least"},
      {"value":1.7757,"name":"Less"},
      {"value":2.1758,"name":"More"},
      {"value":1.6227,"name":"Most"}
    ] 
  },

data3 : 
  { chem:"Citalopram",
    data : [ 
      {"value":.8233,"name":"Least"},
      {"value":.7527,"name":"Less"},
      {"value":.6630,"name":"More"},
      {"value":.6009,"name":"Most"}
    ] 
  },

data4 : 
  { chem:"Clomipramine",
    data : [ 
      {"value":.4244,"name":"Least"},
      {"value":.4755,"name":"Less"},
      {"value":.3365,"name":"More"},
      {"value":.0572,"name":"Most"}
    ] 
  },
data5 : 
  { chem:"Clonazepam",
    data : [ 
      {"value":-.0347,"name":"Least"},
      {"value":.0652,"name":"Less"},
      {"value":-.0561,"name":"More"},
      {"value":-.2712,"name":"Most"}
    ] 
  },
data6 : 
  { chem:"Codeine",
    data : [ 
      {"value":-.2784,"name":"Least"},
      {"value":-.3838,"name":"Less"},
      {"value":-.5201,"name":"More"},
      {"value":-.5216,"name":"Most"}
    ] 
  },
data7 : 
  { chem:"Diamorphine",
    data : [ 
      {"value":.7328,"name":"Least"},
      {"value":.4939,"name":"Less"},
      {"value":.5070,"name":"More"},
      {"value":.1090,"name":"Most"}
    ] 
  },
data8 : 
  { chem:"Diazepam",
    data : [ 
      {"value":3.9737,"name":"Least"},
      {"value":3.0211,"name":"Less"},
      {"value":3.5334,"name":"More"},
      {"value":2.2732,"name":"Most"}
    ] 
  },
data9 : 
  { chem:"Dihydrocodeine",
    data : [ 
      {"value":.1729,"name":"Least"},
      {"value":-.1650,"name":"Less"},
      {"value":-.2543,"name":"More"},
      {"value":-.3342,"name":"Most"}
    ] 
  },
data10 : 
  { chem:"Dosulepin",
    data : [ 
      {"value":.6950,"name":"Least"},
      {"value":.8666,"name":"Less"},
      {"value":.7762,"name":"More"},
      {"value":.6478,"name":"Most"}
    ] 
  },
data11 : 
  { chem:"Duloxetine",
    data : [ 
      {"value":1.8047,"name":"Least"},
      {"value":1.4235,"name":"Less"},
      {"value":1.0066,"name":"More"},
      {"value":.6370,"name":"Most"}
    ] 
  },
data12 : 
  { chem:"Escitalopram",
    data : [ 
      {"value":2.6973,"name":"Least"},
      {"value":2.4430,"name":"Less"},
      {"value":2.1885,"name":"More"},
      {"value":.9907,"name":"Most"}
    ] 
  },
data13 : 
  { chem:"Fentanyl",
    data : [ 
      {"value":2.0435,"name":"Least"},
      {"value":1.6067,"name":"Less"},
      {"value":.9642,"name":"More"},
      {"value":.3947,"name":"Most"}
    ] 
  },

data14 : 
  { chem:"Fluoxetine",
    data : [ 
      {"value":1.7537,"name":"Least"},
      {"value":1.3515,"name":"Less"},
      {"value":1.0267,"name":"More"},
      {"value":1.3098,"name":"Most"}
    ] 
  },
data15 : 
  { chem:"Fluvoxamine",
    data : [ 
      {"value":1.1208,"name":"Least"},
      {"value":.9691,"name":"Less"},
      {"value":.3515,"name":"More"},
      {"value":.0999,"name":"Most"}
    ] 
  },
data16 : 
  { chem:"Imipramine",
    data : [ 
      {"value":1.0628,"name":"Least"},
      {"value":.5309,"name":"Less"},
      {"value":.3724,"name":"More"},
      {"value":-.1753,"name":"Most"}
    ] 
  },
data17 : 
  { chem:"Lofepramine",
    data : [ 
      {"value":.2387,"name":"Least"},
      {"value":.6471,"name":"Less"},
      {"value":.3891,"name":"More"},
      {"value":.2462,"name":"Most"}
    ] 
  },
data18 : 
  { chem:"Loprazolam",
    data : [ 
      {"value":.6819,"name":"Least"},
      {"value":.7483,"name":"Less"},
      {"value":.7897,"name":"More"},
      {"value":-.1708,"name":"Most"}
    ] 
  },
data19 : 
  { chem:"Lorazepam",
    data : [ 
      {"value":.3479,"name":"Least"},
      {"value":.4738,"name":"Less"},
      {"value":.1191,"name":"More"},
      {"value":-.1302,"name":"Most"}
    ] 
  },
data20 : 
  { chem:"Lormetazepam",
    data : [ 
      {"value":1.3249,"name":"Least"},
      {"value":1.3574,"name":"Less"},
      {"value":1.9809,"name":"More"},
      {"value":.0037,"name":"Most"}
    ] 
  },
data21 : 
  { chem:"Midazolam",
    data : [ 
      {"value":.6635,"name":"Least"},
      {"value":1.1505,"name":"Less"},
      {"value":1.1657,"name":"More"},
      {"value":.4597,"name":"Most"}
    ] 
  },
data22 : 
  { chem:"Moclobemide",
    data : [ 
      {"value":.9300,"name":"Least"},
      {"value":.7468,"name":"Less"},
      {"value":.4626,"name":"More"},
      {"value":-.0621,"name":"Most"}
    ] 
  },
data23 : 
  { chem:"Nitrazepam",
    data : [ 
      {"value":1.6746,"name":"Least"},
      {"value":1.0775,"name":"Less"},
      {"value":1.1045,"name":"More"},
      {"value":.4565,"name":"Most"}
    ] 
  },
data24 : 
  { chem:"Nortriptyline",
    data : [ 
      {"value":.0716,"name":"Least"},
      {"value":.0252,"name":"Less"},
      {"value":-.0182,"name":"More"},
      {"value":-.5223,"name":"Most"}
    ] 
  },
data25 : 
  { chem:"Oxazepam",
    data : [ 
      {"value":.9286,"name":"Least"},
      {"value":1.7845,"name":"Less"},
      {"value":2.3820,"name":"More"},
      {"value":.3179,"name":"Most"}
    ] 
  },
data26 : 
  { chem:"Oxycodone",
    data : [ 
      {"value":1.6959,"name":"Least"},
      {"value":1.2570,"name":"Less"},
      {"value":1.1806,"name":"More"},
      {"value":.4422,"name":"Most"}
    ] 
  },
data27 : 
  { chem:"Paracetamol",
    data : [ 
      {"value":.1245,"name":"Least"},
      {"value":.1448,"name":"Less"},
      {"value":.0360,"name":"More"},
      {"value":-.0642,"name":"Most"}
    ] 
  },
data28 : 
  { chem:"Paroxetine",
    data : [ 
      {"value":.6087,"name":"Least"},
      {"value":.5560,"name":"Less"},
      {"value":.3368,"name":"More"},
      {"value":.4178,"name":"Most"}
    ] 
  },
data29 : 
  { chem:"Pethidine",
    data : [ 
      {"value":-.0322,"name":"Least"},
      {"value":.6920,"name":"Less"},
      {"value":-.0047,"name":"More"},
      {"value":.3203,"name":"Most"}
    ] 
  },
data30 : 
  { chem:"Phenelzine",
    data : [ 
      {"value":1.0138,"name":"Least"},
      {"value":.5961,"name":"Less"},
      {"value":1.6852,"name":"More"},
      {"value":.2048,"name":"Most"}
    ] 
  },
data31 : 
  { chem:"Sertraline",
    data : [ 
      {"value":1.5307,"name":"Least"},
      {"value":1.3492,"name":"Less"},
      {"value":1.1818,"name":"More"},
      {"value":.8405,"name":"Most"}
    ] 
  },
data32 : 
  { chem:"Temazepam",
    data : [ 
      {"value":5.4255,"name":"Least"},
      {"value":4.3842,"name":"Less"},
      {"value":4.5546,"name":"More"},
      {"value":3.5195,"name":"Most"}
    ] 
  },
data33 : 
  { chem:"Tramadol",
    data : [ 
      {"value":-.2073,"name":"Least"},
      {"value":-.4565,"name":"Less"},
      {"value":-.5104,"name":"More"},
      {"value":-.6482,"name":"Most"}
    ] 
  },
data34 : 
  { chem:"Venlafaxine",
    data : [ 
      {"value":3.6215,"name":"Least"},
      {"value":3.1085,"name":"Less"},
      {"value":2.6869,"name":"More"},
      {"value":2.5475,"name":"Most"}
    ] 
  },
data35 : 
  { chem:"Zaleplon",
    data : [ 
      {"value":.5936,"name":"Least"},
      {"value":-.2935,"name":"Less"},
      {"value":.0395,"name":"More"},
      {"value":-.1700,"name":"Most"}
    ] 
  },
data36 : 
  { chem:"Zolpidem",
    data : [ 
      {"value":6.9583,"name":"Least"},
      {"value":4.6562,"name":"Less"},
      {"value":3.8212,"name":"More"},
      {"value":2.5546,"name":"Most"}
    ] 
  },
data37 : 
  { chem:"Zopiclone",
    data : [ 
      {"value":1.7301,"name":"Least"},
      {"value":1.5217,"name":"Less"},
      {"value":1.5264,"name":"More"},
      {"value":.6235,"name":"Most"}
    ] 
  },




};

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://underscorejs.org/underscore.js"></script>
  <script src="js/data.js" type="text/javascript" charset="utf-8"></script>
<style>



.bar.positive {
  stroke:black;
  stroke-width:1;
  stroke-right-width:4;
  border-left-width: 0;
}

.bar.negative {
  stroke:black;
  stroke-width:1;
  border-right-width: 0;
}

.bar:hover{
  stroke:orange;
  stroke-width:2;
}

.axis text {
  font: 14px Garamond, serif;
}

.axis path,
.axis line {
  fill: none;
  stroke:black;
  stroke-width:1px;
  shape-rendering: crispEdges;
}

.x.axis line{
  stroke: #000;
}

.y.axis line{
  stroke:black;
}

.title {
  font: bold 24px monospace;
}

.enter {
}

.update {
  fill: #333;
}

.exit {
  fill: brown;
}

.tip{
  font:  26px monospace, Garamond, serif;
  opacity:0;

}

.lab{
  font: 16px Garamond, serif;
}
.ENG{
  font: 12px Garamond, serif;
}
.instruct{
  font: 12px Arial, sans-serif; 
  font-style: italic;
}
.pointer{
  stroke:red;
  stroke-width:2px;
  opacity:0;
  fill:red;
  }

.pause{
  stroke:grey;
  stroke-width:3px;
  fill:white;
  opacity: 0;
}
.play{
  stroke:grey;
  stroke-width:3px;
  fill:white;
  opacity:0;
}


</style>
</head>
<title>Bar Chart with Negative Values</title>

<body>

<script>



var margin = {top: 70, right: 45, bottom: 10, left: 10},
    width = 400 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width])

var y = d3.scale.ordinal()
    .rangeRoundBands([0, height], .2);

var xAxis = d3.svg.axis()
    .scale(x)
    .ticks(6)
    .orient("top");

var svg = d3.select("body").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 + ")");




    
//Format ticks
var percent = d3.format("+1%");
xAxis.tickFormat(percent);


    
function update(data) {

  //Make sure 0 is in the domain if both numbers are positive or negative.
  var x_extent = d3.extent(data.data, function(d) { return +d.value ; });
      if(x_extent[0]*x_extent[1]<0){
        //opposite signs
        x.domain(x_extent).nice();
      }else if(x_extent[0]<0){
        //both negative
        x.domain([_.min(x_extent),0])
      }else{
        //both positive
        x.domain([0,_.max(x_extent)])
      };
    
  y.domain(data.data.map(function(d) { return d.name; }));


    var titles = svg.selectAll(".title")
      .data(data.chem.split(""),function(d,i){return d+i;});
      

    //update
    titles.attr("class","title update")
      .transition()
      .duration(750)
      .attr("x", function(d, i) { return i * 16; });
    //enter
    titles.enter().append("text")
      .attr("class","title enter")
      .attr("y", -50)
      .attr("x", function(d, i) { return i * 16; })
      .style("fill-opacity", 1e-6)
      .text(function(d) { return d; })
     .transition()
      .duration(750)
      .attr("y", -35)
      .style("fill-opacity", 1);
    titles.exit()
      .attr("class", "title exit")
    .transition()
      .duration(750)
      .attr("y", -20)
      .style("fill-opacity", 1e-6)
      .remove();



    var labs = svg.selectAll(".lab")
      .data(data.data);

    labs.enter().append("text").attr("class","lab");
    
    labs
      .text( function(d){return d.name;} )
      .attr("transform",function(d){ return "translate("+(width+10)+","+ (y(d.name)+ (y.rangeBand()/2)+(this.getComputedTextLength()/2) )+")rotate(-35)";});
    
    labs.exit()
      .remove();  



    var ENG = svg.selectAll(".ENG")
      .data(data.data);
    ENG.enter()
      .append("text")
      .attr("class","ENG")
      .attr("x",0)
      .attr("y",height+10);
    
    ENG
      .text("ENG")
      .transition().duration(1000)
      .attr("x",x(0)-11.5);

    ENG.exit()
      .remove();


    var bars = svg.selectAll(".bar")
      .data(data.data);


    bars.enter().append("rect")
      .attr("width",0)
      .attr("cursor","pointer")
      .attr("x", function(d) { return d.value < 0 ? x(0) : x(Math.min(0, d.value)); })
      
      .on("click", 
            function(){ 
              onclick();
              if(clicker == 1)
                {
                  clearInterval(interval),
                  clicker = 0,
                  pausing.transition().duration(600)
                    .style("opacity",1)
                    .transition().duration(600)
                    .style("opacity",0);
                }
              else
                { 
                  update(eval("dataset.data".concat(i)));
                  if(i < 4){i=i+1}else{i=1};
                  interval = setInterval(cycle,5000) , 
                  clicker=1,
                  playing.transition().duration(600)
                    .style("opacity",1)
                    .transition().duration(600)
                    .style("opacity",0);
                };
            }
          )
      .on("mouseover",function(d){
          svg.select(".tip."+ d.name)
            .style("opacity","1")
            .style("fill","black");
          svg.select(".pointer."+ d.name)
            .style("opacity","1");
          svg.selectAll(".instruct")
            .transition().duration(700)
            .style("opacity",1);
          })
      .on("mouseout",function(d){
          svg.select(".tip."+ d.name)
            .style("fill","grey")
            .transition().duration(100)
            .style("opacity","0");
          svg.select(".pointer."+ d.name)
            .style("opacity","0");
          svg.selectAll(".instruct")
            .transition().duration(700)
            .style("opacity",0);
          })
      ;
    

    bars
      .transition().duration(1000)
      .attr("class", function(d) { return d.value < 0 ? "bar negative" : "bar positive"; })
      .attr("y", function(d) { return y(d.name); })
      .attr("height", y.rangeBand())
      .style("fill", function(d) { return d.value < 0 ? "steelblue" : "#800000"; })
      .attr("x", function(d) { return x(Math.min(0, d.value)); })
      .attr("width", function(d) { return Math.abs(x(d.value) - x(0)); });

    bars.exit()
      .remove();


var onclick = function(){
    var bar = d3.selectAll(".bar");

      bar
        .transition().duration(60)
        .attr("height",y.rangeBand()-4)
        .attr("y", function(d) { return y(d.name)+2; })
        .attr("width", function(d) { return Math.abs(x(d.value) - x(0)-4); })
        .attr("x", function(d) { return x(Math.min(0, d.value))+2; })
        .transition().duration(60)
        .attr("height",y.rangeBand())
        .attr("y", function(d) { return y(d.name); })
        .attr("width", function(d) { return Math.abs(x(d.value) - x(0)); })
        .attr("x", function(d) { return x(Math.min(0, d.value)); });

  };

    var tips = svg.selectAll(".tip")
      .data(data.data);

    tips.enter().append("text").attr("class",function(d){return "tip "+d.name;})
      .attr("y",-33)
      .attr("x",width-50);

    tips
      .text(function(d){ return percent(d.value) ;});

    tips.exit()
    .remove();


    //Update x-axis
    svg.select(".x.axis")
        .transition()
        .duration(1000)
        .call(xAxis);

    svg.selectAll(".y.axis")
      .transition()
      .duration(1000)
      .attr("x1", x(0))
      .attr("x2", x(0));


    var pointers = svg.selectAll(".pointer")
      .data(data.data);

    pointers.enter().append("polygon")
      .attr("class",function(d){return "pointer "+d.name;});

    pointers
      .transition()
      .duration(1000)
      .attr("points",function(d){ return x(d.value)+",-2 "+(x(d.value)-5)+",-10 "+(x(d.value)+5)+",-10";});

    pointers.exit().remove();
};


    svg.append("g")
      .attr("class", "x axis")
      .call(xAxis);
    
    svg.append("g")
      .attr("class", "y axis")
      .append("line")
      .attr("class", "y axis")
      .attr("y2", height)
      .attr("x1", 0)
      .attr("x2", 0);


var i = 1,
    clicker = 1;

update(eval("dataset.data".concat(i)));
if(i < 4){i=i+1}else{i=1};
var cycle = function(){update(eval("dataset.data".concat(i)));if(i < 37){i=i+1}else{i=1};};

var interval = setInterval(cycle,5000);

svg.append("polygon")
  .attr("class", "play")
  .attr("points",(width/2+20)+","+(height/2)+" "+(width/2-20)+","+(height/2-20)+" "+(width/2-20)+","+(height/2+20));;


console.log(eval("dataset.data".concat(i,".value")));

// Play/Pause Instructions
svg.append("rect")
  .attr("class","instruct")
  .attr("x",-10)
  .attr("y",height-5)
  .attr("height",18)
  .attr("width",113)
  .style("fill", "white")
  .style("opacity",0);

svg.append("text")
  .attr("class","instruct")
  .text("Click to pause/play.")
  .attr("x",-5)
  .attr("y",height+8)
  .style("opacity",0);

// Play/Pause button
svg.append("rect")
  .attr("class", "pause")
  .attr("width",13)
  .attr("height",40)
  .attr("x", width/2 - (10))
  .attr("y", height/2 - (40/2));
svg.append("rect")
  .attr("class", "pause")
  .attr("width",13)
  .attr("height",40)
  .attr("x", width/2 + (10))
  .attr("y", height/2 - (40/2));
svg.append("polygon")
  .attr("class", "play")
  .attr("points",(width/2+20)+","+(height/2)+" "+(width/2-20)+","+(height/2-20)+" "+(width/2-20)+","+(height/2+20));

var pausing = svg.selectAll(".pause");
var playing = svg.selectAll(".play");

</script>

thumbnail.png