The ”Russia Left Behind” article caught my attention a few months ago and I fell in love with it, especially the two maps. I will quickly go over one way to draw a line on user scroll, although this way is different from the way the New York Times did it. From the looks of it they used TopoJSON.
There’s two pieces in building this line. First is creating the SVG and second is drawing it on an html page.
I used illustrator but I believe inkscape would work as well. All you need is the
<svg> code. Inside Illustrator use the pen tool to draw a line or shape. The tough part is making sure that all the points stay part of a single path, which results in a single
<svg> block. When your done hit “save as” and change the type to .svg then click save and click “Show SVG Code”, or just save it and open it in a code editor. You should be able to extract a single code block, mine looks like this:
1 2 3 4 5 6 7 8 9 10
Paste your code into an html document with some spacing around it so you can scroll, then include jquery. Here’s the scrolling code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
The basic idea in the drawLine() function is to calculate the percentage of distance the container is from the top of the viewport and then draw the line based on that percentage. The
line.style.strokeDasharray is where the real magic happens.
Now everytime you scroll, the new height percentage is caluclated and that amount of the line is drawn onto the svg.
From here its easy to play with the actual SVG code and change the colors or distance of the path.