Skip to content

Instantly share code, notes, and snippets.

@davo

davo/index.html

Last active May 4, 2017
Embed
What would you like to do?
#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>
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment