xxxxxxxxxx<html lang="en"> <head> <title> Neurohackweek 2017 D3 Tutorial </title> <!-- Style definitions will go in the <style> tags --> <style> .bar { background: steelblue; height: 30px; margin: 5px; color: white; text-align: right; padding-right: 5px; padding-top: 5px; } </style> </head> <!-- Content goes in the body --> <body> <h1> Hello World </h1> <p> This is a paragraph </p> <a href="https://www.google.com"> here is a link </a> <h3> My first bar graph with div elements</h3> <div id="plotArea"></div> </body> <!-- Import Javascript files here--> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script> <script> var data = [100, 150, 60, 80, 140] d3.select("#plotArea").selectAll(".bar") .data(data).enter().append("div") .attr("class", "bar") .style("width", 0) .transition() .duration(1000) .style("width", function(d){return d+"px"}) .text(function(d){return d}) d3.select("#plotArea").selectAll(".bar") .on("mouseover", function(d){ d3.select(this).style("background", "black") }) .on("mouseout", function(d){ d3.select(this).style("background", "steelblue") }) .on("click", function(d, i){ d3.select(this) .transition() .ease(d3.easeBounce) .duration(1000) .style("width", function(d){return d*1.5+"px"}) .text(function(d){return d*1.5}) //re-bind the data data[i] = data[i] * 1.5 d3.select("#plotArea").selectAll(".bar") .data(data) }) </script></html> https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js