{"id":28974826,"url":"https://github.com/plcoster/fcc_datavis_project5","last_synced_at":"2026-04-17T03:01:34.715Z","repository":{"id":299016107,"uuid":"525526029","full_name":"PLCoster/fcc_datavis_project5","owner":"PLCoster","description":"FreeCodeCamp Data Visualisation Project 5: Treemap Diagram","archived":false,"fork":false,"pushed_at":"2022-08-19T19:05:49.000Z","size":762,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-14T06:32:58.372Z","etag":null,"topics":["d3-visualization","nextjs","react"],"latest_commit_sha":null,"homepage":"https://plcoster.github.io/fcc_datavis_project5/","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-08-16T20:03:10.000Z","updated_at":"2022-08-18T18:33:01.000Z","dependencies_parsed_at":"2025-06-14T06:33:03.125Z","dependency_job_id":"21dfab5f-e88b-43e5-b0f6-d71e8171f6ec","html_url":"https://github.com/PLCoster/fcc_datavis_project5","commit_stats":null,"previous_names":["plcoster/fcc_datavis_project5"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/PLCoster/fcc_datavis_project5","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_datavis_project5","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_datavis_project5/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_datavis_project5/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_datavis_project5/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PLCoster","download_url":"https://codeload.github.com/PLCoster/fcc_datavis_project5/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_datavis_project5/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","nextjs","react"],"created_at":"2025-06-24T12:07:07.187Z","updated_at":"2026-04-17T03:01:29.653Z","avatar_url":"https://github.com/PLCoster.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Free Code Camp: Data Visualisation Project 5 - Treemap Diagram\n\n### Interactive Game Sales / Movie Box Office / Kickstarter Pledges Treemap\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/KaNGNR\n\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 Treemap from the data, using the`d3.hierachy()` and `d3.treemap()` APIs.\n- **[React-Bootstrap](https://react-bootstrap.github.io/)** for react components with **[Bootstrap](https://getbootstrap.com/)** styles, along with some custom CSS\n- **[Bootstrap Icons](https://icons.getbootstrap.com/)** for icons\n- **[Next.js](https://nextjs.org/)** as a React Framework to develop and build the project\n\n### Project Requirements\n\n- **User Story #1:** My tree map should have a title with a corresponding `id=\"title\"`.\n\n- **User Story #2:** My tree map should have a description with a corresponding `id=\"description\"`.\n\n- **User Story #3:** My tree map should have `rect` elements with a corresponding `class=\"tile\"` that represent the data.\n\n- **User Story #4:** There should be at least 2 different fill colors used for the tiles.\n\n- **User Story #5:** Each tile should have the properties `data-name`, `data-category`, and `data-value` containing their corresponding `name`, `category`, and `value`.\n\n- **User Story #6:** The area of each tile should correspond to the `data-value` amount: tiles with a larger `data-value` should have a bigger area.\n\n- **User Story #7:** My tree map should have a legend with corresponding `id=\"legend\"`.\n\n- **User Story #8:** My legend should have `rect` elements with a corresponding `class=\"legend-item\"`.\n\n- **User Story #9:** The `rect` elements in the legend should use at least 2 different fill colors.\n\n- **User Story #10:** 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 #11:** My tooltip should have a `data-value` property that corresponds to the `data-value` of the active area.\n\n### Project Writeup:\n\nFor the fifth Free Code Camp: Data Visualisation Project, I decided to build the Treemap inside a small Next.js app. The final project build is a static (i.e. serverless) website built in React, with application state controlled using React Hooks (`useState`, `useEffect`, `useRef`).\n\nGoing beyond the required User Stories above, uses can switch between three datasets and view a corresponding Treemap for each one. When a dataset is selected by clicking the corresponding button, the desired dataset is fetched (if not previously loaded), and then the Treemap is built.\n\nA `window.onresize` event listener is added using a `useEffect` hook inside the `TreeMapContainer` component. When the window size changes, the plot container width is passed as props to the `TreeMap` component, which causes the D3 SVG to be re-rendered according to the available size. Details of the Treemap (font sizes, spacing etc) are adjusted based on the size available to render the Treemap.\n\n### Project Files:\n\n- `/public` - this folder contains all public content for the app, such as favicon images and the web manifest.\n\n- `/pages` - in the Next.js framework, pages are associated with routes in the app based on the file name. In this app there is only a single route (`/`), and the React components that build the page are in `index.js`.\n\n  - the `_app.js` page file is a special component that wraps every other page. In this project this just renders the `NavBar` component on every page, and adds in the FCC testing script.\n  - `index.js` is the only page in this application, it renders the `Timer` component.\n  - `404.js` is a custom error page that is set to redirect users immediately to the app if reached.\n\n- `/components/helpers/buildTreeMap.js` - contains a set of functions that build the Treemap and append it to a desired DOM element. Rendering the Treemap us done using `\u003crect\u003e` elements and D3's `hierachy()` and `treemap()` functionalities. Tiles are color coded by their parent category using D3's `scaleOrdinal()` API.\n\nAn `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 Treemap `.tile-group` elements.\n\n- `/styles` contains a global style sheet for the application.\n\n### Components:\n\n- `NavBar.js` is a presentational navbar component, providing links to other projects / sites.\n\n- `TreeMapContainer.js` - This component renders the dataset-switching buttons, and the `TreeMap` component. After mounting, this component uses two `useEffect` hooks. One of these hooks is responsible for loading / updating the current dataset to be displayed, and is triggered whenever the `currentDatasetName` state is changed (by clicking on a dataset button). The other hook sets up the `window.onresize` event listener, listening for window resize events and then passing the current width of the `.appcontainer` element to the `TreeMap` component so it knows the size of plot to create.\n\n  - `TreeMap.js` - this component uses a `useEffect` hook to render the Treemap SVG after the component mounts, and also whenever either the dataset is switched (`plotInfo` prop changes) or the `containerWidth` prop changes. The Treemap is built and mounted to the `#treemap-container` element using D3 by the functions in `helpers/buildTreeMap.js`. After building the graph for the first time, the opacity of the `.appcontainer` element is set to 1 using the `setContainerOpacity` dispatch function, making the graph visible.\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 Next development server can then be started with:\n\n`npm run dev`\n\nThe development can then be viewed at `http://localhost:3000/` in the browser.\n\nA static production build can be created in the `out/` folder using:\n\n`npm run build`\n\nThis production build can then be served using:\n\n`npm run start`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplcoster%2Ffcc_datavis_project5","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplcoster%2Ffcc_datavis_project5","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplcoster%2Ffcc_datavis_project5/lists"}