{"id":21748997,"url":"https://github.com/jcolechanged/think-progress","last_synced_at":"2026-04-16T00:31:22.001Z","repository":{"id":139071924,"uuid":"332612183","full_name":"jColeChanged/think-progress","owner":"jColeChanged","description":"Reimagining progress bars in the light of the principles of good thinking and good map making. A progress bar for known out of known step counts with uniform step sizes which gives a better sense than a traditional progress bar of how long you have to go and how progress has been in the past.","archived":false,"fork":false,"pushed_at":"2021-08-13T23:09:47.000Z","size":3002,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-18T14:55:16.370Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/jColeChanged.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-25T02:48:29.000Z","updated_at":"2021-08-13T23:09:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"8cab0bc7-a26d-4f2c-8ef0-471b26ef52a7","html_url":"https://github.com/jColeChanged/think-progress","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jColeChanged%2Fthink-progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jColeChanged%2Fthink-progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jColeChanged%2Fthink-progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jColeChanged%2Fthink-progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jColeChanged","download_url":"https://codeload.github.com/jColeChanged/think-progress/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244724628,"owners_count":20499462,"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":[],"created_at":"2024-11-26T08:16:02.009Z","updated_at":"2026-04-16T00:31:21.945Z","avatar_url":"https://github.com/jColeChanged.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# think-progress\n\n## What is this?\n\nThis repository contains a reimagining of progress bars in the light of \nthe principles of good thinking and good map making.\n\nThis progress visualization is intended for progress with known step counts\nand uniform step sizes. It isn't intended to be a visualization of all types of progress, but for\nprogressions like those produced when reading a book. A book's \nlength is known. The number of pages that have been read in that book is \nalso known.\n\nThe progress visualizations produced here communicate not just the \ncurrent amount of progress, but the whole history of progress. It uses that \nhistory to make educated guesses as to how progress will proceed in the \nfuture. So in the case of reading a book you would be able to answer \nquestions like given I've been reading three pages a day I will finish the \nbook in thirty days.\n\nIf that sounds a little confusing, just look at an example progress widget\nand things should become clear:\n\n```\n\u003cThinkProgress dataset={dataset}\u003e\n```\n\n![Think Progress Example](docs/images/progress.png)\n\n## Why\n\nTraditional progress bars tend to look something like this:\n\n\u003e ![Think Progress Example](docs/images/average_progress.png)\n\nTake a moment to try to answer questions using the progress visualization \nlike:\n\n - How much longer will it take to complete?\n - What is the recent history of progress?\n - How is progress momentum developing? It is getting faster? Slower?\n - Should I hold my breath?\n\nIf you had trouble answering those questions then imagine your difficulty\nwhen giving a more modern approach to letting people know about progress. \nA traditional time in which progress visualizations are shown to people \nis when something is loading, but lately the trend is not even to try to\ncommunicate progress in these situations.\n\n![Game Loading Progress Visualization](docs/images/hearthstone_loading-2-1.gif)\n\nImplicit in their failure to communicate information about progress the \ncurrent standard for communicating progress is asking us to think about \nprogress for ourselves. However, there is reason we should hesitate to do \nso.\n\nFor one, research shows that people tend to be pretty bad at estimating\nhow long things will take. Even our worst case estimates tend to be\noptimistic. Moreover, this holds even when we know it is the case. Since \nwe know that this is an error we make frequently and one which is little \ncured by experience we probably shouldn't be confidently producing \nwrong estimates.\n\nFor another, even giving this estimate is an act of hard work. To give a \nreasonable estimate we need to think about how progress has been, what \nis remaining, and extrapolate. This involves math. Worse it involves \naccounting for situations that are unrelated to the topic we are dealing \nwith that may come in to distract us. It isn't just difficult to get this \nanswer, but is a form of the halting problem. It is both hard to answer \nand also impossible to have a correct answer.\n\nTheoretically, we can never guarantee that we have the correct progress \nextrapolation, showing the wisdom behind a loading visualization that \ndoesn't even pretend to help a person think. In practice information about \nwhen things will complete is actually valuable enough that people really \nwant it. So we have to think about it anyway.\n\nOr do we?\n\n\u003e It is a profoundly erroneous truism, repeated by all copybooks and\n\u003e by eminent people when they are making speeches, that we should\n\u003e cultivate the habit of thinking of what we are doing. The precise\n\u003e opposite is the case. Civilization advances by extending the number\n\u003e of important operations which can be performed without thinking about\n\u003e them.\n\u003e - Alfred North Whitehead\n\nThese progress visualizations try to take cues from lessons on good \nvisualization and good thinking found in books on the topic by Edward \nTufte. They do this with the intention of creating something which \ndoes good thinking on behalf of the person using it.\n\n## Installation\n\n## Usage\n\nTo create a dashboard which renders many progress visualizations:\n\n```\nimport ThinkProgressDashboard from \"./think/progress/ThinkProgressDashboard\";\n\nfunction App() {\n  let datasets= [\u003cyour dataset\u003e, ...];\n  return (\n      \u003cThinkProgressDashboard datasets={datasets}/\u003e\n  );\n}\n\nexport default App;\n```\n\nTo create a single progress visualization:\n\n```\nimport ThinkProgressDashboard from \"./think/progress/ThinkProgressDashboard\";\n\nfunction App() {\n  let datasets= [\u003cyour dataset\u003e, ...];\n  return (\n      \u003cThinkProgress dataset={dataset} selected=true /\u003e\n  );\n}\n\nexport default App;\n```\n\nYou can also analyze progress programmatically. The `ThinkProgressAnalysis` class\naccepts a window length and units. Supported units are `days`, `weeks`,\n`months` and `years`.\n\n```\nimport { ThinkProgressAnalysis } from \"./think/progress/ThinkProgressAnalysis\";\n\n// Measure progress over the last week\nconst analysis = new ThinkProgressAnalysis(dataset.entries, 1, \"weeks\");\nconsole.log(analysis.recentProgress);\n```\n\n\n\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `yarn start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\\\nYou will also see any lint errors in the console.\n\n### `yarn test`\n\nLaunches the test runner in the interactive watch mode.\\\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `yarn build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n### `yarn eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can’t go back!**\n\nIf you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.\n\nInstead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.\n\nYou don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.\n\n## Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n\n### Code Splitting\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)\n\n### Analyzing the Bundle Size\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)\n\n### Making a Progressive Web App\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)\n\n### Advanced Configuration\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)\n\n### Deployment\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)\n\n### `yarn build` fails to minify\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcolechanged%2Fthink-progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcolechanged%2Fthink-progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcolechanged%2Fthink-progress/lists"}