Simple Bars with Text by pstuffa

index.html

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

<style type="text/css">
 /*css to go here*/
 body {
     font-family: arial;
     font-size: 12px;
 }


</style>


<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

<script>
var body = d3.select("body");


var margin = {top: 20, right: 60, bottom: 20, left: 10};

var width = 300 - margin.left - margin.right,
   height = 150 - margin.top - margin.bottom;

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 + ")");

var xScale = d3.scale.linear()
       .range([0,width/2]);

var yScale = d3.scale.ordinal()
       .rangePoints([height,0]);

d3.csv("data.csv", ready);

function ready(err, data) {
   if (err) console.warn(err, "error loading data");

   // formatting/coercing
   data.forEach(function(d) {
       d['no_bleached.cols']  = +d['no_bleached.cols'] 
       d['total_cols']  = +d['total_cols'] ;
       d['perc_bleached'] = d['no_bleached.cols'] / d['total_cols'];
   });

yScale.domain(d3.set(data.map(function(d) { return d.genus; })).values())
xScale.domain(d3.extent(data, function(d) { return d.perc_bleached; }))

var barHeight = 10; 

  svg.selectAll("text")
    .data(data)
  .enter().append("text")
    .attr("x", width/2)
    .attr("y", function(d) { return yScale(d.genus); })
    .style("text-anchor", "end")
    .text(function(d) { return d.genus; });

  svg.selectAll("rect")
    .data(data)
  .enter().append("rect")
    .attr("x", width/2)
    .attr("y", function(d) { return  yScale(d.genus) - barHeight; })
    .attr("width", function(d) { return xScale(d.perc_bleached); })
    .attr("height", barHeight);


}


</script>
</body>

data.csv

genus,no_bleached.cols,total_cols
Porites massive,51,1439
Montipora,61,720
Acropora,75,243
Goniastrea,47,151
Fungia,49,124
Pavona,4,93
Porites branching,0,83
Leptastrea,14,80