Once upon a time we built this for homework
Yes, it's pretty terrible. But we're going to turn it into responsive scrollytelling anyway.
Requirements:
It should look like this when you're done.
Asia
Africa
North America
Low GDP
Colored by continent
Reset
Make this graphic responsive, allowing it to fill the height and width of its container.
Let's be honest: I don't really know what this data is anymore, but that isn't going to stop us from using it.
It should look like this when you're done.
In this step, you'll draw all of the lines.
Give the "U.S." line a highlight color, bold the text, and and grey out every other line/bubble/text.
Highlight the Mountain, Pacific, West South Central, South Atlantic regions (but in a different color than the average).
Finally, draw the rectangle that represents winter.
Remember radial diagrams? They're back!
Requirements:
colored-text
class to give the text some nice padding)It should look like this when you're done.
Right now you're looking at NYC.
Beijing is similar to NYC, but a little colder in the winters.
If we'd like to bundle up in coats and scarves, though, Stockholm definitely has Beijing beat!
If you'd like to stay warm in those coldest months, it might be worth a trip across the equator to Lima.
Too much of a trek? Tuscon, Arizona, isn't that bad most of the year, as long as you don't mind the temperature dropping at night.
Bonus! We're stealing it from the New York Times.
This was horrible to code, and horrible to write a walkthrough for. I know it's a bonus, I know you don't have to do it, but I'm just warning you: it might be extra horrible.
It should look like this when you're done.
We'll start with everything in the center
And then move them all out based on jobs since the recession
I mean, it isn't a step, but you need a hover. We aren't going to do the crazy stuff the NYT does, but
You can also highlight some things when you hit this step.
And here's an empty step