Feature #16923

Add income diversity chart to donation page

Added by sajolida 2019-07-30 10:44:01 . Updated 2019-10-03 00:35:02 .

Status:
Resolved
Priority:
Normal
Assignee:
Category:
Fundraising
Target version:
Start date:
Due date:
% Done:

0%

Feature Branch:
web/16923-svg-income-chart
Type of work:
Website
Blueprint:

Starter:
Affected tool:
Deliverable for:

Description

Until now we’ve only put in on blog posts but it would fit on the donation page as well.


Subtasks


History

#1 Updated by sajolida 2019-07-30 10:51:47

  • Target version set to Tails_3.16

#2 Updated by sajolida 2019-08-17 16:36:08

  • Assignee set to sajolida

#3 Updated by sajolida 2019-09-03 09:35:33

  • Target version changed from Tails_3.16 to Tails_3.17

#4 Updated by intrigeri 2019-09-12 14:25:25

  • Target version changed from Tails_3.17 to Tails_4.0

#5 Updated by sajolida 2019-09-20 21:22:13

  • Status changed from Confirmed to Needs Validation
  • Assignee deleted (sajolida)
  • Feature Branch set to web/16923-svg-income-chart

#6 Updated by sajolida 2019-09-28 19:05:03

  • Assignee deleted (None)

#7 Updated by Anonymous 2019-10-01 15:17:46

  • Status changed from Needs Validation to In Progress
  • Assignee set to sajolida

Looks good!

One important remark:

- There is a typo: “like Mozilla or the Handsha+r+e Foundation”.

Less important remarks:

- For the HTML/CSS part of this work there are some suggestions, if you feel like implementing them, go ahead, otherwise feel free to discard as they are not necessary modifications:

- you target “figure”, I would suggest to use a class on the figures, in case we add other things that are figures in the future and that would use another layout.

- I think that adding empty divs is not such a good practice. I personally often do something like this:

key-label:before {
    content: " ";
    background: violet;
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 0.5em;
    margin-left: -27px;
}

→ This creates a square on the fly and simplifies the markup.

Then I have a bit of an issue with the colors for help desk, UX, sysadmin and administration/management. I find them a bit dark, 70ies. But this is only a subtle esthetics issue, don’t lose time on it!

So this is mergeable whenever the typo gets fixed :)

#8 Updated by sajolida 2019-10-03 00:29:40

> - There is a typo: “like Mozilla or the Handsha+r+e Foundation”.

Despite my spellchecking highlighting it. Fixed in 34b66fa05d.

> - For the HTML/CSS part of this work there are some suggestions, if you feel like implementing them, go ahead, otherwise feel free to discard as they are not necessary modifications:

I like your CSS pro tips!

> - you target “figure”, I would suggest to use a class on the figures, in case we add other things that are figures in the future and that would use another layout.

Done in 835e6ab1bd.

> → This creates a square on the fly and simplifies the markup.

Done in 9f6985fbca.

> Then I have a bit of an issue with the colors for help desk, UX, sysadmin and administration/management. I find them a bit dark, 70ies. But this is only a subtle esthetics issue, don’t lose time on it!

Yeah… Me too. I really wanted to avoid going into the rabbit hole of
picking the colors myself one by one so I looked online for a
recommended palette.

I read
https://datahero.com/blog/2013/08/08/why-color-matters-in-data-visualisation/
and then went for the one on
https://www.mulinblog.com/a-color-palette-optimized-for-data-visualization/.

#9 Updated by sajolida 2019-10-03 00:35:03

  • Status changed from In Progress to Resolved
  • Assignee deleted (sajolida)

Merged!