{"id":13402671,"url":"https://github.com/chrisrzhou/google-globe-trends","last_synced_at":"2025-04-19T14:23:00.923Z","repository":{"id":88728864,"uuid":"180546101","full_name":"chrisrzhou/google-globe-trends","owner":"chrisrzhou","description":"Create beautiful and interactive Google Trends globe visualizations with ease","archived":false,"fork":false,"pushed_at":"2020-08-09T07:58:53.000Z","size":129440,"stargazers_count":43,"open_issues_count":0,"forks_count":9,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-29T08:32:58.703Z","etag":null,"topics":["earth","globe","google-trends","io","jamstack","react","threejs","visualization","webgl"],"latest_commit_sha":null,"homepage":"https://google-globe-trends.netlify.app/","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/chrisrzhou.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}},"created_at":"2019-04-10T09:16:09.000Z","updated_at":"2024-12-04T19:19:20.000Z","dependencies_parsed_at":"2023-06-19T12:10:00.845Z","dependency_job_id":null,"html_url":"https://github.com/chrisrzhou/google-globe-trends","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisrzhou%2Fgoogle-globe-trends","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisrzhou%2Fgoogle-globe-trends/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisrzhou%2Fgoogle-globe-trends/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisrzhou%2Fgoogle-globe-trends/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisrzhou","download_url":"https://codeload.github.com/chrisrzhou/google-globe-trends/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249711492,"owners_count":21314252,"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":["earth","globe","google-trends","io","jamstack","react","threejs","visualization","webgl"],"created_at":"2024-07-30T19:01:19.300Z","updated_at":"2025-04-19T14:23:00.868Z","avatar_url":"https://github.com/chrisrzhou.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# 🌎 Google Globe Trends\n\nCreate beautiful and interactive Google Trends globe visualizations with ease.\n\n## Overview\n\n![image](./demo.gif)\n\n`google-globe-trends` is a [JAMStack][jamstack] application that visualizes Google Trends with an interactive React + ThreeJS globe. Data is fetched during build time using the [`google-trends-api`][google-trends-api] package. Globe visualizations are rendered using the [`react-globe`][react-globe-github] package.\n\nThis project is inspired by the wonderful [#metoorising][metoorising] project. With most interactive features supported by `react-globe`, the project aims to simplify building beautiful globe visualizations with Google Trends datasets.\n\n## Deploy an Instance\n\n### Deploy with Netlify\n\nTo deploy your personal Google Globe Trends instance, click on the **Deploy to Netlify** button below. You will be prompted to connect this instance to a Github repo. Follow through the steps and you should be able to view a working example with your own Netlify URL!\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/chrisrzhou/google-globe-trends)\n\n### Configurations\n\nTo configure your instance, you should clone the Github repo and test locally:\n\n```sh\ngit clone git@github.com:MY_USER_NAME/MY_GOOGLE_GLOBE_TRENDS_INSTANCE.git\n\ncd MY_GOOGLE_GLOBE_TRENDS_INSTANCE\nnpm install \u0026\u0026 npm start\n```\n\nYou can configure the globe visuals (e.g. globe texture, glow color, zoom behaviors) by editing the [`config.js`](./src/config.js) file. For more resources on how to configure these options, please refer to the `react-globe` [docs][react-globe-docs].\n\nIf you would like to render the Google Trends of another keyword, simply change the `keyword` field of the config file. To apply changes to the data, run the `npm run build:data` command.\n\nYou should now be able to test your changes locally with the `npm start` command. If they look good, you can commit the changes to your Github repo, and Netlify will redeploy the instance with these updates automatically!\n\n## Automate Data Updates\n\nA really cool thing about Netlify is the ability to use build hooks. This provides you with a unique URL that you can use to trigger rebuilding the site. You can find this in the **Build Hooks** section for your Netlify project (e.g. https://app.netlify.com/sites/MY_GOOGLE_GLOBE_TRENDS_INSTANCE/settings/deploys). Go ahead and create a build hook and give it a meaningful name (e.g. `'daily-deploy'`).\n\nYou can now ping this build hook URL to rebuild the site. Services such as [IFTTT][ifttt] or [Zapier][zapier] provide simple ways to automate and schedule simple jobs that you can use to hit the build hook URL. Below is an example of setting up an IFTTT applet that is scheduled to hit the build hook URL every midnight.\n\n![image](./ifttt_applet.png)\n\n\n## Author's Notes\n\nGoogle Globe Trends is primarily meant to be an artistic and UI-focused experience to explore visualizing Google Trends data with an interactive React/ThreeJS globe. As a personal project, I wanted to learn how to abstract features and visual experiences in the [metoorising][metoorising] project into modular components. I also wanted to explore JAMStack techniques of automating and scheduling data updates at build time with IFTTT and web hooks. This project will probably not be actively updated but can serve as a template for other projects to draw ideas from!\n\n\u003c!-- Links --\u003e\n[jamstack]: https://jamstack.org/\n[google-trends-api]: https://www.npmjs.com/package/google-trends-api\n[react-globe-github]: https://github.com/chrisrzhou/react-globe\n[react-globe-docs]: https://react-globe.netlify.com/\n[metoorising]: https://metoorising.withgoogle.com/\n[ifttt]: https://ifttt.com\n[zapier]: https://zapier.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisrzhou%2Fgoogle-globe-trends","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisrzhou%2Fgoogle-globe-trends","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisrzhou%2Fgoogle-globe-trends/lists"}