Matching Parametric styles and minor UX changes

[fredhohman]

Graphics

• [ ] make CO2 emissions bar chart text width, and merge into Graphic component the simplest way to do this is to remove the [/TextContainer] and [TextContainer] tags directly before and after the graph. However the text appears rather small & cramped when I try this. -AB

• [x] line chart annotation arrows -> gray

• [x] line chart tooltips: white background

• [ ] line chart tooltips: little more padding (@aatishb I can change background color with hoverlabel, but doesn't look like we can add padding. can you check this out?) @fredhohman I looked into this some. It’s more complicated than I expected. Looks like the hover tooltip is created & positioned with SVG so we can’t easily add padding. According to this thread the only way to do it is with a custom handler for the hover event.

• [ ] line chart (@aatishb could you try some of these since you are familiar with the plotly code?):

  • [x] no x label for "year" since that's implied
  • [x] add x and y baseline in lighter gray but a little thicker (maybe just x?)
  • [x] little more padding on y-axis label
  • [x] axis labels (and each tick label) can be a little smaller
  • [ ] merge into bring these in Graphic component

• [x] hover on chart to show tooltip should have crosshairs cursor not pointer (@aatishb could you look at this too? hopefully is an easy CSS thing...)

• [x] first history of C02 chart: move red data behind green line when it appears (currently it's on top)

• [x] use parametric red and blue for the final chart

Text

• [x] references after author bio and editors
• [x] CO2 -> subscript the 2
• [x] space after 'on track to surpass, and space after 'long before'
• [x] fix opening quote on "There’s no problem so bad you can’t make it worse."
• [x] Make this bold: Our carbon dioxide output is accelerating. (Fixed in #7)

Design

• [x] drop down for year of birth should match parametric style
• [x] either center all text or left align charts with text and stretch width for full screen but limit height (will need @mathisonian for the CSS used on other article for the centered text layout)
• [x] Remove space under center title (this is for @fredhohman and @mathisonian)

Editorial Questions

• [x] finalize subtitles (drop "Part" to match parametric style)?
• [x] drop tooltips for final history of CO2 chart? (we don't need to do this if we make sure the chart isn't too busy looking)
• [x] decide on graph heading -- should they be more descriptive or should they all be the same. (e.g. The History of CO2 vs. The History of CO2: Civilization vs. The Birth of Civilization, or something else?) I went with descriptive for now.

[fredhohman]

For reference: f79da855e960827e0a928f2300986cd2ad0c2afd

[fredhohman]

@aatishb for when you look at this later: some of the above are related to the Graphic component. we need to make sure we have the latest Graphic component code. I think we have a few versions floating around different articles... we will make sure to get it in parametric-components before publication to standardize. just FYI!

[fredhohman]

Centered layout in d1a6f68734a740a5163603843af8b022a9035ec4.