Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Explore how to present subscription stats #4603

Closed
1 of 2 tasks
cesswairimu opened this issue Jan 12, 2019 · 54 comments
Closed
1 of 2 tasks

Explore how to present subscription stats #4603

cesswairimu opened this issue Jan 12, 2019 · 54 comments
Assignees
@IshaGupta18
Labels
design issue requires more design work and discussion (i.e. mockups and sketches) help wanted requires help by anyone willing to contribute planning Planning issues!
Milestone
Metrics

Comments

@cesswairimu
Copy link
Collaborator

cesswairimu commented Jan 12, 2019 •
edited

Currently the stats page https://publiclab.org/stats/subscriptions is being displayed as key-value pairs

  • Listing all tags and the number of subscribers in the right-hand list by @GettyOrawo
  • Interactive display of the page
@cesswairimu cesswairimu added help wanted requires help by anyone willing to contribute design issue requires more design work and discussion (i.e. mockups and sketches) labels Jan 12, 2019
@cesswairimu cesswairimu mentioned this issue Jan 12, 2019
Closed
2 tasks
@dewanhimanshu
Copy link
Collaborator

screenshot from 2019-01-17 13-53-32
How is this ?

@cesswairimu
Copy link
Collaborator Author

@dewanhimanshu thanks for your suggestion but if you look at https://publiclab.org/stats/subscriptions there are a bunch of tags and if we have a tag for each line the page will be so long. Don't you think so? Maybe you have another idea? Thanks

@IshaGupta18
Copy link
Collaborator

I have an idea on how to display these stats in a non-monotonous way and a bit more efficiently, but it may be different from the UI scheme of the site. Would you like to see a mockup @cesswairimu ?

@cesswairimu
Copy link
Collaborator Author

cesswairimu commented Feb 2, 2019 •
edited

Great! yeah @IshaGupta18. Please post it

@IshaGupta18
Copy link
Collaborator

Okay, so since we don't want the length of the page to increase indefinitely, I thought of making groups of statistical values like: 0-5 , 5-10, 10-15 and so on (class size can be adjusted accordingly):

screen1stats

On clicking on a bubble, it will expand and show you the tags which have that statistical value:

screen2stats

On clicking on it again/ releasing it, it will restore it's original shape.

How does this look? I thought it might be a bit creative and playful and reduce the space. What do you think @cesswairimu ?

@cesswairimu
Copy link
Collaborator Author

cesswairimu commented Feb 3, 2019 •
edited

Wow! @IshaGupta18 I love this idea its super creative and thanks for working on the mockups they look great. I believe the values are number of subscribers right?
Also maybe we can add specific tag values on pop-up something like balloon-mapping -1, mapknitter-2, might be useful for analysis purposes. What do u think?

@IshaGupta18
Copy link
Collaborator

Thanks a lot @cesswairimu ! Yes they are the number of subscribers, like in the JSON data, except I have made class intervals.
Yes I think adding balloon-mapping -1, mapknitter-2 would be great as it will be more informative for analysis!

@cesswairimu
Copy link
Collaborator Author

cesswairimu commented Feb 3, 2019 •
edited

Awesome. would you be interested on implementing this?

@IshaGupta18
Copy link
Collaborator

Yes I would love to implement this! Also, I would suggest another similar mockup, probably with just some small changes that may improve the design!

@cesswairimu
Copy link
Collaborator Author

Great @IshaGupta18. Thanks

@IshaGupta18
Copy link
Collaborator

@jywarren I wanted you to just have a look at my design before I start implementing it, if in case there's something more I can implement here?

@jywarren
Copy link
Member

jywarren commented Feb 8, 2019

This is very cool! So creative!

Just a few thoughts that might influence the design a bit:

  1. if this will be implemented using JavaScript, like for example p5js - https://p5js.org/ (could start with a demo at https://editor.p5js.org/), we could point it right at the JSON to use as a source
  2. that would mean we could develop it as a stand-alone JS visualization and preserve the original display of JSON at, say, /stats/subscription.json or /stats/subscription/?format=json
  3. maybe we should show by descending order so the most popular tags to follow are at the top?
  4. I do think that displaying some of the tagnames in the overall view would be great so there can be some way to "skim" the data. Any ideas? Maybe this means a slightly different layout?
  5. in lower popularity brackets, like 0-5, we might have a TON of tags. If there are too many to fit in the circle, what do we do?

I love the circle idea. What if we showed the tags next to the circles, and had a line of descending circles from large to small going down the page? Or another layout idea? Open to ideas!

@IshaGupta18
Copy link
Collaborator

Thanks a lot @jywarren ! I think all the ideas are really good. Even I was about the mention the problem in point 5. To solve it, I was thinking of enlarging the bubble proportional to the number of tags in that interval.

However, I think this would solve the problem better:
We could show a few tags next to the circles (which will be in descending order of their size, going down the page), say 3 of them and then on clicking on the bubble,it would show all the tags. This way, we could skim through the page and keep the information intact.

How does this sound?

@jywarren
Copy link
Member

jywarren commented Feb 8, 2019 via email

@IshaGupta18
Copy link
Collaborator

Sure, we could do another mockup I think! I hadn't really thought about the implementation part, I was thinking of using CSS and normal JS, but if you think p5js would do good, we can go with that! I think we can retain the original JSON address and use JS to render this page.

@IshaGupta18 IshaGupta18 added the planning Planning issues! label Feb 8, 2019
@jywarren
Copy link
Member

jywarren commented Feb 8, 2019 via email

@IshaGupta18
Copy link
Collaborator

Yes I think we could explore both and see which one is better for the display as well as the site! I would start working on this at a better pace once I get over with my mid semester exams! Thanks a lot!

@jywarren
Copy link
Member

jywarren commented Feb 8, 2019 via email

@IshaGupta18
Copy link
Collaborator

Here's the updated design:

image

On clicking on the bubble (We could expand them proportional to the number of tags)

onclick

Let me know how this looks!

@cesswairimu
Copy link
Collaborator Author

Hello @IshaGupta18, how is this coming along? Anything I can help with? Thanks

@IshaGupta18
Copy link
Collaborator

Hey, @cesswairimu actually I didn't start with the work deliberately because I was waiting for @jywarren to approve the final design. Right now, I am having some important exams going on in college, so as soon as this idea is approved fully and those exams are finished, I'll start my work on this. I am so sorry for this delay, I didn't intend it.

@cesswairimu
Copy link
Collaborator Author

No worries @IshaGupta18, all the best in your exams. Thanks

@jywarren
Copy link
Member

jywarren commented Mar 5, 2019

This is super nice! I think we can implement this in pieces. We could start with a static design just listing all tags and the number of subscribers in the right-hand list, and later work on the interactive parts! How does that sound, to break it into smaller pieces to do one by one?

Hope your exams are going well Isha!

@IshaGupta18
Copy link
Collaborator

IshaGupta18 commented Mar 7, 2019 via email

@cesswairimu
Copy link
Collaborator Author

Hey @GettyOrawo I believe you do not need to do that. What you would probably do is remove this line https://github.com/publiclab/plots2/blob/master/app/controllers/stats_controller.rb#L8 so that you can define how data would be displayed. The template is already created here https://github.com/publiclab/plots2/blob/master/app/views/stats/subscriptions.html.erb. @tags is a hash of pairs key being tag name and value subscriptions count. For a start we want to display this in a simple list maybe something similar to https://publiclab.org/tags but now with the first two items of that list. Thanks

@GettyOrawo
Copy link
Contributor

Alright this makes perfect sense . Thank you @cesswairimu

@IshaGupta18
Copy link
Collaborator

IshaGupta18 commented Mar 15, 2019 via email

@IshaGupta18
Copy link
Collaborator

Hey @GettyOrawo ! How's the work going on in this one, just checking in to see if you need any help!

@GettyOrawo GettyOrawo mentioned this issue Mar 18, 2019
Closed
5 tasks
@GettyOrawo
Copy link
Contributor

Hey @IshaGupta18 I just put up a starting PR. I was able to group the stats in a simple table. I just hard-coded values into the empty @tags hash on the stats_controller, subscription action just so I'd be able to test cause in development, there are no subscriptions.
Next I need to write tests for the same just to make sure it'll work for all of them.

subscription-stats

@cesswairimu
Copy link
Collaborator Author

cesswairimu commented Mar 19, 2019 •
edited

Sorry @GettyOrawo I didn't give you enough direction given this is your first issue. Posting a few pointers here. Just saw your pull request..so @tags in the stats controller comes as hash so no need to do this .@tags = @tags.group_by{|k,v| v}.map{|k,v| {k => v.map{|x| x.join("-")}}} What we could do here is just remove this line https://github.com/publiclab/plots2/blob/master/app/controllers/stats_controller.rb#L8.
Then on view there is this awesome table class that you can use table inline-grid to style the table. So the view could have this code

<br>
    <table class="table inline-grid">
        <tr>
            <th> Tag </th>
            <th> Number of Subscribers </th>
        </tr>
        <% @tags.each do |tag, tag_count| %>
            <tr>
                <td> <%= tag %> </td>
                <td> <%= tag_count %></td>
            </tr>
        <% end %>
    </table>

Then I guess we should be good

@cesswairimu
Copy link
Collaborator Author

cesswairimu commented Mar 19, 2019 •
edited

As for testing we have seeded data for some tags e.g everything, blog, test...you could have a user subscribe to some of these tag and you should see some data on /stats/subscriptions. Usernames are admin, moderator and user. all passwords are password.
If that is not enough for testing you can push your branch to unstable by running this command git push -f https://github.com/publiclab/plots2.git HEAD:unstable just be sure to mention you are pushing to unstable on the gitter channel so as not to interfere with other people testing. The code should be available here http://unstable.publiclab.org/ after about 20 minutes.
Feel free to comment below incase you have any questions
Thanks

@GettyOrawo
Copy link
Contributor

GettyOrawo commented Mar 19, 2019 •
edited

Oh yes, makes perfect sense.
This code will display names with their subscription numbers.

<br>
    <table class="table inline-grid">
        <tr>
            <th> Tag </th>
            <th> Number of Subscribers </th>
        </tr>
        <% @tags.each do |tag, tag_count| %>
            <tr>
                <td> <%= tag %> </td>
                <td> <%= tag_count %></td>
            </tr>
        <% end %>
    </table>

like:

Tag Number of Subscribers
ircam 23
quabec 144
led 23

Although for the very ugly code on the controller:
@tags = @tags.group_by{|k,v| v}.map{|k,v| {k => v.map{|x| x.join("-")}}}

I was trying to group the stats into their common subscription numbers, for instance stats with 1 will be ["amanda-1", "grace-1"] stats with 43 will be ["cess-43", "isha-43"] so that all stats with common subscription numbers are together. It needs a lot of refactoring though: Here's how I was thinking of outputing them;

Number of Subscribers Tags
1
  • amanda-1
  • grace-1
43
  • cess-43
  • isha-43
2
  • led-2

Initially @tags is a hash with keys as tags and values as number of subscriptions of that tag.
My question: do I need this code embedded in my view or should it be in the controller action for me to be able to sort them in this way?

@cesswairimu
Copy link
Collaborator Author

Aha awesome! I see your display looks so much better 🎈 . We can refactor later. Thanks

@IshaGupta18
Copy link
Collaborator

Amazing work done here @GettyOrawo ! Feel free to ask for help! @cesswairimu once this is done, we'll start making groups like class intervals.

@GettyOrawo
Copy link
Contributor

GettyOrawo commented Mar 19, 2019 •
edited

Alright thank you guys, I'll update on progress.

@GettyOrawo GettyOrawo mentioned this issue Mar 21, 2019
Merged
5 tasks
@GettyOrawo
Copy link
Contributor

Hey @cesswairimu, @IshaGupta18 and @jywarren I have submitted where I'm at with this issue on the Pull Request below since I'm worried that I may be taking forever on it:

#5224

I'm finding it a little time consuming to learn how to display the stats as the mockup specified. I've been over articles and tutorials on p2.js and matter.js. It's actually doable, but it'll take a lot more time than I assumed. Is it possible to merge this in and then in future I can craft the display better.

It's a liitle overwhelming since I'm struggling to meet the Outreachy application deadline yet this is my first issue. What do you guys feel about this?

This is what I have so far:

publiclab-subscription-stats

@cesswairimu
Copy link
Collaborator Author

Hey @GettyOrawo its looking great and yeah sure we can refine later...If you could just fix the codeclimate issues we should be good. Thanks so much for working on this.

@IshaGupta18
Copy link
Collaborator

IshaGupta18 commented Mar 21, 2019 via email

@GettyOrawo
Copy link
Contributor

Awesome Thank you so much. Let me get to fixing that.

@GettyOrawo
Copy link
Contributor

Alright all tests pass okay now. 🙂

@GettyOrawo
Copy link
Contributor

@cesswairimu and @IshaGupta18 can I get another issue to work on? Or should I look for a bug to fix and create an issue?

@jywarren
Copy link
Member

This is an EPIC first PR! Wow!!! Congratulations, and yes, we're always in support of doing an initial simple project and building complexity in follow-up PRs! Wow let me review now. Thank you!!!! and fantastic work to all!

@GettyOrawo
Copy link
Contributor

Thank you @jywarren ! 😄

@IshaGupta18 IshaGupta18 reopened this Mar 25, 2019
@IshaGupta18
Copy link
Collaborator

Hey @jywarren @cesswairimu there's still work left in this one to make the interactive bubbles. I would be following up with it soon. We can continue the work in the follow-up issue as well, but we should keep this one open for some while I think. What do you guys think? Thanks a lot and great work @GettyOrawo !

@IshaGupta18 IshaGupta18 mentioned this issue Mar 25, 2019
Open
3 tasks
@jywarren
Copy link
Member

jywarren commented Mar 25, 2019 via email

@cesswairimu
Copy link
Collaborator Author

Closing this...we are at a better display and also same discussion going on here #5260. Thanks all

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@IshaGupta18 IshaGupta18

Labels
design issue requires more design work and discussion (i.e. mockups and sketches) help wanted requires help by anyone willing to contribute planning Planning issues!
Projects
None yet
Milestone
Metrics
Development

No branches or pull requests
6 participants
@jywarren @ebarry @GettyOrawo @cesswairimu @dewanhimanshu @IshaGupta18