{"id":16213847,"url":"https://github.com/solygambas/d3-firebase","last_synced_at":"2026-04-11T22:02:45.698Z","repository":{"id":102301033,"uuid":"365497912","full_name":"solygambas/d3-firebase","owner":"solygambas","description":"5 small projects to understand D3.js basics using Firebase and Materialize.","archived":false,"fork":false,"pushed_at":"2022-05-01T05:05:10.000Z","size":149,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-13T23:34:11.743Z","etag":null,"topics":["d3","d3js","data-visualization","firebase","firestore","javascript","materialize","materializecss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/solygambas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-05-08T11:32:33.000Z","updated_at":"2022-04-30T05:02:14.000Z","dependencies_parsed_at":"2023-05-01T20:15:30.908Z","dependency_job_id":null,"html_url":"https://github.com/solygambas/d3-firebase","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/solygambas%2Fd3-firebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solygambas%2Fd3-firebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solygambas%2Fd3-firebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solygambas%2Fd3-firebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/solygambas","download_url":"https://codeload.github.com/solygambas/d3-firebase/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247737781,"owners_count":20987721,"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","d3js","data-visualization","firebase","firestore","javascript","materialize","materializecss"],"created_at":"2024-10-10T11:08:47.070Z","updated_at":"2026-04-11T22:02:40.666Z","avatar_url":"https://github.com/solygambas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Build Data Visualizations with D3.js \u0026 Firebase\n\n5 small projects to understand D3.js basics using Firebase and Materialize.\n\n| #   | Project                          | Description                                                   |\n| --- | -------------------------------- | ------------------------------------------------------------- |\n| 01  | [**Bar Chart**](#barchart)       | A simple bar graph to understand D3.js basics using Firebase. |\n| 02  | [**Pie Chart**](#piechart)       | A budget planner displaying a donut chart with Materialize.   |\n| 03  | [**Line Graphs**](#linegraphs)   | A fitness tracker displaying line graphs.                     |\n| 04  | [**Bubble Chart**](#bubblechart) | A circle packing diagram to learn data hierarchy.             |\n| 05  | [**Tree Diagram**](#treediagram) | A hierarchical chart using Materialize.                       |\n\n## \u003ca name=\"barchart\"\u003e\u003c/a\u003e1) Bar Chart\n\nA simple bar graph to understand D3.js basics using Firebase.\n\n[See bar-chart folder](bar-chart)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"bar-chart\"\u003e\n        \u003cimg src=\"bar-chart/screenshot.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- creating simple SVG shapes and appending them to the DOM with D3.js.\n- changing attributes with .attr() and grouping elements together.\n- joining JSON data to elements and adding virtual elements to the DOM.\n- using linear and band scales with min, max and extent.\n- creating a bar chart: centering a graph, adding axes and formatting ticks.\n- creating a Firestore database, setting up the Firebase config and getting data from Firestore.\n- understanding the D3 update pattern and using Firestore realtime data updates.\n- adding D3 transitions and custom tweens.\n\n## \u003ca name=\"piechart\"\u003e\u003c/a\u003e2) Pie Chart\n\nA budget planner displaying a donut chart with Materialize.\n\n[See pie-chart folder](pie-chart)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"pie-chart\"\u003e\n        \u003cimg src=\"pie-chart/screenshot.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- creating an HTML template with Materialize.\n- handling a form and adding data to Firestore.\n- setting up a pie chart and generating arc paths with D3.\n- generating colors with ordinal scales.\n- customizing arc tween and adding legends with d3-legend.\n- handling events: mouseOver, mouseOut and click.\n- adding tooltips with d3-v6-tip.\n\n## \u003ca name=\"linegraphs\"\u003e\u003c/a\u003e3) Line Graphs\n\nA fitness tracker displaying line graphs.\n\n[See line-graphs folder](line-graphs)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"line-graphs\"\u003e\n        \u003cimg src=\"line-graphs/screenshot.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- creating an HTML template with Materialize.\n- handling DOM events and adding data to Firestore.\n- using time scales and formatting dates with D3.\n- filtering data by activity and sorting data by date.\n- generating line paths and adding data point hover effect.\n\n## \u003ca name=\"bubblechart\"\u003e\u003c/a\u003e4) Bubble Chart\n\nA circle packing diagram to learn data hierarchy.\n\n[See bubble-chart folder](bubble-chart)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"bubble-chart\"\u003e\n        \u003cimg src=\"bubble-chart/screenshot.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- handling data hierarchy in D3 with stratify() method.\n- adding value property to nodes with sum().\n- creating circle packs with pack() and descendants().\n- displaying tags in node leaves.\n- generating colors according to node depth.\n\n## \u003ca name=\"treediagram\"\u003e\u003c/a\u003e5) Tree Diagram\n\nA hierarchical chart using Materialize.\n\n[See tree-diagram folder](tree-diagram)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"tree-diagram\"\u003e\n        \u003cimg src=\"tree-diagram/screenshot.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- creating an HTML template and a modal with Materialize.\n- handling a form and adding data to Firestore.\n- generating a tree diagram in D3 with stratify() and tree() methods.\n- displaying hierarchical nodes and links.\n\nBased on [Build Data Visualizations with D3.js \u0026 Firebase](https://www.udemy.com/course/build-data-uis-with-d3-firebase/) by Shaun Pelling - The Net Ninja (2019)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolygambas%2Fd3-firebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolygambas%2Fd3-firebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolygambas%2Fd3-firebase/lists"}