{"id":28974853,"url":"https://github.com/plcoster/fcc_datavis_project2","last_synced_at":"2026-04-10T20:48:25.308Z","repository":{"id":46451930,"uuid":"514371311","full_name":"PLCoster/fcc_datavis_project2","owner":"PLCoster","description":"FreeCodeCamp Data Visualisation Project 2: Scatterplot Graph","archived":false,"fork":false,"pushed_at":"2022-08-19T17:53:33.000Z","size":2226,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-14T06:32:57.772Z","etag":null,"topics":["d3","webpack"],"latest_commit_sha":null,"homepage":"https://plcoster.github.io/fcc_datavis_project2/","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}},"created_at":"2022-07-15T18:41:15.000Z","updated_at":"2022-07-29T23:22:54.000Z","dependencies_parsed_at":"2022-09-15T21:52:13.394Z","dependency_job_id":null,"html_url":"https://github.com/PLCoster/fcc_datavis_project2","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/PLCoster/fcc_datavis_project2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_datavis_project2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_datavis_project2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_datavis_project2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_datavis_project2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PLCoster","download_url":"https://codeload.github.com/PLCoster/fcc_datavis_project2/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_datavis_project2/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","webpack"],"created_at":"2025-06-24T12:07:09.312Z","updated_at":"2026-04-10T20:48:20.276Z","avatar_url":"https://github.com/PLCoster.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Free Code Camp: Data Visualisation Project 2 - Scatterplot Graph\n\n## Interactive Alpe d'Heuz Ascent Time Scatter Plot\n\nThe aim of this project was to build a small web app with functionality similar to: https://codepen.io/freeCodeCamp/full/bgpXyK\n\nThe project was built using the following technologies:\n\n- **HTML**\n- **JavaScript**\n- **[D3](https://d3js.org/)** to generate the SVG scatter plot from the API data\n- **[Bootstrap](https://getbootstrap.com/)** for styling with some custom **SASS**\n- **[Bootstrap Icons](https://icons.getbootstrap.com/)** for logo icons\n- **[webpack](https://webpack.js.org/)** to bundle JS / Styles and utilise development server\n\n### Project Requirements:\n\n- **User Story #1:** I can see a title element that has a corresponding `id=\"title\"`.\n\n- **User Story #2:** I can see an x-axis that has a corresponding `id=\"x-axis\"`.\n\n- **User Story #3:** I can see a y-axis that has a corresponding `id=\"y-axis\"`.\n\n- **User Story #4:** I can see dots, that each have a class of `dot`, which represent the data being plotted.\n\n- **User Story #5:** Each dot should have the properties `data-xvalue` and `data-yvalue` containing their corresponding `x` and `y` values.\n\n- **User Story #6:** The `data-xvalue` and `data-yvalue` of each dot should be within the range of the actual data and in the correct data format. For `data-xvalue`, integers (full years) or `Date` objects are acceptable for test evaluation. For `data-yvalue` (minutes), use `Date` objects.\n\n- **User Story #7:** The `data-xvalue` and its corresponding dot should align with the corresponding point/value on the x-axis.\n\n- **User Story #8:** The `data-yvalue` and its corresponding dot should align with the corresponding point/value on the y-axis.\n\n- **User Story #9:** I can see multiple tick labels on the y-axis with `%M:%S` time format.\n\n- **User Story #10:** I can see multiple tick labels on the x-axis that show the year.\n\n- **User Story #11:** I can see that the range of the x-axis labels are within the range of the actual x-axis data.\n\n- **User Story #12:** I can see that the range of the y-axis labels are within the range of the actual y-axis data.\n\n- **User Story #13:** I can see a legend containing descriptive text that has `id=\"legend\"`.\n\n- **User Story #14:** 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 #15:** My tooltip should have a `data-year` property that corresponds to the `data-xvalue` of the active area.\n\n### Project Writeup:\n\nFor thee second Free Code Camp: Data Visualisation Project, I created the scatter plot using the low-level D3 SVG API, building the plot by adding correctly positioned and coloured`\u003ccircle\u003e` elements. The chart data is fetched from the source using the `fetch` API, with fallback to a saved copy of the data if the request fails. Once the data is received, the plot is generated.\n\nGoing beyond the required User Stories outlined above, the plot generated by the app is responsive to changes in the browser window size. Using the `window.onresize` event listener, when the window size changes, the graph is re-rendered to fit in the given screen size (down to a minimum useful size of the graph). In 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\nFurthermore, as there are several overlapping data points on the graph, when mousing over a data point, the app checks for any other data points lying at the same position, and displays tool-tip info for every data-point at the cursor position. When hovering over a data point, the data point and all other data points associated with the same cyclist are enlarged, to allow the user to more easily identify cyclists with multiple times on the chart.\n\n### Project Files:\n\n- `index.html` - is a simple HTML template to mount the scatter plot SVG onto. Webpack adds the scripts required to load the JS bundle when the project is built.\n\n- `index.js` - the entry point to the application, it first requests the required plot data using the `fetchData` helper function, and once it is received, builds the scatter plot by calling the `buildScatterPlot` helper function. It also sets up the `window.onresize` event listener to re-render the plot when the browser window is resized.\n\n  - `helpers/fetchData.js` contains the `fetchData` helper function, which returns a promise that resolves when the requested data is received. If there is an error during the data request, the promise resolves with a backup hard-copy of the data (`assets/data.json`) instead.\n  - `helpers/buildScatterPlot.js` builds and appends the SVG scatter plot to the `.graph-container` element of the page. Scaling and positioning of elements in the bar chart is aided using D3's `scaleLinear()` functionality. 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 `.dot` elements to trigger these changes.\n\n- `styles.scss` - the main style sheet for the app, that imports both bootstrap / bootstrap-icon styles as well as custom styles from `scss/custom.scss`\n\n- `/docs` - contains a copy of the built app files for deployment via github-pages\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_project2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplcoster%2Ffcc_datavis_project2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplcoster%2Ffcc_datavis_project2/lists"}