Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/graphieros/data-visualisation
data visualisation solutions in vanilla js
https://github.com/graphieros/data-visualisation
data-analysis data-visualization pure-javascript svg-manipulating
Last synced: 24 days ago
JSON representation
data visualisation solutions in vanilla js
- Host: GitHub
- URL: https://github.com/graphieros/data-visualisation
- Owner: graphieros
- Created: 2019-09-30T15:25:26.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-12-28T16:49:50.000Z (about 5 years ago)
- Last Synced: 2024-04-28T07:45:01.045Z (8 months ago)
- Topics: data-analysis, data-visualization, pure-javascript, svg-manipulating
- Language: JavaScript
- Homepage:
- Size: 2.82 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# data visualisation
Presented from recent to oldest.
personal ranking:
**** library material
*** copy paste material
** usable
\* noob beginnings, cluncky
radarChart2 ***
> a radar chart built with CANVAS and SVG that allow event handling. Fully scalable for any data set (from 3 to n).
[code](https://github.com/graphieros/data-visualisation/blob/master/js/radarChart2.js)
radarChart ***
> 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.
[code](https://github.com/graphieros/data-visualisation/blob/master/js/radarChart.js)
scatterPlot.js ***
> 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).
[code](https://github.com/graphieros/data-visualisation/blob/master/js/scatterPlot.js)
butterflyChart.js ***
> 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.
[code](https://github.com/graphieros/data-visualisation/blob/master/js/butterflyChart.js)
histoDiv.js ***
> 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...).
[code](https://github.com/graphieros/data-visualisation/blob/master/js/histoDiv.js)
waffleChart.js ***
> 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 :)
[code](https://github.com/graphieros/data-visualisation/blob/master/js/waffleChart.js)
svgChart.js **
> 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.
[code](https://github.com/graphieros/data-visualisation/blob/master/js/svgChart.js)
divChart.js *
> generates random data and displays a histogram chart built with DIV elements, allowing easy styling with css. Hovering each histogram will display its data.
[code](https://github.com/graphieros/data-visualisation/blob/master/js/divChart.js)
graphBar2.js *
> generates random monthly data for a current period and a previous period, and displays a histogram chart on a canvas.
[code](https://github.com/graphieros/data-visualisation/blob/master/js/graphBar2.js)
monthChart.js *
> generates random monthly data for a current period and a previous period, and displays a line chart on a canvas.
[code](https://github.com/graphieros/data-visualisation/blob/master/js/monthChart.js)
sortGraphLine.js *
> 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.
[code](https://github.com/graphieros/data-visualisation/blob/master/js/sortGraphLine.js)
graphLine.js *
> 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.
[code](https://github.com/graphieros/data-visualisation/blob/master/js/graphLine.js)
graphBar.js *
> manipulates height of divs depending on data sorted from a HTML table. It displays a bar chart sorted from smallest to highest value.
[code](https://github.com/graphieros/data-visualisation/blob/master/js/graphBar.js)