Enzo

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

//don't do anything until you have loaded the data
d3.csv("ext-data.csv",function(data){
    
  	//set the size and margins of the graphic and plot area
    var w = 960;
    var h = 500;
    var margin={left:30,top:66,right:30,bottom:50}
    var plotW = w-(margin.left+margin.right)
    var plotH = h-(margin.top+margin.bottom)
     
   	//create the svg element - Scalable Vector Graphics
    var svg = d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h)
    
    //Create a title
    svg.append("text")
    	.attr("id","infoText")
      .attr("x",margin.left)
      .attr("y",40)
    	.attr("font-family","Metric")
    	.attr("font-size","30px")
      .text("What title do you want Gisella?")
    
    //work out the maximum values (this is the long way around - d3 has a much quicker way of doing this)
    var maxValue = 0;
  	var maxValue2 = 0;
    data.forEach(function(d,i){
      maxValue = d3.max([maxValue,data[i].perc1]);
      maxValue2 = d3.max([maxValue,data[i].perc2]);
    })
    var highestMax = d3.max([maxValue,maxValue2])
    
    //create background rectangle in lovely FT pink
    svg.append("rect")
    	.attr("x",margin.left)
    	.attr("y",margin.top)
    	.attr("width",plotW)
    	.attr("height",plotH)
    	.attr("fill","#fff1e0")
 
   //create a chart 'group' element that is offset by the margins
   var chart = svg.append("g")
   .attr("transform","translate("+margin.left+","+margin.top+")")
   
   //create a linear scale for the vertical axis - this maps the input values (the domain) to output pixels (the range)
   var yScale = d3.scaleLinear()
   									.domain([0,highestMax])
   									.range([plotH,0])
   
   //extract the names for the categories of each bar
   var cats = data.map(function(d){return d.name})
   
   //use the category names to create a scale for the x axis - note this is different to to the yScale, which is Linear
   var xScale = d3.scaleBand()
   									.domain(cats)
   									.range([0,plotW])
   									.padding(0.2)
   
  //create and append the xAxis
   var xAxis = d3.axisBottom(xScale)
   chart.append("g")
   	.attr("id","xAxis")
   	.attr("transform","translate(0,"+plotH+")")
   	.call(xAxis)
   
   //create and append the yAxis
   var yAxis = d3.axisLeft(yScale)
   	.ticks(7)
   	.tickSizeInner(-plotW)
   chart.append("g")
   	.attr("id","yAxis")
   	.call(yAxis)
   
   //finally - we can actually create the rectangles needed for the chart - notice that the geometry of the chart uses the xScale and yScale objects we have just created to put the chart in the right place
   var rects = chart.append("g")
   								.selectAll("rect")
   								.data(data)
   								.enter()
   								.append("rect")
   								.attr("fill","#bb6d82")
   								.attr("x",function(d){
                    return xScale(d.name)
                  })
   								.attr("width",xScale.bandwidth)
   								.attr("y",function(d){
                    return yScale(d.perc1)
                  })
   								.attr("height",function(d){
                    return plotH-(yScale(d.perc1))
                  })
   
 //create a circle - to be used for interactivity
 chart.append("circle")
 	.attr("r",20)
 	.attr("cx",50)
 	.attr("cy",50)
 	.attr("fill","blue")
 	.on("mouseover",function(){
   	rects.transition().duration(1000).attr("fill","blue")
 	})
 .on("mouseout",function(){
   	rects.transition().duration(1000).attr("fill","#bb6d82")
 	})
 .on("click",function(){
   rects.transition()
     	.duration(1000)
   		.ease(d3.easeElastic)
   		.delay(function(d,i){
     		//this delays each bar by 100 milliseconds
     		return i*100
   		})
     	.attr("y",function(d){
     		//uses the alternative value (perc2)
        return yScale(d.perc2)
      })
   		.attr("height",function(d){
     		//uses the alternative value (perc2)
        return plotH-(yScale(d.perc2))
      })
 	})
   
     })
   
   
   
  </script>
</body>

https://d3js.org/d3.v4.min.js