#001 - Barcharts with DOM elements by davo

index.html

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

movies20017.csv

title,worldwideGross
'Beauty and the Beast',1142500233
'The Fate of the Furious',1060321355
'Logan',607733434
'Kong: Skull Island',559465386
'The Boss Baby',396625814
'Fifty Shades Darker',378827494
'xXx: Return of Xander Cage',346147658
'The Lego Batman Movie',307390427
'Split',274921905
'Kung Fu Yoga',254212245

style.css

html,
body
{
    height: 100%;
}
body
{
    font-family: -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
}
header,
section
{
    display: flex;
    padding: 42px 0 42px 42px;
    justify-content: flex-start;
    align-items: baseline;
}
header
{
    padding: 42px 0 0px 42px;
}
section
{
    padding: 0px 0 42px 42px;
}
h1
{
    font-size: 1.9rem;
    font-weight: 200;
}
p
{
    font-size: .8rem;
    font-weight: 300;
    margin: 0 24px 0 0;
}
figure {
    margin: 0;
    padding: 0;
    border: 0;
}
.chart
{
    display: flex;
    flex-direction: row;
    width: 960px;
    height: 500px;
    padding: 0 0 42px 42px;
    flex-flow: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.chart div
{
    font-size: .6rem;
    width: 30px;
    height: 0;
    margin: 3px;
    padding: 6px;
    text-align: center;
    color: white;
    background-color: #474ff1;
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    border-radius: 3px;
}