<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.header{
background-image: linear-gradient(to right, #ff5f6d, #ffc371);
}
.ml7 {
position: relative;
font-weight: 1200;
}
.ml7 .text-wrapper {
position: relative;
display: inline-block;
padding-top: 0.2em;
padding-right: 0.05em;
padding-bottom: 0.1em;
overflow: hidden;
padding-left: 14px;
}
.ml7 .letter {
transform-origin: 0 100%;
display: inline-block;
line-height: 1.3em;
font-size: 3.6em;
color: #FFFFFF
}
</style>
<script>
// Wrap every letter in a span
$('.ml7 .letters').each(function(){
$(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "$&"));
});
anime.timeline({loop: true})
.add({
targets: '.ml7 .letter',
translateY: ["1.1em", 0],
translateX: ["0.55em", 0],
translateZ: 0,
rotateZ: [180, 0],
duration: 1050,
easing: "easeOutExpo",
delay: function(el, i) {
return 50 * i;
}
}).add({
targets: '.ml7',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
</script>
This week, we're going to talk about what makes a great data story, and how you can create one of your own.
Slides
Some stories mentioned:
- Important: Sign up using this spreadsheet to do a critique
- Also important: Final Project: Every group pitches 3 ideas by Monday @ 5 PM
