Plots2: 구독 통계를 표시하는 방법 알아보기

방법이있다 ?

@dewanhimanshu 제안 https://publiclab.org/stats/subscriptions 를 보면 많은 태그가 있으며 각 줄에 태그가 있으면 페이지가 너무 길어집니다. 그렇게 생각하지 않아? 다른 생각이 있으신가요? 감사 해요

이러한 통계를 단조롭지 않은 방식으로 좀 더 효율적으로 표시하는 방법에 대한 아이디어가 있지만 사이트의 UI 구성표와 다를 수 있습니다. @cesswairimu 모형을

엄청난! 네 @IshaGupta18. 올려주세요

좋습니다. 페이지 길이가 무한정 늘어나는 것을 원하지 않기 때문에 0-5 , 5-10, 10-15 등과 같은 통계 값 그룹을 만드는 것을 생각했습니다(클래스 크기는 그에 따라 조정할 수 있음). :

풍선을 클릭하면 풍선이 확장되고 해당 통계 값을 가진 태그가 표시됩니다.

다시 클릭/떼면 원래 모양으로 복원됩니다.

이것은 어떻게 보입니까? 조금 창의적이고 장난기 있고 공간을 줄일 수 있다고 생각했습니다. @cesswairimu 어떻게 생각

우와! @IshaGupta18 나는 이 아이디어가 매우 창의적이고 멋지게 보이는 모형 작업에 감사드립니다. 값이 구독자 수라고 생각합니다. 맞나요?
또한 balloon-mapping -1, mapknitter-2, 와 같은 팝업에 특정 태그 값을 추가하면 분석 목적으로 유용할 수 있습니다. 어떻게 생각하세요?

@cesswairimu 감사합니다! 예, 클래스 간격을 만든 것을 제외하고 JSON 데이터와 같은 구독자 수입니다.
예, balloon-mapping -1, mapknitter-2 추가하면 분석에 더 많은 정보를 얻을 수 있으므로 좋을 것 같습니다!

엄청난. 이것을 구현하는 데 관심이 있으십니까?

예, 나는 이것을 구현하고 싶습니다! 또한 디자인을 개선할 수 있는 약간의 변경 사항이 있는 또 다른 유사한 모형을 제안합니다!

훌륭합니다 @IshaGupta18. 감사 해요

@jywarren 구현을 시작하기 전에 내 디자인을 살펴보기만 하면 됩니다. 만약 여기에 구현 가능한 것이 더 있다면?

이것은 매우 멋지다! 너무 창의적입니다!

디자인에 약간의 영향을 줄 수 있는 몇 가지 생각:

1. 예를 들어 p5js - https://p5js.org/(https://editor.p5js.org/ 에서 데모로 시작할 수 있음)와 같은 JavaScript를 사용하여 구현하는 경우 JSON에서 바로 사용할 수 있습니다. 소스로
2. 즉, 독립 실행형 JS 시각화로 개발하고 JSON의 원래 표시를 예를 들어 /stats/subscription.json 또는 /stats/subscription/?format=json 유지할 수 있습니다.
3. 가장 인기 있는 태그가 맨 위에 오도록 내림차순으로 표시해야 할까요?
4. 전체 보기에 일부 태그 이름을 표시하는 것이 좋을 것이므로 데이터를 "스키밍"할 수 있는 방법이 있을 수 있다고 생각합니다. 어떤 아이디어? 이것은 약간 다른 레이아웃을 의미할까요?
5. 0-5와 같이 인기가 낮은 대괄호에는 TON의 태그가 있을 수 있습니다. 원에 담기에는 너무 많으면 어떻게 해야 합니까?

나는 서클 아이디어를 좋아합니다. 원 옆에 태그를 표시하고 페이지를 따라 큰 원에서 작은 원으로 내림차순으로 이어지는 선이 있으면 어떻게 될까요? 아니면 다른 레이아웃 아이디어? 아이디어에 열려 있습니다!

@jywarren 감사합니다! 모든 아이디어가 정말 좋은 것 같아요. 저도 5번 항목에서 언급한 문제에 대해 언급했습니다. 이를 해결하기 위해 해당 간격의 태그 수에 비례하여 거품을 확대하는 방법을 생각했습니다.

그러나 이것이 문제를 더 잘 해결할 것이라고 생각합니다.
원 옆에 몇 개의 태그를 표시할 수 있습니다(크기의 내림차순, 페이지 아래로 이동). 그 중 3개를 말한 다음 거품을 클릭하면 모든 태그가 표시됩니다. 이렇게 하면 페이지를 훑어보고 정보를 그대로 유지할 수 있습니다.

어떻게 들리나요?

좋습니다. 구현하기 전에 또 다른 모형을 만들어 볼까요? 당신은 아이디어가 있었나요
CSS를 사용하여 서클을 만들 수 있습니다.
border-radius 또는 p5js를 사용할 수 있습니까? 나는 그것을로드한다고 생각한다.
다음과 같은 것을 사용하는 JSON 주소
$.json('/stats/subscriptions.json').onComplete(함수(응답) { ... });
좋을 것입니다. 통계 컨트롤러에 약간의 변경이 필요합니다.

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
.

업데이트된 디자인은 다음과 같습니다.

거품을 클릭하면 (태그 수에 비례하여 확장할 수 있음)

이것이 어떻게 보이는지 알려주세요!

안녕하세요 @IshaGupta18 , 어떻게 진행되고 있습니까? 무엇을 도와드릴까요? 감사 해요

안녕하세요, @cesswairimu 사실 저는 @jywarren 이 최종 디자인을 승인하기를 기다리고 있었기 때문에 일부러 작업을 시작하지 않았습니다. 지금 저는 대학에서 몇 가지 중요한 시험을 치르고 있습니다. 따라서 이 아이디어가 완전히 승인되고 시험이 완료되는 즉시 이에 대한 작업을 시작하겠습니다. 이런 지연에 대해 매우 유감스럽게 생각합니다. 의도하지 않았습니다.

걱정하지 마세요 @IshaGupta18 , 시험에 최선을 다하세요. 감사 해요

이것은 매우 멋지다! 나는 우리가 이것을 조각으로 구현할 수 있다고 생각합니다. 오른쪽 목록에 모든 태그와 구독자 수를 나열하는 정적 디자인으로 시작하고 나중에 대화형 부분에서 작업할 수 있습니다! 작은 조각으로 나누어 하나씩 수행하려면 어떻게 들리나요?

시험이 잘 되기를 바랍니다 Isha!

그래 그게 좋겠다! 우리는 작은 PR로 시작하여
당신이 제안한 하나! 정말 감사합니다!

2019년 3월 6일 수요일 오전 3:24 Jeffrey Warren [email protected]
썼다:

이것은 매우 멋지다! 나는 우리가 이것을 조각으로 구현할 수 있다고 생각합니다. 우리는 할 수 있었다
모든 태그와
오른쪽 목록에 있는 구독자, 나중에 대화형 작업
부속! 소리가 어떻습니까? 작은 조각으로 나누어 하나씩 수행하려면
하나?

시험이 잘 되기를 바랍니다 Isha!

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/publiclab/plots2/issues/4603#issuecomment-469873165 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/Am54Z8i6cuukmNb_5zNrAfwJXj4Jskesks5vTueogaJpZM4Z8bqv
.

@gettyorawo 이 작업에 관심이 있으십니까? static design just listing all tags and the number of subscribers in the right-hand list 에서 /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분 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 방금 시작 PR을 올렸습니다. 통계를 간단한 표로 그룹화할 수 있었습니다. 방금 stats_controller의 빈 @tags 해시에 값을 하드 코딩했습니다. 구독 작업은 개발 중에 원인을 테스트할 수 있도록 하기 위해 구독이 없습니다.
다음으로 모든 테스트에서 작동하는지 확인하기 위해 동일한 테스트를 작성해야 합니다.

죄송합니다 @GettyOrawo 이것이 첫 번째 문제라는 점을 감안할 때 충분한 지침을 제공하지 못했습니다. 여기에 몇 가지 지침을 게시합니다. 방금 pull 요청을 보았습니다. stats 컨트롤러의 @tags 는 해시로 제공되므로 이 작업을 수행할 필요가 없습니다. <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>

처럼:

컨트롤러의 매우 못생긴 코드의 경우:
<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"이 됩니다. ] 공통 구독 번호를 가진 모든 통계가 함께 표시되도록 합니다. 하지만 리팩토링이 많이 필요합니다. 출력할 생각은 다음과 같습니다.

처음에 @tags 는 키를 태그로, 값을 해당 태그의 구독 수로 사용하는 해시입니다.
내 질문: 이 코드가 내 보기에 포함되어야 합니까, 아니면 컨트롤러 작업에 있어야 이러한 방식으로 정렬할 수 있습니까?

아 대박! 나는 당신의 디스플레이가 훨씬 좋아 보입니다 :balloon: . 나중에 리팩토링할 수 있습니다. 감사 해요

@GettyOrawo에서 놀라운 작업을 수행 @cesswairimu 이 작업이 완료되면 클래스 간격과 같은 그룹을 만들기 시작합니다.

네 감사합니다. 진행 상황을 업데이트하겠습니다.

안녕하세요 @cesswairimu , @IshaGupta18 및 @jywarren 이 문제에 대해 영원히 고민할까봐 아래의 Pull Request에 이 문제를 제출했습니다.

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

지정된 모형으로 통계를 표시하는 방법을 배우는 데 약간의 시간이 소요됩니다. 저는 p2.js 및 matter.js에 대한 기사와 튜토리얼을 살펴보았습니다. 실제로는 가능하지만 생각보다 시간이 많이 걸릴 것입니다. 이것을 병합하고 나중에 디스플레이를 더 잘 만들 수 있습니까?

Outreachy 지원 마감일을 맞추기 위해 고군분투하고 있기 때문에 다소 압도적입니다. 그러나 이것이 저의 첫 번째 문제입니다. 여러분은 이것에 대해 어떻게 생각하십니까?

이것은 내가 지금까지 가지고있는 것입니다.

@GettyOrawo 정말 멋져보이고 나중에 개선할 수 있을 거에요...코드기후 문제를 해결할 수만 있다면 우리는 좋을 것입니다. 작업해 주셔서 감사합니다.

네, 정말 멋진 작품입니다! 그리고 이것에 대해 너무 걱정하지 마십시오.
이제 응용 프로그램에 집중하십시오. 이것으로 충분합니다! 정말 감사합니다!

2019년 3월 21일 목요일 오후 9시 5분에 Cess [email protected]이 작성했습니다.

안녕하세요 @GettyOrawo https://github.com/GettyOrawo
네, 나중에 개선할 수 있습니다...코드기후를 수정할 수만 있다면
우리가 잘해야 할 문제. 작업해 주셔서 감사합니다.

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/publiclab/plots2/issues/4603#issuecomment-475279958 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/Am54Zw8RlXPdFHli6JdffNyk2CjxyeWNks5vY6aygaJpZM4Z8bqv
.

굉장합니다 정말 감사합니다. 문제를 해결하도록 하겠습니다.

이제 모든 테스트가 정상적으로 통과합니다. :약간_웃는_얼굴:

@cesswairimu 및 @IshaGupta18 다른 문제를 해결할 수 있습니까? 아니면 문제를 수정하고 생성하기 위해 버그를 찾아야 합니까?

EPIC의 첫 PR입니다! 우와!!! 축하합니다. 예, 우리는 초기의 간단한 프로젝트를 수행하고 후속 PR에서 복잡성을 구축하는 것을 항상 지원합니다! 와우 이제 리뷰하겠습니다. 감사합니다!!!! 그리고 모두에게 환상적인 작품!

@jywarren 감사합니다! :웃다:

@jywarren @cesswairimu 이 대화형 거품을 만드는 작업이 아직 남아 있습니다. 나는 그것을 곧 따라갈 것입니다. 후속 호에서도 작업을 계속할 수 있지만 이 호는 한동안 열어둬야 한다고 생각합니다. 여러분은 어떻게 생각하세요? 덕분에 많은 큰 일 @GettyOrawo!

네, 좋아요! @IshaGupta18 감사합니다!!!

2019년 3월 25일 월요일 오후 3시 55분 Isha Gupta [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 에서 동일한 토론이 진행 중입니다