function render(data, category) {
  
var base = d3.select("section").selectAll("div.h-bar")  
        .data(data)
        .enter()
        .append("div")
        .attr("class", "h-bar");

var imageWrap = base // append for images
        .append("div")
        .attr("class", "imageWrap");

var spanWrap = base // append spans for text
        .append("span");


d3.select("section").selectAll("div.h-bar")  
        .data(data)
        .exit().remove();

var bar = d3.select("section").selectAll("div.h-bar")  
        .data(data)
        .attr("class", "h-bar")
        .select("div span")
        .html(function (d) {
            return d.name + " <br /> age: " + d.age + " years" + " <br /> location: " + d.location + " <br /> fact 1: " + d.fact1 + " <br /> fact 2: " + d.fact2;
        });

var image = d3.select("section").selectAll("div.imageWrap")  
        .data(data)
        .html(function (d) {
            return "<img src=\"" + d.image + "\" alt=\"\">" ;
        });


d3.select("section").selectAll("div.h-bar")
        .filter(function (d, i) {  
            return d.category == category;
        })
        .classed("selected", true)            
}

render(data);

function select(category) {
    render(data, category);
}