{"id":28974836,"url":"https://github.com/plcoster/fcc_datavis_project3","last_synced_at":"2026-04-17T05:03:34.655Z","repository":{"id":299016105,"uuid":"518575252","full_name":"PLCoster/fcc_datavis_project3","owner":"PLCoster","description":"FreeCodeCamp Data Visualisation Project 3: Heat Map","archived":false,"fork":false,"pushed_at":"2022-08-19T18:41:13.000Z","size":2155,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-14T06:32:58.311Z","etag":null,"topics":["d3-visualization","react","webpack"],"latest_commit_sha":null,"homepage":"https://plcoster.github.io/fcc_datavis_project3/","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/PLCoster.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,"zenodo":null}},"created_at":"2022-07-27T18:44:27.000Z","updated_at":"2022-07-29T23:24:49.000Z","dependencies_parsed_at":"2025-06-14T06:33:02.062Z","dependency_job_id":"f2482735-cc95-43a5-b252-9e0de1a171d9","html_url":"https://github.com/PLCoster/fcc_datavis_project3","commit_stats":null,"previous_names":["plcoster/fcc_datavis_project3"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/PLCoster/fcc_datavis_project3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_datavis_project3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_datavis_project3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_datavis_project3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_datavis_project3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PLCoster","download_url":"https://codeload.github.com/PLCoster/fcc_datavis_project3/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_datavis_project3/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261669008,"owners_count":23192362,"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":["d3-visualization","react","webpack"],"created_at":"2025-06-24T12:07:07.331Z","updated_at":"2026-04-17T05:03:34.602Z","avatar_url":"https://github.com/PLCoster.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Free Code Camp: Data Visualisation Project 3 - Heat Map\n\n## Interactive Global Monthly Temperature Heat Map\n\nThe aim of this project was to build a small web app and data visualisation with functionality similar to: https://codepen.io/freeCodeCamp/full/JEXgeY\n\nThe project was built using the following technologies:\n\n- **HTML**\n- **JavaScript** with **[Node.js](https://nodejs.org/en/) / [NPM](https://www.npmjs.com/)** for package management\n- **[React](https://reactjs.org/)** for application view with React Hooks to handle the application state\n- **[D3](https://d3js.org/)** to generate the SVG Heat Map from the API data\n- **[Bootstrap](https://getbootstrap.com/)** for styling with some custom **SASS / SCSS**\n- **[FontAwesome](https://fontawesome.com/)** for icons\n- **[webpack](https://webpack.js.org/)** to bundle React / JS / Styles and utilise development server\n\n### Project Requirements:\n\n- **User Story #1:** My heat map should have a title with a corresponding `id=\"title\"`.\n\n- **User Story #2:** My heat map should have a description with a corresponding `id=\"description\"`.\n\n- **User Story #3:** My heat map should have an x-axis with a corresponding `id=\"x-axis\"`.\n\n- **User Story #4:** My heat map should have a y-axis with a corresponding `id=\"y-axis\"`.\n\n- **User Story #5:** My heat map should have `rect` elements with a `class=\"cell\"` that represent the data.\n\n- **User Story #6:** There should be at least 4 different fill colors used for the cells.\n\n- **User Story #7:** Each cell will have the properties `data-month`, `data-year`, `data-temp` containing their corresponding `month`, `year`, and `temperature` values.\n\n- **User Story #8:** The `data-month`, `data-year` of each cell should be within the range of the data.\n\n- **User Story #9:** My heat map should have cells that align with the corresponding month on the y-axis.\n\n- **User Story #10:** My heat map should have cells that align with the corresponding year on the x-axis.\n\n- **User Story #11:** My heat map should have multiple tick labels on the y-axis with the full month name.\n\n- **User Story #12:** My heat map should have multiple tick labels on the x-axis with the years between 1754 and 2015.\n\n- **User Story #13:** My heat map should have a legend with a corresponding `id=\"legend\"`.\n\n- **User Story #14:** My legend should contain `rect` elements.\n\n- **User Story #15:** The `rect` elements in the legend should use at least 4 different fill colors.\n\n- **User Story #16:** I can mouse over an area and see a tooltip with a corresponding `id=\"tooltip\"` which displays more information about the area.\n\n- **User Story #17:** My tooltip should have a `data-year` property that corresponds to the `data-year` of the active area.\n\n### Project Writeup:\n\nFor the third Free Code Camp: Data Visualisation Project, I decided to incorporate the Heat Map inside a small React app, bundled using webpack. After the chart data has been fetched (using the [axios](https://www.npmjs.com/package/axios) HTTP client), the Heat Map is built using the low-level D3 SVG API, through correctly positioned and coloured `\u003crect\u003e` elements.\n\nGoing beyond the required User Stories outlined above, the plot generated by the app is responsive to changes in the browser window size. A `window.onresize` event listener is added using a `useEffect` hook inside the `HeatMapContainer` component. When the window size changes, the graph container width is passed as props to the `HeatMap` component, which causes the D3 SVG to be re-rendered according to the available size.\n\nIn addition, the displayed tool-tip when the cursor is placed on a data bar in the graph adjusts its positioning to ensure it is always contained inside the graph area, and not hidden off screen.\n\n### Project Files:\n\n- `index.html` - is a simple HTML template to mount the React appliaction onto. Webpack adds the scripts required to load the JS bundle when the project is built.\n\n- `index.jsx` - the entry point to the application, it imports `bootstraps` script and the style sheet, and renders the React root component `App` onto the page.\n\n- `styles.scss` - the style sheet for the app, that imports bootstrap styles and contains custom styles for the app.\n\n- `helpers/heatmapBuilder.js` - contains a set of functions that build the Heat Map and append it to a desired DOM element. Scaling and positioning of `\u003crect\u003e` elements in the Heat Map is aided using D3's `scaleLinear()` functionality. Similarly, the z-axis color scale is generated using D3's `scaleSequential()` and `interpolator()` functionalities.\n\n- `/docs` - contains a copy of the built app files for deployment via github-pages\n\n#### Components\n\n- `App.jsx` is a simple container component for the `Navbar` and `HeatMapContainer` components:\n\n  - `Navbar.jsx` is a presentational navbar component, providing links to other projects / sites.\n\n  - `HeatMapContainer.jsx` - after mounting, this component uses two `useEffect` hooks. One of these hooks uses `axios` to fetch the data for the Heat Map, and upon receiving the data, passes it to the `HeatMap` component. The other hook sets up the `window.onresize` event listener, listening for window resize events and then passing the current width of the `#graph-container` element to the `HeatMap` component so it knows the size of plot to create. This component also has a state variable `graphOpacity`, the setter function for which is also passed to `HeatMap` so that it can make the `main` element visible after the graph has been fully rendered.\n\n    - `HeatMap.jsx` - this component uses a `useEffect` hook to render the Heat Map SVG after the component mounts, and also whenever the `plotWidth` prop passed to it by `HeatMapContainer` changes. The HeatMap is built and mounted to the `#graph-container` element by the functions in `helpers/heatmapBuilder.js`. After building the graph, the opacity of the `main` element is set to 1 using the `setGraphOpacity` dispatch function, making the graph visible. An on:hover tooltip is also added to the graph - it is a small div element which has its position, visibility and contents adjusted dynamically based on the current mouse position, using the `mouseover` event on Heat Map cells.\n\n### Usage\n\nRequires Node.js / NPM in order to install required packages. After downloading the repo, install required dependencies with:\n\n`npm install`\n\nThe webpack development server can then be started with:\n\n`npm run dev`\n\nThe development server can then be viewed at `http://localhost:8080/` in the browser.\n\nA production build can be created in the `dist/` folder by running:\n\n`npm run build`\n\nTo view the production build, open the output html file in the dist folder in your browser, or serve it using Live Server in VSCode.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplcoster%2Ffcc_datavis_project3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplcoster%2Ffcc_datavis_project3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplcoster%2Ffcc_datavis_project3/lists"}