davo/index.html

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

## preview.png

      
    Raw
  

              preview.png
            
          
## 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;
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>
	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
	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;
	}