search

Etc-Gallery / knock-at-the-gates

Interactive data visualizations exploring the practice of the death penalty in the United States.
0 stars 0 forks source link

Adds a first pass at the "Narrow Practice" (DPIC map) interactive #77

Closed jswest closed 9 years ago

jswest commented 9 years ago

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:

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

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

Galenlbeebe commented 9 years ago

@gabeisman, here's the etc gallery homepage with gifs so you can see what multiple gifs would look like. http://etc-gallery.com/

On Sat, Nov 8, 2014 at 8:44 PM, John West notifications@github.com wrote:

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 https://github.com/Etc-Gallery/knock-at-the-gates/issues/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:

New design elements for the "homepage"

In response to #54 https://github.com/Etc-Gallery/knock-at-the-gates/issues/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 https://github.com/GabeIsman has had time to take a peek and make sure nothing is too gross.

Questions

A basic single-page architecture

Really piggybacks on what @GabeIsman https://github.com/GabeIsman did before. It's a little gross, but it works, and I think I get to close #55 https://github.com/Etc-Gallery/knock-at-the-gates/issues/55 when we merge this in. Questions

  • @GabeIsman https://github.com/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?

You can merge this Pull Request by running

git pull https://github.com/Etc-Gallery/knock-at-the-gates narrow-practice-interlude

Or view, comment on, or merge it at:

https://github.com/Etc-Gallery/knock-at-the-gates/pull/77 Commit Summary

  • adds the hamburger button and dropdown menu.
  • adds the scripts and the data for the narrow practice interlude.
  • adds markup fro the primary-nav, and adds markup for the new interlude.
  • adds the scripts and styles and vendor dependencies for the new interlude.

File Changes

Patch Links:

— Reply to this email directly or view it on GitHub https://github.com/Etc-Gallery/knock-at-the-gates/pull/77.

GabeIsman commented 9 years ago

I think the gif's should be fine, not too concerned about that.

I AM concerned about the scrolling structure of this. IMO we should not put any interactives on the home page (similar to the etc gallery home page). We are already suffering from the performance of that (pretty laggy on my macbook air, which I think is mostly due to svg blur). I think the lined up interactive thumbnails indicate a click-to-view structure. There is no indication that scrolling would do what it does.

I would rather see click-only interactions where clicking a thumbail takes you to a new view (same page) that has ONLY the interactive on it. Click the page title to get back to the home page. Interactive thumbails show up underneath each interactive to aid navigation.

I'll take a quick pass through the code as it stands on this branch and make any changes that seem super necessary. I'll also take a stab at the multi-view approach.

GabeIsman commented 9 years ago

Made an initial pass at one way we could basic multi-view style setup. It's buggy.

jswest commented 9 years ago

Fixes the multi-view style setup by implementing a "router" of sorts.