xxxxxxxxxx<meta charset="utf-8"><style>@import 'style.css';</style><body><header> <h1>Barcharts with DOM</h1></header><section><p>CSS Flexbox: <code>align-items: flex-start;</code></p><p>Data: Highest-grossing films of 2017</p><p>Source: <a href="https://en.wikipedia.org/wiki/2017_in_film" target="_blank">Films in 2017 - Wikipedia</a></p></section><figure class="chart"></figure><script src="//d3js.org/d3.v4.min.js"></script><script>var y = d3.scaleLinear() .range([0, 320]);var format = d3.format("0.2s");d3.csv("movies20017.csv", function(error, data) { if (error) throw error; data.forEach(function(d) { d.worldwideGross = +d.worldwideGross; }); y.domain([0, d3.max(data, function(d) { return d.worldwideGross; })]); d3.select(".chart") .selectAll("div") .data(data) .enter().append("div") .transition().duration(1000) .style("height", function(d) { return y(d.worldwideGross) + "px"; }) .text(function(d) { return format(d.worldwideGross); });});</script></body> https://d3js.org/d3.v4.min.js