Plots2: Explore cómo presentar estadísticas de suscripción

Cómo es esto ?

@dewanhimanshu gracias por tu sugerencia, pero si miras https://publiclab.org/stats/subscriptions hay un montón de etiquetas y si tenemos una etiqueta para cada línea, la página será muy larga. ¿No te parece? ¿Quizás tienes otra idea? Gracias

Tengo una idea sobre cómo mostrar estas estadísticas de una manera no monótona y un poco más eficiente, pero puede ser diferente del esquema de interfaz de usuario del sitio. ¿Te gustaría ver una maqueta @cesswairimu ?

¡Excelente! sí @ IshaGupta18. Por favor publícalo

Bien, dado que no queremos que la longitud de la página aumente indefinidamente, pensé en hacer grupos de valores estadísticos como: 0-5, 5-10, 10-15 y así sucesivamente (el tamaño de la clase se puede ajustar en consecuencia) :

Al hacer clic en una burbuja, se expandirá y le mostrará las etiquetas que tienen ese valor estadístico:

Al hacer clic en él nuevamente / soltarlo, restaurará su forma original.

¿Cómo se ve esto? Pensé que podría ser un poco creativo y divertido y reducir el espacio. ¿Qué opinas @cesswairimu ?

¡Guau! @ IshaGupta18 Me encanta esta idea, es súper creativa y gracias por trabajar en las maquetas se ven geniales. Creo que los valores son el número de suscriptores, ¿verdad?
También tal vez podamos agregar valores de etiqueta específicos en la ventana emergente, algo como balloon-mapping -1, mapknitter-2, podría ser útil para fines de análisis. ¿Qué piensas?

¡Muchas gracias @cesswairimu ! Sí, son la cantidad de suscriptores, como en los datos JSON, excepto que he hecho intervalos de clase.
Sí, creo que agregar balloon-mapping -1, mapknitter-2 sería genial ya que será más informativo para el análisis.

Impresionante. ¿Le interesaría implementar esto?

¡Sí, me encantaría implementar esto! Además, sugeriría otra maqueta similar, ¡probablemente con solo algunos pequeños cambios que pueden mejorar el diseño!

Genial @ IshaGupta18. Gracias

@jywarren Quería que

¡Esto es muy genial! ¡Tan creativo!

Solo algunas ideas que pueden influir un poco en el diseño:

1. si esto se implementará usando JavaScript, como por ejemplo p5js - https://p5js.org/ (podría comenzar con una demostración en https://editor.p5js.org/), podríamos apuntar directamente al JSON para usar como fuente
2. eso significaría que podríamos desarrollarlo como una visualización JS independiente y preservar la visualización original de JSON en, digamos, /stats/subscription.json o /stats/subscription/?format=json
3. ¿Quizás deberíamos mostrar en orden descendente para que las etiquetas más populares a seguir estén en la parte superior?
4. Creo que mostrar algunos de los nombres de etiquetas en la vista general sería genial, por lo que puede haber alguna forma de "escanear" los datos. ¿Algunas ideas? ¿Quizás esto signifique un diseño ligeramente diferente?
5. en paréntesis de menor popularidad, como 0-5, es posible que tengamos MUCHAS etiquetas. Si hay demasiados para caber en el círculo, ¿qué hacemos?

Me encanta la idea del círculo. ¿Qué pasaría si mostramos las etiquetas junto a los círculos y tuviéramos una línea de círculos descendentes de grande a pequeño en la página? ¿O otra idea de diseño? ¡Abierto a ideas!

¡Muchas gracias @jywarren ! Creo que todas las ideas son realmente buenas. Incluso yo estaba a punto de mencionar el problema en el punto 5. Para resolverlo, estaba pensando en agrandar la burbuja proporcionalmente al número de etiquetas en ese intervalo.

Sin embargo, creo que esto resolvería mejor el problema:
Podríamos mostrar algunas etiquetas junto a los círculos (que estarán en orden descendente de su tamaño, yendo hacia abajo en la página), digamos 3 de ellas y luego al hacer clic en la burbuja, mostraría todas las etiquetas. De esta manera, podríamos hojear la página y mantener la información intacta.

¿Como suena esto?

genial, ¿deberíamos hacer otra maqueta antes de implementar? tienes una idea
de cómo le gustaría implementar esto, por ejemplo, podríamos hacer círculos usando CSS
border-radius, o tal vez podríamos usar p5js? Creo que cargarlo desde
la dirección JSON usando algo como
$ .json ('/ stats / subscriptions.json'). onComplete (función (respuesta) {...});
sería bueno. Requeriría algunos pequeños cambios en el controlador de estadísticas.

El viernes 8 de febrero de 2019 a las 12:54 p.m., Isha Gupta [email protected] escribió:

¡Muchas gracias @jywarren https://github.com/jywarren ! Creo que todo el
las ideas son realmente buenas. Incluso yo estaba a punto de mencionar el problema en el punto 5.
Para solucionarlo, estaba pensando en agrandar la burbuja proporcional al
número de etiquetas en ese intervalo.

Sin embargo, creo que esto resolvería mejor el problema:
Podríamos mostrar algunas etiquetas junto a los círculos (que estarán en orden descendente
orden de su tamaño, yendo hacia abajo en la página), digamos 3 de ellos y luego en
al hacer clic en la burbuja, se mostrarán todas las etiquetas. De esta manera, podríamos desnatar
a través de la página y mantener la información intacta.

¿Como suena esto?

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/publiclab/plots2/issues/4603#issuecomment-461888974 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AABfJ15nyiYVcP-FiwUF4vfBccV5SQQfks5vLbmogaJpZM4Z8bqv
.

Claro, creo que podríamos hacer otra maqueta. Realmente no había pensado en la parte de implementación, estaba pensando en usar CSS y JS normal, pero si crees que p5js funcionaría bien, ¡podemos hacerlo! Creo que podemos conservar la dirección JSON original y usar JS para representar esta página.

Si podemos usar JS y CSS básicos, intentémoslo, mejor que incluir un
nueva biblioteca. Pero si está interesado en probar p5js, podríamos hacerlo
algo ahí también ...!

El viernes 8 de febrero de 2019 a la 1:18 p.m., Isha Gupta [email protected] escribió:

Claro, creo que podríamos hacer otra maqueta. Realmente no había pensado en
la parte de implementación, estaba pensando en usar CSS y JS normal, pero si
crees que p5js estaría bien, ¡podemos ir con eso! Creo que podemos retener
la dirección JSON original y use JS para representar esta página.

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/publiclab/plots2/issues/4603#issuecomment-461895999 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AABfJ1K0MU_eBZJN35QyqnxC7EsI4kaBks5vLb8-gaJpZM4Z8bqv
.

Sí, creo que podríamos explorar ambos y ver cuál es mejor para la pantalla y para el sitio. ¡Comenzaría a trabajar en esto a un mejor ritmo una vez que termine con mis exámenes de mitad de semestre! ¡Muchas gracias!

¡¡Buena suerte con tus exámenes!!

El viernes 8 de febrero de 2019 a la 1:32 p.m., Isha Gupta [email protected] escribió:

Sí, creo que podríamos explorar ambos y ver cuál es mejor para el
mostrar así como el sitio! Empezaría a trabajar en esto a un mejor ritmo.
una vez que termine con mis exámenes de mitad de semestre! ¡Muchas gracias!

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/publiclab/plots2/issues/4603#issuecomment-461900313 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AABfJ-_qLbiGiTWACqsQ6EFlf3DD2OCyks5vLcKWgaJpZM4Z8bqv
.

Aquí está el diseño actualizado:

Al hacer clic en la burbuja (podríamos expandirlas proporcionalmente al número de etiquetas)

¡Déjame saber cómo se ve esto!

Hola @ IshaGupta18 , ¿cómo va esto? ¿Algo en lo que pueda ayudar? Gracias

Oye, @cesswairimu en realidad no comencé con el trabajo deliberadamente porque estaba esperando que @jywarren aprobara el diseño final. En este momento, estoy teniendo algunos exámenes importantes en la universidad, así que tan pronto como esta idea sea aprobada por completo y esos exámenes estén terminados, comenzaré mi trabajo en esto. Lamento mucho este retraso, no era mi intención.

No se preocupe @ IshaGupta18 , todo lo mejor en sus exámenes. Gracias

¡Esto es super lindo! Creo que podemos implementar esto en piezas. Podríamos comenzar con un diseño estático simplemente enumerando todas las etiquetas y el número de suscriptores en la lista de la derecha, ¡y luego trabajar en las partes interactivas! ¿Cómo suena eso, romperlo en pedazos más pequeños para hacerlo uno por uno?

Espero que tus exámenes vayan bien Isha!

¡Si, eso sería muy bueno! Podríamos comenzar con pequeños RP y comenzar con el
uno que sugirió! ¡Muchas gracias!

El miércoles 6 de marzo de 2019 a las 3:24 a. M. Jeffrey Warren [email protected]
escribió:

¡Esto es super lindo! Creo que podemos implementar esto en piezas. Pudimos
Comience con un diseño estático simplemente enumerando todas las etiquetas y el número de
suscriptores en la lista de la derecha, y luego trabajar en el interactivo
¡partes! ¿Cómo suena eso, romperlo en pedazos más pequeños para hacer uno por
¿uno?

Espero que tus exámenes vayan bien Isha!

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/publiclab/plots2/issues/4603#issuecomment-469873165 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/Am54Z8i6cuukmNb_5zNrAfwJXj4Jskesks5vTueogaJpZM4Z8bqv
.

@gettyorawo ¿ podría estar interesado en trabajar en esto? Podrías hacer un PR por static design just listing all tags and the number of subscribers in the right-hand list en /stats/subscriptions

Hola @cesswairimu , lamento mucho mi inactividad en este caso. @GettyOrawo podría comenzar con un pequeño PR si están interesados ​​y luego tal vez podría asumir las partes interactivas. De esta forma podemos trabajar de manera más eficiente. ¡Estoy aquí para ayudar en cualquier caso! ¡Muchas gracias!

Hola @cesswairimu y @ IshaGupta18 seguro que me

@GettyOrawo, ¡ avísame si necesitas ayuda! De hecho, podría dividirlo en PR aún más pequeños, como escribir la lógica para obtener etiquetas en cada intervalo y luego otro PR para mostrarlo. De esta manera, será más fácil para nosotros revisar. ¿Qué piensas?

No se preocupe @ IshaGupta18, sí, dejaremos las partes interactivas para que usted cree una lista de verificación para esto. Gracias

Muchas gracias @ IshaGupta18 Me

Y buen trabajo en los diseños. ¡Son increíbles!

Hola @ IshaGupta18 y @cesswairimu solo para mantenerte al tanto. Todavía estoy averiguando el motor de física 2D y aprendiendo algunos conceptos básicos que necesito para configurar esto. ¿Espero estar en el camino correcto o debo comenzar agrupando los datos primero en un PR separado?

Hola @GettyOrawo , creo que no necesitas hacer eso. Lo que probablemente haría es eliminar esta línea https://github.com/publiclab/plots2/blob/master/app/controllers/stats_controller.rb#L8 para poder definir cómo se mostrarán los datos. La plantilla ya está creada aquí https://github.com/publiclab/plots2/blob/master/app/views/stats/subscriptions.html.erb. @tags es un hash de pares de claves que son tag name y valor subscriptions count . Para empezar, queremos mostrar esto en una lista simple, tal vez algo similar a https://publiclab.org/tags, pero ahora con los dos primeros elementos de esa lista. Gracias

Muy bien, esto tiene mucho sentido. Gracias @cesswairimu

Lo siento mucho por perderme en esto. Sí, creo que esto es lo que hay que hacer.
Intente que sea muy simple al principio, solo un par de nombres de etiquetas en
un lado de la página! ¡Muchas gracias!

El viernes 15 de marzo de 2019 a las 6:50 p.m. GettyOrawo [email protected] escribió:

Muy bien, esto tiene mucho sentido. Gracias @cesswairimu
https://github.com/cesswairimu

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/publiclab/plots2/issues/4603#issuecomment-473283169 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/Am54ZyexnFJY3eTE9mj-9ZxHxlpPeD67ks5vW540gaJpZM4Z8bqv
.

¡Hola @GettyOrawo ! ¿Cómo va el trabajo en este? ¡Solo verifíquese para ver si necesita ayuda!

Hola @ IshaGupta18 , acabo de poner un PR inicial. Pude agrupar las estadísticas en una tabla simple. Simplemente codifiqué valores en el hash @tags vacío en stats_controller, acción de suscripción para poder probar la causa en desarrollo, no hay suscripciones.
A continuación, necesito escribir pruebas para lo mismo solo para asegurarme de que funcionará para todos.

Lo siento @GettyOrawo , no te di suficiente dirección dado que este es tu primer número. Publicando algunos consejos aquí. Acabo de ver su solicitud de extracción ... así que @tags en el controlador de estadísticas viene como hash, por lo que no es necesario hacer esto. <strong i="7">@tags</strong> = @tags.group_by{|k,v| v}.map{|k,v| {k => v.map{|x| x.join("-")}}} Lo que podríamos hacer aquí es simplemente eliminar esta línea https://github.com/publiclab/plots2/blob/master/app/controllers/stats_controller.rb#L8.
Luego, está a la vista esta increíble clase de mesa que puede usar table inline-grid para diseñar la mesa. Entonces la vista podría tener 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>

Entonces supongo que deberíamos ser buenos

En cuanto a las pruebas, hemos sembrado datos para algunas etiquetas, por ejemplo, todo, blog, prueba ... podría hacer que un usuario se suscriba a algunas de estas etiquetas y debería ver algunos datos en /stats/subscriptions . Los nombres de usuario son administrador, moderador y usuario. todas las contraseñas son password .
Si eso no es suficiente para las pruebas, puede empujar su rama a inestable ejecutando este comando git push -f https://github.com/publiclab/plots2.git HEAD:unstable solo asegúrese de mencionar que está presionando a inestable en el canal gitter para no interferir con las pruebas de otras personas. El código debería estar disponible aquí http://unstable.publiclab.org/ después de unos 20 minutos.
No dude en comentar a continuación en caso de que tenga alguna pregunta.
Gracias

Oh, sí, tiene mucho sentido.
Este código mostrará nombres con sus números de suscripción.

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

igual que:

Aunque por el código muy feo en el controlador:
<strong i="42">@tags</strong> = @tags.group_by{|k,v| v}.map{|k,v| {k => v.map{|x| x.join("-")}}}

Estaba tratando de agrupar las estadísticas en sus números de suscripción comunes, por ejemplo, las estadísticas con 1 serán ["amanda-1", "grace-1"] las estadísticas con 43 serán ["cess-43", "isha-43" ] para que todas las estadísticas con números de suscripción comunes estén juntas. Sin embargo, necesita mucha refactorización: así es como estaba pensando en generarlos;

Inicialmente, @tags es un hash con claves como etiquetas y valores como número de suscripciones de esa etiqueta.
Mi pregunta: ¿necesito este código incrustado en mi vista o debería estar en la acción del controlador para poder ordenarlos de esta manera?

¡Ajá impresionante! Veo que su pantalla se ve mucho mejor: globo:. Podemos refactorizar más tarde. Gracias

¡Increíble trabajo hecho aquí @GettyOrawo ! ¡No dudes en pedir ayuda! @cesswairimu una vez hecho esto, comenzaremos a hacer grupos como intervalos de clase.

Muy bien, gracias chicos, actualizaré el progreso.

Hola @cesswairimu , @ IshaGupta18 y @jywarren , he enviado dónde estoy con este problema en la solicitud de extracción a continuación, ya que me preocupa que pueda estar tardando una eternidad en ello:

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

Me cuesta un poco aprender a mostrar las estadísticas como se especifica en la maqueta. He repasado artículos y tutoriales sobre p2.js y matter.js. De hecho, es factible, pero llevará mucho más tiempo del que suponía. ¿Es posible fusionar esto y luego, en el futuro, puedo diseñar mejor la pantalla?

Es un poco abrumador ya que estoy luchando para cumplir con la fecha límite de solicitud de Outreachy, pero este es mi primer problema. ¿Qué sienten ustedes por esto?

Esto es lo que tengo hasta ahora:

Hola @GettyOrawo, se ve muy bien y sí, seguro que podemos refinar más tarde ... Si pudieras solucionar los problemas de codeclimate, deberíamos estar bien. Muchas gracias por trabajar en esto.

Sí, absolutamente, ¡este es un trabajo increíble! Y no te preocupes demasiado por esto
ahora, concéntrese en su aplicación, ¡esto es realmente bueno! ¡Muchas gracias!

El jueves 21 de marzo de 2019 a las 9:05 p.m., Cess [email protected] escribió:

Hola @GettyOrawo https://github.com/GettyOrawo se ve genial y
sí, seguro que podemos refinar más tarde ... Si pudieras arreglar el codeclimate
temas que deberíamos ser buenos. Muchas gracias por trabajar en esto.

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/publiclab/plots2/issues/4603#issuecomment-475279958 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/Am54Zw8RlXPdFHli6JdffNyk2CjxyeWNks5vY6aygaJpZM4Z8bqv
.

Grandioso, muchas gracias. Déjame arreglar eso.

Muy bien, todas las pruebas pasan bien ahora. : leve_sonriente_cara:

@cesswairimu y @ IshaGupta18 ¿puedo obtener otro problema en el que trabajar? ¿O debería buscar un error para solucionarlo y crear un problema?

¡Este es un primer PR ÉPICO! ¡¡¡Guau!!! ¡Felicitaciones, y sí, siempre apoyamos la realización de un proyecto simple inicial y la complejidad de construcción en las relaciones públicas de seguimiento! Vaya, déjame revisar ahora. ¡¡¡¡Gracias!!!! ¡y un trabajo fantástico para todos!

¡Gracias @jywarren ! :sonrisa:

Hola @jywarren @cesswairimu , todavía queda trabajo en este para hacer las burbujas interactivas. Lo seguiría pronto. También podemos continuar trabajando en el tema de seguimiento, pero creo que deberíamos mantener este abierto durante algún tiempo. ¿Qué piensan ustedes? ¡Muchas gracias y buen trabajo @GettyOrawo !

¡Sí, genial! Gracias @ IshaGupta18 !!!

El lunes, 25 de marzo de 2019 a las 3:55 p.m., Isha Gupta [email protected] escribió:

Hola @jywarren https://github.com/jywarren @cesswairimu
https://github.com/cesswairimu todavía queda trabajo en este para
Haz las burbujas interactivas. Lo seguiría pronto. Podemos
continuar el trabajo en el tema de seguimiento también, pero debemos mantener este
uno abierto por un rato, creo. ¿Qué piensan ustedes? Muchas gracias y
gran trabajo @GettyOrawo https://github.com/GettyOrawo !

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/publiclab/plots2/issues/4603#issuecomment-476352685 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AABfJ9Vf5E1FxwrysJH1AKDsjnUgsGBcks5vaSmOgaJpZM4Z8bqv
.

Cerrando esto ... estamos en una mejor visualización y también en la misma discusión aquí https://github.com/publiclab/plots2/issues/5260. Gracias a todos