Scrollytelling and responsive design

Published November 5, 2019

C H A R T * O N E

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:

  • Each button should be turned into a step (scroll down to see them).
  • When I resize, the graphic should scale to the width of its container, but not the height.
  • It would be nice if you gave me a sentence to pretend this is a story instead of just "here's Africa!" Not that we have a strong story, of course.

Countries with the highest life expectancies are in Asia

African countries have the lowest life expectancy

Life expectancies vary in North America

Lower GDP, lower life expectancies

Life expectancies by continent

Reset


C H A R T * T W O

Does cold weather slow the housing market?

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.

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.


C H A R T * T H R E E

Remember radial diagrams? They're back!

It's getting cold and I don't like it.

Requirements:

  • Should display the city listed
  • When you're resizing, it should always be square. It should be the smallest between the height and width.
  • The bands should move with each city
  • The colors should change based on the mean high temperature of each city
  • As it scroll the transitions should be smooth
  • The background of the city name IN THE TEXT should match the color of the city circle (you can use the colored-text class to give the text some nice padding)

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.