[Overview] of building the stats and graphs section on the homepage

Our plan is for the stats section to open up with more details, and links to the sources so people visiting can follow our Movement on other platforms, and to add evidence to support our figures.

That area needs to be designed by the @UXers, @UI-Design and @StatsAreBeautiful Team. until that’s complete we will use a simple button linking to this thread, where the stats and sources are displayed in a less exciting way.

1 Like

Hello @scottly426, looking at this, it seems we are just doing a link this thread (Add 'More Stats' button under the 'Stats' and above the 'Projects' section)

Since I can do UI/UX designs, I will schedule a meeting with @AndyatFocallocal so I could design the UI for you to work on :slight_smile:

1 Like

Hello @Marvelxy !

That is wonderful! I had a couple tings come up today, so I won’t be able to look at the code until later. I will try to get on it as soon as possible but will still be waiting for your confirmation. Happy coding!

2 Likes

@scottly426

Updating the task based on todays meeting:

Breaking the task into 3 stages.

    1. just numbers and links pulled directly from i18n and entered manually by Andy monthly (you’ll need to read the i18n post in the documentation section for this)
    1. numbers and links pulled in live via API
    1. graphs added underneath the stats in each modal window and an overall graph underneath the stats section and above the projects section.

Dates
A small toggle included at the top of the stats section allowing users to switch between:

  • Daily ? (is it useful?)
  • Weekly (default)
  • Monthly
  • Yearly

Levels
When clicked some links will open a model window, others do not have more levels of data and will open the linked site directly.

Graphs

  1. Graphs are underneath the links (and numbers) in the modal window
  2. An overall growth graph lives under the data section and above the Projects section to give a nice visual for those who don’t enjoy numbers.
    All graphs change if the toggle on the homepage is set to a different time span.
  • I suggest seeking help from reddit data is beautiful as those guys live for graphs and presenting data well. If we tell them we’re an open source community working on community action on humanitarian causes and want to present a beautiful graph and data to show visitors to the the platform the work we’re doing, then i expect some people there will help us with designs and programs we can use.

Users should be able to toggle the stats to show weekly, monthly and yearly data. This will also edit the graphs.

Resources

1 Like

Hello everyone!

I was able to get the modal to work. Would love to hear your feedback! There were a couple of questions regarding the CSS that I had, can we get on a call to discuss this further?

Here are two pictures; first one shows the modal closed, and the second one shows it open.


I also thought this type of layout might work a little easier if it was in a tabs section. I tried implementing it, let me know what you guys think!


I didn’t really give much thought to the CSS since we are still thinking about how to retrieve live data, so there can/should be improvements there!

Thanks,

Scott

2 Likes

Well done @scottly426!

I’m not a designer but i think those buttons look excellent :slight_smile: @Marvelxy is more skilled at design.

I notice in the last picture that the modal looks to be opening in the middle of the Projects section. The correct location is above the section, and directly above the title ‘Projects’.

Alsç I’m not a fan of the green background. My suggestion would be the same white as the rest of the page, so the charts look more integrated into the design.

Very excited to see your success though and that you’re moving well in a solid direction. I had imaged the charts to look a bit more ‘advanced’, and high tech style… although i do actually really enjoy the simplicity and colourful nature of your current design.

Your graphs might be better than what i was imagining initially, what do you think Marvelous? Simple, colourful and fun graphs, or beautiful and visually inspiring? Both seem to mesh with themes of our project (as represented in the header image).

@scottly426 let me know when you have a live version ready and we’ll give it a spin on the live platform

Hello @scottly426 and @AndyatFocallocal , sorry for getting back to you this late. I’ve gone through the designs and they look great to me. It’d be best if we discuss this further on a call. Although, the tabbed design looks great, but I don’t understand it entirely. I’m sure you can explain better when we schedule a meeting :wink:

@AndyatFocallocal, what do you think about getting on a call with Scott? I will be available anytime from 27th, the usual 6PM(WAT). We can use the Google’s meet link we’ve been using (https://meet.google.com/xxg-zhab-bqp).

Let me know your thoughts. :raised_hands:

1 Like

Meanwhile @AndyatFocallocal , I will work on getting the stats from Discourse API. I will let you know how it goes.

1 Like

@AndyatFocallocal , I have a question. Even if we manage to pull the stats from Discourse API, how do we get the stats that aren’t on Discourse?

One suggestion is to get all the stats from Discourse, maybe three times a week and update them like we currently do with I18n. We get the stats, unify them into I18n. This way, we are sure we have all the stats, and also makes it easy for the “new home page” to make use of them.

However, this looks like a difficult thing to do since it involves us updating the stats manually.

What do you think, @AndyatFocallocal?

1 Like

There is a plug-in called Data Explorer which allows us to download any stats we want.

I’ve been looking into whether we can automate that and send it to a Google sheet and pull it from there, which might be a simple 2 step solution with the main advantage being that we can work with the data in the Google sheet like combining stats, turning them into percentages, etc. Not the only solution but maybe the one which gives us most control. …I think I would need some help with the code.

Let’s talk about it in our call :slightly_smiling_face:

1 Like

That’s awesome! :rocket: :rocket: . @scottly426 and @AndyatFocallocal , when do you think will be a good day and time for you?

1 Like

I’m going to have to check some dates tomorrow and get back you then :slightly_smiling_face:

I’m pretty busy tomorrow but any other day/time this week is good. @scottly426 how about you?

1 Like