{"id":17756928,"url":"https://github.com/graphieros/data-visualisation","last_synced_at":"2025-09-07T18:42:53.928Z","repository":{"id":129194346,"uuid":"211891777","full_name":"graphieros/data-visualisation","owner":"graphieros","description":"data visualisation solutions in vanilla js","archived":false,"fork":false,"pushed_at":"2019-12-28T16:49:50.000Z","size":2959,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-28T07:45:01.045Z","etag":null,"topics":["data-analysis","data-visualization","pure-javascript","svg-manipulating"],"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/graphieros.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":"2019-09-30T15:25:26.000Z","updated_at":"2024-04-28T07:45:01.045Z","dependencies_parsed_at":"2023-03-25T11:12:08.122Z","dependency_job_id":null,"html_url":"https://github.com/graphieros/data-visualisation","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/graphieros%2Fdata-visualisation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fdata-visualisation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fdata-visualisation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fdata-visualisation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/graphieros","download_url":"https://codeload.github.com/graphieros/data-visualisation/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fdata-visualisation/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259098642,"owners_count":22804792,"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":["data-analysis","data-visualization","pure-javascript","svg-manipulating"],"created_at":"2024-10-26T16:10:41.967Z","updated_at":"2025-06-10T15:08:35.302Z","avatar_url":"https://github.com/graphieros.png","language":"JavaScript","readme":"# data visualisation\nPresented from recent to oldest.\npersonal ranking:\n\n**** library material\n\n*** copy paste material\n\n**  usable\n\n\\*   noob beginnings, cluncky\n\n\u003chr/\u003e\n\nradarChart2 ***\n\u003e a radar chart built with CANVAS and SVG that allow event handling. Fully scalable for any data set (from 3 to n).\n\u003ccode\u003e[code](https://github.com/graphieros/data-visualisation/blob/master/js/radarChart2.js)\u003c/code\u003e\n![screenShot](https://github.com/graphieros/data-visualisation/blob/master/pics/radarChart2.png)\n\nradarChart ***\n\u003e a radar chart built with CANVAS, fully scalable for any data set (from 3 to n). Next step is to build the same using SVG, to add event handlers.\n\u003ccode\u003e[code](https://github.com/graphieros/data-visualisation/blob/master/js/radarChart.js)\u003c/code\u003e\n![screenShot](https://github.com/graphieros/data-visualisation/blob/master/pics/radarChart.png)\n\nscatterPlot.js ***\n\u003e a scatter plot chart build with DIVS and catchy event handlers. Built to analyze three sets of data (quantity of products sold, quantity of treatments performed, and the first over the second). For data sets from 5 to 100 items. (if you choose a data set of 10000 you'll get pink kaviar as a result).\n\u003ccode\u003e[code](https://github.com/graphieros/data-visualisation/blob/master/js/scatterPlot.js)\u003c/code\u003e\n![screenShot](https://github.com/graphieros/data-visualisation/blob/master/pics/scatterPlot.png)\n\nbutterflyChart.js ***\n\u003e an optimized butterfly chart build with DIVS. Light, responsive, and prone to easy event handling. CSS grid used in JS to make it scalable. Ideal for data sets from 4 to 20 items, to evaluate progression of N vs N-1 data for several departments for example.\n\u003ccode\u003e[code](https://github.com/graphieros/data-visualisation/blob/master/js/butterflyChart.js)\u003c/code\u003e\n![screenShot](https://github.com/graphieros/data-visualisation/blob/master/pics/butterflyChart.png)\n\nhistoDiv.js ***\n\u003e an optimized bar chart built with DIVS. Light, responsive, and prone to easy event handling. CSS grid used in JS to make it scalable. Ideal for data sets of 2 to 36 items (weeks, months, years...).\n\u003ccode\u003e[code](https://github.com/graphieros/data-visualisation/blob/master/js/histoDiv.js)\u003c/code\u003e\n\nwaffleChart.js ***\n\u003e generates 3 series of random data and displays a waffle chart built with DIVS, under which are also 3 line charts for each data series. Pretty proud of this one :)\n\u003ccode\u003e[code](https://github.com/graphieros/data-visualisation/blob/master/js/waffleChart.js)\u003c/code\u003e\n![screenShot](https://github.com/graphieros/data-visualisation/blob/master/pics/waffleChart.png)\n\nsvgChart.js **\n\u003e generates random data and displays a line chart built with SVG, with event handlers to highlight data when a plot is hovered, or to highlight a plot when data is hovered.\n\u003ccode\u003e[code](https://github.com/graphieros/data-visualisation/blob/master/js/svgChart.js)\u003c/code\u003e\n\ndivChart.js *\n\u003e generates random data and displays a histogram chart built with DIV elements, allowing easy styling with css. Hovering each histogram will display its data.\n\u003ccode\u003e[code](https://github.com/graphieros/data-visualisation/blob/master/js/divChart.js)\u003c/code\u003e\n\ngraphBar2.js *\n\u003e generates random monthly data for a current period and a previous period, and displays a histogram chart on a canvas.\n\u003ccode\u003e[code](https://github.com/graphieros/data-visualisation/blob/master/js/graphBar2.js)\u003c/code\u003e\n\nmonthChart.js *\n\u003e generates random monthly data for a current period and a previous period, and displays a line chart on a canvas.\n\u003ccode\u003e[code](https://github.com/graphieros/data-visualisation/blob/master/js/monthChart.js)\u003c/code\u003e\n\nsortGraphLine.js *\n\u003e creates a line chart using SVG coordinates based on data from a HTML table. Checkboxes allow to toggle opacity of the lines, for a better read of a given line. Not sorted by value (historic evolution). Two lines are used for this snippet. However code appears to nest too many repetitions. Need to find a way to avoid that.\n\u003ccode\u003e[code](https://github.com/graphieros/data-visualisation/blob/master/js/sortGraphLine.js)\u003c/code\u003e\n\ngraphLine.js *\n\u003e creates a line chart using SVG coordinates based on data from a HTML table. Here data is not sorted by value as it must represent historic evolution.\n\u003ccode\u003e[code](https://github.com/graphieros/data-visualisation/blob/master/js/graphLine.js)\u003c/code\u003e\n\ngraphBar.js *\n\u003e manipulates height of divs depending on data sorted from a HTML table. It displays a bar chart sorted from smallest to highest value.\n\u003ccode\u003e[code](https://github.com/graphieros/data-visualisation/blob/master/js/graphBar.js)\u003c/code\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphieros%2Fdata-visualisation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgraphieros%2Fdata-visualisation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphieros%2Fdata-visualisation/lists"}