Plots2: Explore como apresentar estatísticas de assinatura

Criado em 12 jan. 2019  ·  54Comentários  ·  Fonte: publiclab/plots2

Atualmente, a página de estatísticas https://publiclab.org/stats/subscriptions está sendo exibida como pares de valores-chave

  • [x] Listando todas as tags e o número de assinantes na lista à direita por @GettyOrawo
  • [] Exibição interativa da página
design help wanted planning

Comentários muito úteis

Trabalho incrível feito aqui @GettyOrawo ! Sinta-se à vontade para pedir ajuda! @cesswairimu uma vez feito isso, vamos começar a fazer grupos como intervalos de aula.

Todos 54 comentários

screenshot from 2019-01-17 13-53-32
Como é isso?

@dewanhimanshu obrigado pela sua sugestão, mas se você olhar em https://publiclab.org/stats/subscriptions há um monte de tags e se tivermos uma tag para cada linha a página será muito longa. Você não acha? Talvez você tenha outra ideia? Obrigado

Tenho uma ideia de como exibir essas estatísticas de uma forma não monótona e um pouco mais eficiente, mas pode ser diferente do esquema de interface do usuário do site. Você gostaria de ver um mockup @cesswairimu ?

Excelente! sim @ IshaGupta18. Por favor poste

Ok, então como não queremos que o comprimento da página aumente indefinidamente, pensei em fazer grupos de valores estatísticos como: 0-5, 5-10, 10-15 e assim por diante (o tamanho da classe pode ser ajustado de acordo) :

screen1stats

Ao clicar em uma bolha, ela se expandirá e mostrará as tags que possuem esse valor estatístico:

screen2stats

Ao clicar sobre ele novamente / liberá-lo, ele irá restaurar sua forma original.

Como está isso? Achei que poderia ser um pouco criativo e lúdico e reduzir o espaço. O que você acha @cesswairimu ?

Uau! @ IshaGupta18 Eu amo essa ideia, é super criativa e obrigado por trabalhar nas maquetes, elas ficam ótimas. Eu acredito que os valores são número de assinantes certo?
Além disso, talvez possamos adicionar valores de tag específicos no pop-up, algo como balloon-mapping -1, mapknitter-2, pode ser útil para fins de análise. O que você pensa?

Muito obrigado @cesswairimu ! Sim, eles são o número de assinantes, como nos dados JSON, exceto que fiz intervalos de aula.
Sim, acho que adicionar balloon-mapping -1, mapknitter-2 seria ótimo, pois seria mais informativo para análise!

Incrível. você estaria interessado em implementar isso?

Sim, eu adoraria implementar isso! Além disso, gostaria de sugerir outro mockup semelhante, provavelmente com apenas algumas pequenas alterações que podem melhorar o design!

Ótimo @ IshaGupta18. Obrigado

@jywarren Eu queria que você

Isso é muito legal! Tão creativo!

Apenas alguns pensamentos que podem influenciar um pouco o design:

  1. se isso for implementado usando JavaScript, como por exemplo p5js - https://p5js.org/ (pode começar com uma demonstração em https://editor.p5js.org/), podemos apontar diretamente para o JSON para usar como uma fonte
  2. isso significaria que poderíamos desenvolvê-lo como uma visualização JS autônoma e preservar a exibição original do JSON em, digamos, /stats/subscription.json ou /stats/subscription/?format=json
  3. talvez devêssemos mostrar em ordem decrescente para que as tags mais populares a seguir fiquem no topo?
  4. Eu realmente acho que exibir alguns dos tagnames na visão geral seria ótimo, então pode haver alguma maneira de "deslizar" os dados. Alguma ideia? Talvez isso signifique um layout ligeiramente diferente?
  5. em colchetes de popularidade inferiores, como 0-5, podemos ter uma tonelada de tags. Se houver muitos para caber no círculo, o que fazemos?

Eu amo a ideia do círculo. E se mostrássemos as marcas ao lado dos círculos e tivéssemos uma linha de círculos decrescentes do grande para o pequeno descendo na página? Ou outra ideia de layout? Aberto a ideias!

Muito obrigado @jywarren ! Acho que todas as ideias são realmente boas. Até eu estava a ponto de citar o problema no ponto 5. Para resolvê-lo, estava pensando em aumentar a bolha proporcionalmente ao número de tags naquele intervalo.

No entanto, acho que isso resolveria melhor o problema:
Poderíamos mostrar algumas tags ao lado dos círculos (que estarão em ordem decrescente de seu tamanho, descendo a página), digamos 3 delas e, ao clicar no balão, mostraria todas as tags. Dessa forma, poderíamos folhear a página e manter as informações intactas.

Como isso soa?

ótimo, faremos outra maquete antes de implementar? você teve uma ideia?
de como você gostaria de implementar isso, como, poderíamos fazer círculos usando CSS
border-radius, ou poderíamos usar p5js talvez? Eu acho que carregar de
o endereço JSON usando algo como
$ .json ('/ stats / subscriptions.json'). onComplete (function (response) {...});
seria bom. Isso exigiria algumas pequenas mudanças no controlador de estatísticas.

Na sexta-feira, 8 de fevereiro de 2019 às 12h54, Isha Gupta [email protected] escreveu:

Muito obrigado @jywarren https://github.com/jywarren ! Eu acho que todo o
ideias são realmente boas. Até eu estava prestes a mencionar o problema no ponto 5.
Para resolver isso, eu estava pensando em aumentar a bolha proporcional ao
número de tags nesse intervalo.

No entanto, acho que isso resolveria melhor o problema:
Poderíamos mostrar algumas marcas ao lado dos círculos (que estarão em ordem decrescente
ordem de seu tamanho, descendo a página), digamos 3 deles e depois
clicando na bolha, ele mostraria todas as tags. Dessa forma, poderíamos deslizar
através da página e manter as informações intactas.

Como isso soa?

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/publiclab/plots2/issues/4603#issuecomment-461888974 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/AABfJ15nyiYVcP-FiwUF4vfBccV5SQQfks5vLbmogaJpZM4Z8bqv
.

Claro, poderíamos fazer outra maquete, eu acho! Eu realmente não tinha pensado na parte de implementação, estava pensando em usar CSS e JS normal, mas se você acha que p5js faria bem, podemos continuar! Acho que podemos manter o endereço JSON original e usar JS para renderizar esta página.

Se pudermos usar JS e CSS básicos, vamos tentar - melhor do que incluir um todo
nova biblioteca. Mas se você estiver interessado em experimentar p5js, poderíamos fazer
algo lá também ...!

Na sexta-feira, 8 de fevereiro de 2019 às 13h18, Isha Gupta [email protected] escreveu:

Claro, poderíamos fazer outra maquete, eu acho! Eu realmente não tinha pensado sobre
a parte de implementação, estava pensando em usar CSS e JS normal, mas se
você acha que p5js faria bem, podemos ir com isso! Acho que podemos reter
o endereço JSON original e use JS para renderizar esta página.

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/publiclab/plots2/issues/4603#issuecomment-461895999 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/AABfJ1K0MU_eBZJN35QyqnxC7EsI4kaBks5vLb8-gaJpZM4Z8bqv
.

Sim, acho que poderíamos explorar os dois e ver qual é o melhor para a exibição e também para o site! Eu começaria a trabalhar nisso em um ritmo melhor assim que terminar meus exames do meio do semestre! Muito obrigado!

Boa sorte com suas provas!!

Na sexta-feira, 8 de fevereiro de 2019 às 13h32, Isha Gupta [email protected] escreveu:

Sim, acho que poderíamos explorar ambos e ver qual é o melhor para o
exibir, bem como o site! Eu começaria a trabalhar nisso em um ritmo melhor
assim que eu terminar meus exames do meio do semestre! Muito obrigado!

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/publiclab/plots2/issues/4603#issuecomment-461900313 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/AABfJ-_qLbiGiTWACqsQ6EFlf3DD2OCyks5vLcKWgaJpZM4Z8bqv
.

Aqui está o design atualizado:

image

Ao clicar no balão (podemos expandi-los proporcionalmente ao número de tags)

onclick

Deixe-me saber como é isso!

Olá @ IshaGupta18 , como está indo? Posso ajudar em alguma coisa? Obrigado

Ei, @cesswairimu na verdade eu não comecei o trabalho deliberadamente porque estava esperando que @jywarren aprovasse o design final. No momento, estou tendo alguns exames importantes em andamento na faculdade, então assim que essa ideia for totalmente aprovada e esses exames forem concluídos, vou começar meu trabalho nisso. Lamento muito este atraso, não era essa a minha intenção.

Não se preocupe @ IshaGupta18 , tudo de melhor em seus exames. Obrigado

Isso é super legal! Acho que podemos implementar isso em partes. Poderíamos começar com um design estático apenas listando todas as tags e o número de assinantes na lista à direita e, posteriormente, trabalhar nas partes interativas! Como isso soa, quebrá-lo em pedaços menores para fazer um por um?

Espero que seus exames estejam indo bem, Isha!

Sim, isso seria ótimo! Poderíamos começar com pequenos PRs e começar com o
um que você sugeriu! Muito obrigado!

Na quarta-feira, 6 de março de 2019, 03:24 Jeffrey Warren [email protected]
escreveu:

Isso é super legal! Acho que podemos implementar isso em partes. Poderíamos
comece com um design estático listando apenas todas as tags e o número de
assinantes na lista do lado direito e, posteriormente, trabalhar no interativo
partes! Como isso soa, quebrá-lo em pedaços menores para fazer um por
1?

Espero que seus exames estejam indo bem, Isha!

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/publiclab/plots2/issues/4603#issuecomment-469873165 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/Am54Z8i6cuukmNb_5zNrAfwJXj4Jskesks5vTueogaJpZM4Z8bqv
.

@gettyorawo você poderia estar interessado em trabalhar nisso? Você poderia fazer uma RP de static design just listing all tags and the number of subscribers in the right-hand list em /stats/subscriptions

Ei @cesswairimu , sinto muito pela minha inatividade neste. @GettyOrawo poderia começar com um pequeno PR se eles estivessem interessados ​​e então talvez eu pudesse assumir as partes interativas. Dessa forma, podemos trabalhar com mais eficiência. Estou aqui para ajudar em qualquer caso! Muito obrigado!

Ei @cesswairimu e @ IshaGupta18 com certeza vou levar isso em consideração

@GettyOrawo me avise se precisar de ajuda! Você poderia realmente dividi-lo em PRs ainda menores, como escrever a lógica para inserir tags em cada intervalo e, em seguida, outro PR para exibi-lo. Dessa forma, será mais fácil para nós revisarmos. O que você acha?

Não se preocupe @ IshaGupta18 sim, vamos deixar as partes interativas para você criar uma lista de verificação para isso. Obrigado

Muito obrigado, @ IshaGupta18 ,

E bom trabalho nos designs. Eles são incríveis!

Ei, @ IshaGupta18 e @cesswairimu, só para mantê-los

Ei @GettyOrawo , acredito que você não precisa fazer isso. O que você provavelmente faria é remover esta linha https://github.com/publiclab/plots2/blob/master/app/controllers/stats_controller.rb#L8 para que possa definir como os dados serão exibidos. O modelo já foi criado aqui https://github.com/publiclab/plots2/blob/master/app/views/stats/subscriptions.html.erb. @tags é um hash de chave de pares sendo tag name e valor subscriptions count . Para começar, queremos exibi-lo em uma lista simples, talvez algo semelhante a https://publiclab.org/tags, mas agora com os dois primeiros itens dessa lista. Obrigado

Tudo bem, isso faz todo o sentido. Obrigado @cesswairimu

Sinto muito por perder isso. Sim, acredito que é isso que deve ser feito.
Tente mantê-lo super simples no início, apenas alguns nomes de tag
um lado da página! Muito obrigado!

Na sexta-feira, 15 de março de 2019, 18:50 GettyOrawo [email protected] escreveu:

Tudo bem, isso faz todo o sentido. Obrigado @cesswairimu
https://github.com/cesswairimu

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/publiclab/plots2/issues/4603#issuecomment-473283169 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/Am54ZyexnFJY3eTE9mj-9ZxHxlpPeD67ks5vW540gaJpZM4Z8bqv
.

Ei @GettyOrawo ! Como está o trabalho neste aqui, só checando para ver se você precisa de alguma ajuda!

Ei @ IshaGupta18 acabei de lançar um PR inicial. Consegui agrupar as estatísticas em uma tabela simples. Acabei de codificar os valores no hash @tags vazio no stats_controller, ação de inscrição, apenas para poder testar a causa no desenvolvimento, não há inscrições.
Em seguida, preciso escrever testes para o mesmo apenas para ter certeza de que funcionará para todos eles.

subscription-stats

Desculpe @GettyOrawo , não dei orientações suficientes já que este é seu primeiro problema. Postando algumas dicas aqui. Acabei de ver sua solicitação de pull ... então @tags no controlador de estatísticas vem como hash, então não há necessidade de fazer isso. <strong i="7">@tags</strong> = @tags.group_by{|k,v| v}.map{|k,v| {k => v.map{|x| x.join("-")}}} O que poderíamos fazer aqui é apenas remover esta linha https://github.com/publiclab/plots2/blob/master/app/controllers/stats_controller.rb#L8.
Então, em exibição, há esta classe de mesa incrível que você pode usar table inline-grid para estilizar a mesa. Portanto, a visualização poderia ter este código

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

Então eu acho que devemos ser bons

Quanto ao teste, semeamos dados para algumas tags, por exemplo, tudo, blog, teste ... você poderia fazer com que um usuário se inscrevesse em algumas dessas tags e deveria ver alguns dados em /stats/subscriptions . Os nomes de usuário são admin, moderador e usuário. todas as senhas são password .
Se isso não for suficiente para o teste, você pode empurrar seu branch para instável executando este comando git push -f https://github.com/publiclab/plots2.git HEAD:unstable apenas certifique-se de mencionar que está empurrando para instável no canal gitter para não interferir nos testes de outras pessoas. O código deve estar disponível aqui http://unstable.publiclab.org/ após cerca de 20 minutos.
Sinta-se à vontade para comentar abaixo caso tenha alguma dúvida
Obrigado

Oh sim, faz todo o sentido.
Este código exibirá nomes com seus números de assinatura.

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

gostar:


















MarcaçãoNúmero de assinantes
ircam23
quabec144
conduziu23

Embora para o código muito feio no controlador:
<strong i="42">@tags</strong> = @tags.group_by{|k,v| v}.map{|k,v| {k => v.map{|x| x.join("-")}}}

Eu estava tentando agrupar as estatísticas em seus números de assinatura comuns, por exemplo, as estatísticas com 1 serão ["amanda-1", "grace-1"] com 43 serão ["cess-43", "isha-43" ] para que todas as estatísticas com números de assinatura comuns fiquem juntas. Porém, ele precisa de muita refatoração: Veja como eu estava pensando em gerá-los;

Número de assinantesTag
1
  • amanda-1
  • graça-1
43
  • cess-43
  • isha-43
2
  • led-2

Inicialmente @tags é um hash com chaves como tags e valores como número de assinaturas dessa tag.
Minha pergunta: preciso desse código embutido em minha visualização ou deveria estar na ação do controlador para que eu pudesse classificá-los dessa maneira?

Aha incrível! Vejo que sua tela parece muito melhor: balão:. Podemos refatorar mais tarde. Obrigado

Trabalho incrível feito aqui @GettyOrawo ! Sinta-se à vontade para pedir ajuda! @cesswairimu uma vez feito isso, vamos começar a fazer grupos como intervalos de aula.

Tudo bem, obrigado pessoal, vou atualizar o progresso.

Olá @cesswairimu , @ IshaGupta18 e @jywarren , enviei onde estou com este problema na solicitação pull abaixo, pois estou preocupado que possa demorar uma eternidade nisso:

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

Estou achando um pouco demorado aprender como exibir as estatísticas conforme a maquete especificada. Eu li artigos e tutoriais sobre p2.js e matter.js. É realmente factível, mas vai demorar muito mais tempo do que eu imaginava. É possível mesclar isso e, no futuro, posso criar a tela melhor.

É um pouco opressor, pois estou lutando para cumprir o prazo de inscrição do Outreachy, mas este é meu primeiro problema. O que vocês sentem sobre isso?

Isso é o que eu tenho até agora:

publiclab-subscription-stats

Ei @GettyOrawo está ótimo e sim com certeza podemos refinar mais tarde ... Se você pudesse apenas consertar os problemas de codeclima, estaríamos bem. Muito obrigado por trabalhar nisso.

Sim, absolutamente, este é um trabalho incrível! E não se preocupe muito com isso
agora, concentre-se em seu aplicativo, isso é realmente bom o suficiente! Muito obrigado!

Na quinta-feira, 21 de março de 2019, 21h05 Cess [email protected] escreveu:

Ei @GettyOrawo https://github.com/GettyOrawo parece ótimo e
claro que podemos refinar mais tarde ... Se você pudesse apenas consertar o codeclimato
questões que devemos ser bons. Muito obrigado por trabalhar nisso.

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/publiclab/plots2/issues/4603#issuecomment-475279958 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/Am54Zw8RlXPdFHli6JdffNyk2CjxyeWNks5vY6aygaJpZM4Z8bqv
.

Impressionante, muito obrigado. Deixe-me consertar isso.

Tudo bem, todos os testes passam bem agora. : ligeiramente_smiling_face:

@cesswairimu e @ IshaGupta18, posso resolver outro problema? Ou devo procurar um bug para corrigir e criar um problema?

Este é um primeiro PR EPIC! Uau!!! Parabéns e, sim, estamos sempre apoiando a realização de um projeto inicial simples e a construção de complexidade em PRs de acompanhamento! Uau, deixe-me revisar agora. Obrigado!!!! e um trabalho fantástico a todos!

Obrigado @jywarren ! :sorriso:

Ei @jywarren @cesswairimu ainda há trabalho para fazer neste aqui para fazer as bolhas interativas. Eu entraria em contato com isso em breve. Podemos continuar o trabalho na edição de acompanhamento também, mas acho que devemos manter este aberto por mais algum tempo. O que é que vocês acham? Muito obrigado e ótimo trabalho @GettyOrawo !

Sim, ótimo! Obrigado @ IshaGupta18 !!!

Na segunda-feira, 25 de março de 2019 às 15:55 Isha Gupta [email protected] escreveu:

Olá @jywarren https://github.com/jywarren @cesswairimu
https://github.com/cesswairimu ainda há trabalho restante neste aqui para
faça as bolhas interativas. Eu entraria em contato com isso em breve. Nós podemos
continuar o trabalho na questão de acompanhamento também, mas devemos manter este
um aberto por algum tempo, eu acho. O que é que vocês acham? Muito obrigado e
ótimo trabalho @GettyOrawo https://github.com/GettyOrawo !

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/publiclab/plots2/issues/4603#issuecomment-476352685 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/AABfJ9Vf5E1FxwrysJH1AKDsjnUgsGBcks5vaSmOgaJpZM4Z8bqv
.

Fechando isso ... estamos em uma exibição melhor e também a mesma discussão acontecendo aqui https://github.com/publiclab/plots2/issues/5260. Obrigado a todos

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

first-timers[bot] picture first-timers[bot]  ·  3Comentários

grvsachdeva picture grvsachdeva  ·  3Comentários

keshavsethi picture keshavsethi  ·  3Comentários

ebarry picture ebarry  ·  3Comentários

keshavsethi picture keshavsethi  ·  3Comentários