Skip to content

Matching Parametric styles and minor UX changes #6

@fredhohman

Description

@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

  • line chart annotation arrows -> gray

  • 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?):

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

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

  • use parametric red and blue for the final chart

Text

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

Design

  • drop down for year of birth should match parametric style
  • 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)
  • Remove space under center title (this is for @fredhohman and @mathisonian)

Editorial Questions

  • finalize subtitles (drop "Part" to match parametric style)?
  • 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)
  • 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions