{"id":17124375,"url":"https://github.com/wittline/d3js-dashboard","last_synced_at":"2025-07-13T21:07:23.598Z","repository":{"id":40863579,"uuid":"227028091","full_name":"Wittline/D3JS-Dashboard","owner":"Wittline","description":"Building Responsive DashBoard with D3.js and ASP.NET MVC from scratch (SQL SERVER - SSIS - API REST)","archived":false,"fork":false,"pushed_at":"2023-05-31T18:57:01.000Z","size":14363,"stargazers_count":13,"open_issues_count":7,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T06:11:23.639Z","etag":null,"topics":["api-rest","asp-net-mvc","d3-visualization","d3js","datavisualization","javascript","mvc-pattern","responsive-design","sqlserver","ssis"],"latest_commit_sha":null,"homepage":"https://wittline.github.io/D3JS-Dashboard/","language":"C#","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/Wittline.png","metadata":{"files":{"readme":"docs/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,"zenodo":null}},"created_at":"2019-12-10T04:21:06.000Z","updated_at":"2024-06-04T14:39:51.000Z","dependencies_parsed_at":"2025-04-13T06:10:30.645Z","dependency_job_id":"8df7c078-b67b-41a4-ad3c-0eb49f2306b9","html_url":"https://github.com/Wittline/D3JS-Dashboard","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Wittline/D3JS-Dashboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wittline%2FD3JS-Dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wittline%2FD3JS-Dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wittline%2FD3JS-Dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wittline%2FD3JS-Dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wittline","download_url":"https://codeload.github.com/Wittline/D3JS-Dashboard/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wittline%2FD3JS-Dashboard/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265205691,"owners_count":23727511,"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":["api-rest","asp-net-mvc","d3-visualization","d3js","datavisualization","javascript","mvc-pattern","responsive-design","sqlserver","ssis"],"created_at":"2024-10-14T18:42:29.728Z","updated_at":"2025-07-13T21:07:23.589Z","avatar_url":"https://github.com/Wittline.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n\n# Building Responsive DashBoard with D3.js and ASP.NET MVC from scratch (SQL SERVER - SSIS - API REST)\nThis project explains the creation of an interactive and responsive dashboard for any device, its development was separated into several stages and each of them is explained below:\n\n\n**Click on the image below to watch the video:**\n\n\n[![Youtube video](https://wittline.github.io/D3JS-Dashboard/images/miniatura.png)](https://www.youtube.com/watch?v=z0aLLAW52oA)\n\n\n## **Designing a data model**\nThe data model was created using a SQLSERVER database, There are three fact tables Fact_produccion, Fact_reservas and Fact_consumo sharing the same dimension \"tiempo\" and \"paises\" this data warehouse schema architecture is also called galaxy or Constellation. The database was not included in this repository, you can create it by following the steps on the youtube video from minute **1:55** to minute **5:00**\n\n![alt text](https://wittline.github.io/D3JS-Dashboard/images/dwh.PNG)\n\n## **Designing and creating an ETL process**\n\n![alt text](https://wittline.github.io/D3JS-Dashboard/images/ETL.PNG)\n\nThe goal of this stage is to build a ETL process that reads the .csv files and loads them into the database that was designed and created in the previous phase, **the tool choosed to create this ETL process is SSIS and this project was already included in this repository**, the database will need objects that were not included in this repository, such as the stored procedures that the ETL process calls, you can add them to your database by following the steps described in the youtube video from minute: **8:20** to minute **14:00** and from minute **15:50** and **18:54** This database must include the stored procedures called by the API-REST described in the next stage.\n\n![alt text](https://wittline.github.io/D3JS-Dashboard/images/sp.PNG)\n\n## **Creating the API-REST with ASP.NET MVC API**\n\n![alt text](https://wittline.github.io/D3JS-Dashboard/images/com.PNG)\n\n![alt text](https://wittline.github.io/D3JS-Dashboard/images/mvc.jpg)\n\nThe goal of this stage is to highlight that all the calls coming from the dashboard are through the filters, and each event on these filters makes a request to a REST API. in this way, the back-end code is separated from the front-end. **The API code was added to this repository** and you can see how it was developed in the youtube video from the minute **19:00** to the minute **25:15**\n\n![alt text](https://wittline.github.io/D3JS-Dashboard/images/apis.PNG)\n\n## **Creating the interactive Dashboard with ASP.NET MVC**\n\n**The ASP.NET Web MVC project was added to this repository**, the steps taken in its development can be seen in the youtube video from minute **25:20** to minute **44:15**, this represents the last phase of the project. In the development of this, a group of .js files are created that are responsible for orchestrating all the events cming from the filters and communicating the responses from the requests made to the API-REST, providing the data to the D3.js framework.\n\n```\n\nvar yf = 2000,\nyt = 2016,\nurlReserves = 'http://localhost:8080/api/Reserves/reserves',\nurlReservesRegion = 'http://localhost:8080/api/Reserves/reservesByRegion',\nurlReservesCountry = 'http://localhost:8080/api/Reserves/reservesByCountry',\nurlProduction = 'http://localhost:8080/api/Production/production',\nurlProductionRegion = 'http://localhost:8080/api/Production/productionByRegion',\nurlProductionCountry = 'http://localhost:8080/api/Production/productionByCountry',\nurlConsumption = 'http://localhost:8080/api/Consume/consume',\nurlConsumptionRegion = 'http://localhost:8080/api/Consume/consumeByRegion',\nurlConsumptionCountry = 'http://localhost:8080/api/Consume/consumeByCountry';\n\n\n$(document).ready(function () {\n\n    $('#sld').slider()\n             .on('slideStop', function (ev) {\n                 yf = parseInt(ev.value[0]);\n                 yt = parseInt(ev.value[1]);\n                 updateCharts();\n             });\n\n    updateCharts();\n});\n\nupdateCharts = function ()\n{\n\n    obj = JSON.stringify({ yearFrom: yf, yearTo: yt, by: '' });\n\n    var dsb = new DashboardBuilder();\n    dsb.buildDashBoard({\n        charts: [{\n            type: 'pie', source: urlReserves, params: obj, container: 'pieChart_Reserves',\n            charts: [{\n                type: 'bar', source: urlReservesRegion, params: obj, container: 'barChart_Reserves',\n                charts: [{ type: 'line', source: urlReservesCountry, params: obj, container: 'lineChart_Reserves' }]\n            }]\n        },\n        {\n            type: 'pie', source: urlProduction, params: obj, container: 'pieChart_Production',\n            charts: [{\n                type: 'bar', source: urlProductionRegion, params: obj, container: 'barChart_Production',\n                charts: [{ type: 'line', source: urlProductionCountry, params: obj, container: 'lineChart_Production' }]\n            }]\n        },\n        {\n            type: 'pie', source: urlConsumption, params: obj, container: 'pieChart_Consumption',\n            charts: [{\n                type: 'bar', source: urlConsumptionRegion, params: obj, container: 'barChart_Consumption',\n                charts: [{ type: 'line', source: urlConsumptionCountry, params: obj, container: 'lineChart_Consumption' }]\n            }]\n        }\n        ]\n    });\n}\n\n```\n\n```\nvar DashboardBuilder = function ()\n{\n  \n    this.buildDashBoard = function (ctx)\n    {       \n        var _this = this;\n        if (!typeof ctx == 'object') return false;\n\n        if (ctx.hasOwnProperty('charts'))\n        {\n            var chr = ctx['charts'];\n            for (var p = 0; p \u003c chr.length; p++)\n            {\n                switch (chr[p].type) {\n                     \n                    case 'pie':\n                        var pc = new pieChart(chr[p].container,\n                                              chr[p].source,\n                                              chr[p].params,\n                                              chr[p].charts);\n                        pc.buildChart();\n                        break;\n                    case 'bar':\n                        break;\n                    case 'line':\n                        break;\n                }\n            }\n\n        }\n\n    }\n}\n\n```\n\n# Contributing and Feedback\nAny ideas or feedback about this repository?. Help me to improve it.\n\n# Authors\n- Created by \u003ca href=\"https://www.linkedin.com/in/ramsescoraspe\"\u003e\u003cstrong\u003eRamses Alexander Coraspe Valdez\u003c/strong\u003e\u003c/a\u003e\n- Created on 2016\n\n# License\nThis project is licensed under the terms of the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwittline%2Fd3js-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwittline%2Fd3js-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwittline%2Fd3js-dashboard/lists"}