{"id":13907545,"url":"https://github.com/abcnews/groupyteller","last_synced_at":"2026-01-27T01:12:06.815Z","repository":{"id":39537693,"uuid":"188321977","full_name":"abcnews/groupyteller","owner":"abcnews","description":"A scrollyteller with grouped dots.","archived":false,"fork":false,"pushed_at":"2023-01-03T22:31:36.000Z","size":725,"stargazers_count":3,"open_issues_count":14,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-25T16:38:49.041Z","etag":null,"topics":["archive-candidate","scrollytelling","story-format"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/abcnews.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-23T23:49:49.000Z","updated_at":"2023-05-02T07:08:53.000Z","dependencies_parsed_at":"2023-02-01T11:32:01.070Z","dependency_job_id":null,"html_url":"https://github.com/abcnews/groupyteller","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/abcnews/groupyteller","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abcnews%2Fgroupyteller","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abcnews%2Fgroupyteller/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abcnews%2Fgroupyteller/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abcnews%2Fgroupyteller/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abcnews","download_url":"https://codeload.github.com/abcnews/groupyteller/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abcnews%2Fgroupyteller/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265705435,"owners_count":23814454,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["archive-candidate","scrollytelling","story-format"],"created_at":"2024-08-06T23:01:59.112Z","updated_at":"2026-01-27T01:12:06.784Z","avatar_url":"https://github.com/abcnews.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Groupyteller\n\nA more generalised and modernised version of [Census as 100 people](https://github.com/abcnews/census-100-people/).\n\nThis uses the [scrollyteller](https://github.com/abcnews/scrollyteller) react component.\n\n## Usage\n\nMost of these instructions are fairly specific to the ABC News environment.\n\n1. Publish a CSV file of data at a publicly available URL.\n2. Set up your scrollyteller \u0026 panels\n3. Add the `[groupyteller]` Associated JS to your story\n  \n### Data\n\nThe data should look like this:\n\n```csv\nmeasure,comparison,group,value\nissues,none,all,100\nissues,nineteen,environment,29\nissues,nineteen,economy,23\nissues,nineteen,healthcare,8\nissues,nineteen,superannuation and pensions,8\nissues,nineteen,others,32\nissues,sixteen,economy,25\nissues,sixteen,healthcare,16\nissues,sixteen,superannuation and pensions,12\nissues,sixteen,education,12\nissues,sixteen,environment,9\nissues,sixteen,others,26\nissues,qld,economy,27\nissues,qld,environment,24\nissues,qld,superannuation and pensions,8\nissues,qld,employment,7\nissues,qld,others,34\n```\n\nEach panel in the visualisation shows all rows in the data set with a combination of `measure` and `comparison`. So, for example, the data above would provide the data required for three panels:\n\n- issues, none\n- issues, nineteen\n- issues, sixteen\n- issues, qld\n\nAll rows related to a specific combination of `measure` and `comparison` should add to 100 (or a different `total`, which you can configure later). Lets take `issues` and `nineteen` as an example:\n\n| group                       | value |\n| --------------------------- | ----- |\n| environment                 | 29    |\n| economy                     | 23    |\n| healthcare                  | 8     |\n| superannuation and pensions | 8     |\n| others                      | 32    |\n\nThese are the clusters displayed in a single panel of the visualisation. The `group` value is audience facing and used to label each cluster.\n\n### Scrollyteller / panels\n\nA basic story setup will look like this:\n\n```text\nIntroduction to the story here.\n#scrollytellerNAMEgroupytellerMEASUREissuesCOMPARISONnoneCONFIGbase36\nThis is the text for the first panel which will display the groups associated with the measure 'issues' and the comparison 'none'. (So in this case it will be a single group labeled 'all').\n#markMEASUREissuesCOMPARISONsixteen\nThis is the text associated with the second panel defined above using the #mark fragment. It will show groups from the combo of 'issues' and 'sixteen'.\n#endscrollyteller\nSome content after the scrollyteller.\n```\n\nYou can use the data in any order you like, there's no link between the order in the data file and the marks in the scrollyteller config.\n\nThe `CONFIG` value (`\"base36\"`) on the opening scrollyteller tag should be replaced by a [base36-encoded](https://www.abc.net.au/res/sites/news-projects/base-36-props-converter/1.1.0/) object with the following props:\n\n-  `dataURL`, the URL of your CSV data\n-  `total`, the total number of dots (optional; default: 100)\n\n\n## Authors\n\n- Simon Elvery ([simon@elvery.net](mailto:simon@elvery.net))\n- Josh Byrd ([byrd.joshua@abc.net.au](mailto:joshua.byrd@abc.net.au))\n- Colin Gourlay ([gourlay.colin@abc.net.au](mailto:gourlay.colin@abc.net.au))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabcnews%2Fgroupyteller","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabcnews%2Fgroupyteller","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabcnews%2Fgroupyteller/lists"}