Plots2: 探索如何呈现订阅统计信息

创建于 2019-01-12  ·  54评论  ·  资料来源: publiclab/plots2

目前统计页面https://publiclab.org/stats/subscriptions显示为键值对

  • [x] 通过@GettyOrawo在右侧列表中列出所有标签和订阅者数量
  • [ ] 页面交互展示
design help wanted planning

最有用的评论

@GettyOrawo在这里完成了惊人的工作! 随时寻求帮助! @cesswairimu完成后,我们将开始创建诸如班级间隔之类的小组。

所有54条评论

screenshot from 2019-01-17 13-53-32
这怎么样 ?

@dewanhimanshu感谢您的建议,但如果您查看https://publiclab.org/stats/subscriptions有一堆标签,如果我们为每一行都有一个标签,页面就会很长。 你不这么认为吗? 也许你有别的想法? 谢谢

我有一个关于如何以非单调的方式和更有效的方式显示这些统计数据的想法,但它可能与网站的 UI 方案不同。 你想看一个模型@cesswairimu吗?

伟大的! 是的@IshaGupta18。 请张贴

好的,既然我们不希望页面的长度无限增加,我就想到将统计值分组,例如: 0-5 、 5-10 、 10-15 等等(班级大小可以相应调整) :

screen1stats

单击气泡后,它将展开并向您显示具有该统计值的标签:

screen2stats

再次点击它/释放它,它会恢复它的原始形状。

这看起来如何? 我认为它可能有点创意和俏皮并减少空间。 你怎么看@cesswairimu

哇! @IshaGupta18我喜欢这个想法,它非常有创意,感谢您制作看起来很棒的模型。 我相信这些值是订阅者的数量吗?
此外,也许我们可以在弹出窗口中添加特定的标签值,例如balloon-mapping -1, mapknitter-2,可能对分析有用。 你怎么看?

非常感谢@cesswairimu ! 是的,它们是订阅者的数量,就像在 JSON 数据中一样,除了我设置了课程间隔。
是的,我认为添加balloon-mapping -1, mapknitter-2会很棒,因为它会为分析提供更多信息!

惊人的。 你有兴趣实施这个吗?

是的,我很想实现这个! 另外,我会建议另一个类似的模型,可能只进行一些小的改动来改进设计!

很棒的@IshaGupta18。 谢谢

@jywarren我想让你在我开始实施之前先看看我的设计,以防万一我可以在这里实施更多的东西?

这很酷! 太有创意了!

只是一些可能会影响设计的想法:

  1. 如果这将使用 JavaScript 实现,例如 p5js - https://p5js.org/ (可以从
  2. 这意味着我们可以将其开发为独立的 JS 可视化并保留 JSON 的原始显示,例如/stats/subscription.json/stats/subscription/?format=json
  3. 也许我们应该按降序显示,以便最流行的标签位于顶部?
  4. 我确实认为在整体视图中显示一些标记名会很棒,因此可以通过某种方式“浏览”数据。 有任何想法吗? 也许这意味着布局略有不同?
  5. 在较低的流行括号中,如 0-5,我们可能有大量的标签。 如果圈子里的人太多,我们该怎么办?

我喜欢圆圈的想法。 如果我们在圆圈旁边显示标签,并且在页面上有一行从大到小的递减圆圈会怎样? 还是另一种布局想法? 开放的想法!

非常感谢@jywarren ! 我认为所有的想法都非常好。 甚至我也提到了第 5 点中的问题。为了解决它,我正在考虑与该间隔中的标签数量成比例地放大气泡。

但是,我认为这样可以更好地解决问题:
我们可以在圆圈旁边显示一些标签(按照它们的大小降序排列,沿着页面向下),说 3 个,然后点击气泡,它会显示所有标签。 这样,我们可以浏览页面并保持信息完整。

这听起来如何?

太好了,在实施之前我们要再做一个模型吗? 你有什么想法吗
你想如何实现这个,比如,我们可以使用 CSS 做圆圈
边界半径,或者我们可以使用 p5js 吗? 我确实认为从
使用类似的 JSON 地址
$.json('/stats/subscriptions.json').onComplete(function(response) { ... });
会很好。 它需要对统计控制器进行一些小的更改。

2019 年 2 月 8 日星期五下午 12:54,Isha Gupta [email protected]写道:

非常感谢@jywarren https://github.com/jywarren ! 我认为所有的
想法真的很好。 甚至我也提到了第 5 点中的问题。
为了解决这个问题,我正在考虑按比例放大气泡
该间隔内的标签数。

但是,我认为这样可以更好地解决问题:
我们可以在圆圈旁边显示一些标签(将按降序排列)
按它们的大小顺序,从页面向下),说其中的 3 个,然后继续
单击气泡,它将显示所有标签。 这样,我们可以略读
通过页面并保持信息完整。

这听起来如何?


你收到这个是因为你被提到了。
直接回复本邮件,在GitHub上查看
https://github.com/publiclab/plots2/issues/4603#issuecomment-461888974
或静音线程
https://github.com/notifications/unsubscribe-auth/AABfJ15nyiYVcP-FiwUF4vfBccV5SQQfks5vLbmogaJpZM4Z8bqv
.

当然,我认为我们可以做另一个模型! 我并没有真正考虑实现部分,我正在考虑使用 CSS 和普通 JS,但是如果您认为 p5js 会做得很好,我们可以使用它! 我觉得我们可以保留原来的JSON地址,用JS来渲染这个页面。

如果我们可以使用基本的 JS 和 CSS,让我们尝试 - 比包含一个整体更好
新图书馆。 但是如果你有兴趣尝试 p5js,我们可以这样做
那里也有东西......!

2019 年 2 月 8 日星期五下午 1:18,Isha Gupta [email protected]写道:

当然,我认为我们可以做另一个模型! 我真的没想过
实现部分,我想用CSS和普通的JS,但是如果
你认为 p5js 会做得很好,我们可以这样做! 我认为我们可以保留
原始 JSON 地址并使用 JS 呈现此页面。


你收到这个是因为你被提到了。
直接回复本邮件,在GitHub上查看
https://github.com/publiclab/plots2/issues/4603#issuecomment-461895999
或静音线程
https://github.com/notifications/unsubscribe-auth/AABfJ1K0MU_eBZJN35QyqnxC7EsI4kaBks5vLb8-gaJpZM4Z8bqv
.

是的,我认为我们可以探索两者,看看哪个更适合展示和网站! 一旦我完成了中期考试,我就会开始以更快的速度进行这项工作! 非常感谢!

祝你考试顺利!!

2019 年 2 月 8 日星期五下午 1:32,Isha Gupta [email protected]写道:

是的,我认为我们可以探索两者,看看哪个更适合
显示以及网站! 我会以更好的速度开始工作
一旦我完成了中期考试! 非常感谢!


你收到这个是因为你被提到了。
直接回复本邮件,在GitHub上查看
https://github.com/publiclab/plots2/issues/4603#issuecomment-461900313
或静音线程
https://github.com/notifications/unsubscribe-auth/AABfJ-_qLbiGiTWACqsQ6EFlf3DD2OCyks5vLcKWgaJpZM4Z8bqv
.

这是更新的设计:

image

单击气泡时(我们可以根据标签数量按比例扩展它们)

onclick

让我知道这看起来如何!

你好@IshaGupta18 ,这是怎么回事? 有什么我可以帮忙的吗? 谢谢

嘿, @cesswairimu实际上我并没有刻意开始这项工作,因为我在等待@jywarren批准最终设计。 现在,我在大学里有一些重要的考试,所以一旦这个想法被完全批准并且这些考试结束,我就会开始我的工作。 我很抱歉这次延迟,我不是故意的。

不用担心@IshaGupta18顺利。 谢谢

这个超级好看! 我认为我们可以分块实施。 我们可以从静态设计开始,只在右侧列表中列出所有标签和订阅者数量,然后再处理交互部分! 听起来怎么样,把它分成更小的部分一个一个地做?

希望你的考试顺利 Isha!

是啊,那样最好了! 我们可以从小的 PR 开始,然后从
你建议的! 非常感谢!

2019 年 3 月 6 日,星期三,凌晨 3:24 Jeffrey Warren通知@ github.com
写道:

这个超级好看! 我认为我们可以分块实施。 我们可以
从静态设计开始,只列出所有标签和数量
右侧列表中的订阅者,然后在交互式工作
部分! 听起来怎么样,把它分成更小的部分来做一个
一?

希望你的考试顺利 Isha!


你收到这个是因为你被提到了。
直接回复本邮件,在GitHub上查看
https://github.com/publiclab/plots2/issues/4603#issuecomment-469873165
或静音线程
https://github.com/notifications/unsubscribe-auth/Am54Z8i6cuukmNb_5zNrAfwJXj4Jskesks5vTueogaJpZM4Z8bqv
.

@gettyorawo你有兴趣做这个吗? 你可以在/stats/subscriptions上为static design just listing all tags and the number of subscribers in the right-hand list做一个 PR

@cesswairimu我很抱歉我在这件事上不活动。 @GettyOrawo如果他们感兴趣,可以从一个小的 PR 开始,然后我可以接手互动部分吗? 这样我们可以更有效地工作。 无论如何,我都在这里提供帮助! 非常感谢!

@cesswairimu@IshaGupta18确定我会接受这个

@GettyOrawo如果您需要任何帮助,请告诉我! 您实际上可以将其划分为更小的 PR,例如编写用于将标签放入每个间隔的逻辑,然后编写另一个用于显示它的 PR。 这样,我们会更容易审查。 你怎么认为?

不用担心@IshaGupta18是的,我们会将交互式部分留给您,为此我们会创建一个清单。 谢谢

非常感谢@IshaGupta18我会在

并且在设计上做得很好。 他们真棒!

@IshaGupta18@cesswairimu只是为了让您了解循环 我仍在研究 2D 物理引擎并学习一些我需要设置的基础知识。 我希望我走在正确的轨道上,还是应该首先在单独的 PR 上对数据进行分组?

@GettyOrawo我相信你不需要这样做。 您可能要做的是删除此行https://github.com/publiclab/plots2/blob/master/app/controllers/stats_controller.rb#L8以便您可以定义数据的显示方式。 该模板已在此处创建https://github.com/publiclab/plots2/blob/master/app/views/stats/subscriptions.html.erb。 @tags是一对键为tag name和值subscriptions count的散列。 首先,我们想在一个简单的列表中显示它,可能类似于https://publiclab.org/tags但现在是该列表的前两项。 谢谢

好吧,这是完全有道理的。 谢谢@cesswairimu

很抱歉错过了这一点。 是的,我相信这是必须要做的。
尝试在开始时保持超级简单,只需几个标签名称
页面的一侧! 非常感谢!

在周五,2019年3月15日,6:50 PM GettyOrawo [email protected]写道:

好吧,这是完全有道理的。 谢谢@cesswairimu
https://github.com/cesswairimu


你收到这个是因为你被提到了。
直接回复本邮件,在GitHub上查看
https://github.com/publiclab/plots2/issues/4603#issuecomment-473283169
或静音线程
https://github.com/notifications/unsubscribe-auth/Am54ZyexnFJY3eTE9mj-9ZxHxlpPeD67ks5vW540gaJpZM4Z8bqv
.

@GettyOrawo ! 这个工作进展如何,只需检查一下,看看您是否需要任何帮助!

@IshaGupta18我刚刚提出了一个起始公关。 我能够在一个简单的表格中对统计数据进行分组。 我只是将值硬编码到 stats_controller 上的空@tags哈希中,订阅操作只是为了能够在开发中测试原因,没有订阅。
接下来,我需要为相同的测试编写测试,以确保它适用于所有测试。

subscription-stats

抱歉@GettyOrawo我没有给你足够的指导,因为这是你的第一个问题。 在这里发布一些提示。 刚刚看到你的拉取请求..所以@tags在 stats 控制器中作为哈希值,所以不需要这样做。 <strong i="7">@tags</strong> = @tags.group_by{|k,v| v}.map{|k,v| {k => v.map{|x| x.join("-")}}}我们在这里可以做的就是删除这一行https://github.com/publiclab/plots2/blob/master/app/controllers/stats_controller.rb#L8。
然后在视图中有这个很棒的表格类,您可以使用table inline-grid来设置表格的样式。 所以视图可以有这个代码

<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>

那我想我们应该很好

至于测试,我们已经为一些标签播种了数据,例如一切、博客、测试……您可以让用户订阅其中的一些标签,您应该会在/stats/subscriptions上看到一些数据。 用户名是管理员、版主和用户。 所有密码都是password
如果这还不足以进行测试,您可以通过运行此命令git push -f https://github.com/publiclab/plots2.git HEAD:unstable将您的分支推至不稳定状态,请务必提及您正在 gitter 频道上推至不稳定状态,以免干扰其他人的测试。 大约 20 分钟后,代码应该在http://unstable.publiclab.org/上可用。
如果您有任何问题,请随时在下面发表评论
谢谢

哦,是的,完全有道理。
此代码将显示名称及其订阅号。

<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>

喜欢:


















标签订户数量
摄像头23
魁省144
引领23

虽然对于控制器上非常丑陋的代码:
<strong i="42">@tags</strong> = @tags.group_by{|k,v| v}.map{|k,v| {k => v.map{|x| x.join("-")}}}

我试图将统计数据分组到它们的常见订阅号中,例如 1 的统计数据将是 ["amanda-1", "grace-1"] 43 的统计数据将是 ["cess-43", "isha-43" ] 以便所有具有共同订阅号的统计信息都在一起。 不过,它需要大量重构:这是我想输出它们的方式;

订户数量标签
1
  • 阿曼达-1
  • 恩典-1
43
  • cess-43
  • isha-43
2
  • led-2

最初@tags是一个散列,键作为标签,值作为该标签的订阅数。
我的问题:我是否需要将此代码嵌入到我的视图中,还是应该在控制器操作中让我能够以这种方式对它们进行排序?

啊哈厉害! 我看到你的显示器看起来好多了 :balloon: 。 我们可以稍后重构。 谢谢

@GettyOrawo在这里完成了惊人的工作! 随时寻求帮助! @cesswairimu完成后,我们将开始创建诸如班级间隔之类的小组。

好的,谢谢大家,我会更新进度。

@ cesswairimu@IshaGupta18@jywarren我已经在下面的拉取请求中提交了我所在的位置,因为我担心我可能会永远接受它:

https://github.com/publiclab/plots2/pull/5224

我发现学习如何按照指定的模型显示统计数据有点费时。 我已经阅读了关于 p2.js 和 matter.js 的文章和教程。 这实际上是可行的,但比我想象的要花费更多的时间。 是否可以将其合并,然后将来我可以更好地制作显示器。

由于我正在努力满足 Outreachy 的申请截止日期,这有点让人不知所措,但这是我的第一个问题。 大家对此有何感想?

这是我到目前为止:

publiclab-subscription-stats

@GettyOrawo它看起来很棒,是的,我们可以在以后改进...如果你能解决代码气候问题,我们应该会很好。 非常感谢您在这方面的工作。

是的,绝对是,这是一项了不起的工作! 不要太担心这个
现在,专注于您的应用程序,这真的足够了! 非常感谢!

在星期四,2019年3月21日,9:05 PM附加税[email protected]写道:

@GettyOrawo https://github.com/GettyOrawo它看起来很棒而且
是的,我们以后可以改进……如果你能修复代码气候
问题我们应该好好的。 非常感谢您在这方面的工作。


你收到这个是因为你被提到了。
直接回复本邮件,在GitHub上查看
https://github.com/publiclab/plots2/issues/4603#issuecomment-475279958
或静音线程
https://github.com/notifications/unsubscribe-auth/Am54Zw8RlXPdFHli6JdffNyk2CjxyeWNks5vY6aygaJpZM4Z8bqv
.

太棒了 非常感谢。 让我来解决这个问题。

好的,现在所有测试都通过了。 :slightly_smiling_face:

@cesswairimu@IshaGupta18我可以解决另一个问题吗? 或者我应该寻找一个错误来修复并创建一个问题?

这是史诗般的第一个公关! 哇!!! 恭喜,是的,我们始终支持做一个初始的简单项目并在后续 PR 中构建复杂性! 哇让我现在回顾一下。 谢谢!!!! 和所有出色的工作!

谢谢@jywarren ! :微笑:

@jywarren @cesswairimu在这个中还有工作要做来制作交互式气泡。 我会尽快跟进。 我们也可以继续后续问题的工作,但我认为我们应该将这个问题保持一段时间。 你们有什么感想? 非常感谢@GettyOrawo 的出色工作!

是的,太好了! 谢谢@IshaGupta18!!!

在星期一,2019年3月25日在3:55 PM宵古普塔[email protected]写道:

@jywarren https://github.com/jywarren @cesswairimu
https://github.com/cesswairimu这个还有工作要做
制作互动泡泡。 我会尽快跟进。 我们可以
继续后续问题的工作,但我们应该保留这个
我想一会打开一会。 你们有什么感想? 非常感谢和
伟大的工作@GettyOrawo https://github.com/GettyOrawo


你收到这个是因为你被提到了。
直接回复本邮件,在GitHub上查看
https://github.com/publiclab/plots2/issues/4603#issuecomment-476352685
或静音线程
https://github.com/notifications/unsubscribe-auth/AABfJ9Vf5E1FxwrysJH1AKDsjnUgsGBcks5vaSmOgaJpZM4Z8bqv
.

结束这个......我们有一个更好的展示和同样的讨论在这里进行https://github.com/publiclab/plots2/issues/5260。 谢谢大家

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

SidharthBansal picture SidharthBansal  ·  142评论

cesswairimu picture cesswairimu  ·  119评论

jywarren picture jywarren  ·  81评论

grvsachdeva picture grvsachdeva  ·  196评论

jywarren picture jywarren  ·  98评论