Small multiples appearance and setup

[hrecht]

Endowments section small multiples, created by https://github.com/UI-Research/college-affordability.urban.org/blob/develop/pages/producing-education/json/02_0061.json and https://github.com/UI-Research/college-affordability.urban.org/blob/develop/pages/producing-education/json/02_0062.json Issues:

• Most important: The graphs should be stacked vertically so that they're readable. It looks like a width of 1/3 of the container is hard coded. Most small multiples will not have exactly 3 subgraphs. Easy solution is 100% width and vertical stack.
• In this case, there are no notes. That should result in no notes attribute being shown. See code below:

<Multiples title="Median endowment income per student by level of selectivity" source="Integrated Postsecondary Education Data System" notes="">
  <Graph file={require('./json/02_0061.json')} small="true" />
  <Graph file={require('./json/02_0062.json')} small="true" />
</Multiples>

• The graph section title, notes, and sources, are defined in the .jsx rather than the .json for small multiples. This breaks the normal pattern and could be difficult with our production workflow, given that all the information should be contained in the .json alone. Ideally, it would be great if the metadata and series attributes hold to the same usage patterns as the other graphs. This is less important.

[hrecht]

Note: the titles are repeated above both graphs here because I put series name ("Private Nonprofit Four-Year Institutions" etc) in the typical places. Will move those to the title attribute of each json if needed, but it'll require some refactoring. EDIT: Made this change. Graph titles are now series names for small multiples

[hrecht]

https://github.com/UI-Research/college-affordability.urban.org/issues/127 is also an issue here with the top bar of the left graph

[bchartoff]

Small multiples at 100% means a lot of scrolling, and so for the layout issue, I made it so that 2 small multiples are 50% default content well, 3+ remain at 1/3 default content well. Commit 508f2cf8adb1d7c1d95758afb6d9bf328f6517ef

[bchartoff]

Also, leveraged d3 functionality for fewer ticks/gridlines with nice values. NOTE: this function is only being used for small multiples, since it can't handle complicated use cases (like toggles or stacked bars). @hrecht please flag if there are small multiples (now or in the future) where this function breaks ticks, and I can refactor. My inclination would be close this issue for now and reopen new one (unless you discover a problem right now).

Addressed in commit bd3b29a13620709ff995f2ce90160fd840ddc516

[bchartoff]

Notes bug fixed by commit 0235e71bd6e80bc2a51bf50fc26cdaf6327619a1

[hrecht]

Pulling repo now, will take a look.

[bchartoff]

Moving title/notes/source out of jsx is significant refactor, so I'd be inclined to leave as is. @hrecht for future issues, if possible, please make them as granular as possible (e.g. jsx issue is really separate from sizing). If we close this issue, let's open a new issue w/ the jsx small multiples problem, and for now (if you're ok with this) tag it with wontfix

[hrecht]

That's fine for the jsx issue. I think it'll just require some coordination between me and Jerry in the production phase. I'm seeing two source lines here now that the notes are missing - in producing-education/endowments

[hrecht]

Fewer gridlines fix is great, thanks.

[bchartoff]

Derp double source fixed by 671c5c1bc9d84f6151585cd2a898cbfdc7f71387

[bchartoff]

@hrecht feel free to close this issue if everything looks good (and open a wontfix issue for the jsx)

[hrecht]

That seems to have reordered source & notes in the other small multiples - order should be source, then notes. Otherwise looks good!

[bchartoff]

fixed 64b8f54dbc05bdf280776a18cda623b68051a4bf