#001 - Barcharts with DOM elements

<!DOCTYPE html>
<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