Etc-Gallery/knock-at-the-gates — pull request #77 by jswest (2014-11-09 02:44:16+00:00)
Title: Adds a first pass at the "Narrow Practice" (DPIC map) interactive

# A note on this PR
This shouldn't be merged yet, as there is still work to do, but I wanted to create a PR where we could talk through the design and architecture of this new interactive and the new homepage structure.

# Ports the "Narrow Practice" interlude
In response to #53, this creates an interlude that used to be called "Unusual Punishment", but its first name was DPIC map, as it is, in fact, a map of the DPIC data.

### What this does:
- A straight port of the interlude from the dab-interludes repo. I had to finagle a few things, but mostly it was clean.
- A reproducible pattern for generating the data in the right form, provided you have the correct data input.
- A .md file that explains how I got this data and how it is merged.

### What this doesn't yet do:
- Add the initial text, which will be written by @Galenlbeebe.
- Do the calculations necessary for @Galenlbeebe to create that initial text. Viz., what percentage of executions are accounted for by what number or percentage of counties.

# New design elements for the "homepage"
In response to #54 I created a quasi-homepage, though the interactives and essays will still be situated in a single-page-with-scroll setup.

### What this does
- Adds a hamburger dropdown menu
- Adds a primary navigation underneath the first narration pane and before the stream of interactives and essays. Each navigable interactive or essay will have an animated .gif or static image that shows what you'll see as well as the title and subtitle of the interactive.

### What this doesn't yet do
- Fix the copy for the first narration pane so that it doesn't reference a single interactive.
- Do much of anything nicely. There's a lot that could be DRYed up, and even more that's just hackey and gross, especially in the app.js file. I tried to mark a couple of places with `// TODO` comments, but there might be more. I don't want to deploy until @GabeIsman has had time to take a peek and make sure nothing is too gross.

### Questions
- @GabeIsman, what do you think about this? Will we suffer a performance hit if we have all these interactives lined up in a row? At some point, should we start lazy-loading them based on the user's location? (FWIW, I don't think we'll need to do that, yet.
- @Galenlbeebe & @GabeIsman, should we add design elements to encourage scrolling? Particularly after the first narration pane, it sees like the user will need some prompting.
- @GabeIsman & @Galenlbeebe, do you think the animated .gif effect will be too crazy when there are multiples on the page?

# A basic single-page architecture
Really piggybacks on what @GabeIsman did before. It's a little gross, but it works, and I think I get to close #55 when we merge this in.

### Questions
- @GabeIsman, if you think we're going to have UX or performance problems with the interactives/essays all in a scroll, then we'll have to change this, but what do you think?