d-band / Calendar Graph
Licence: mit
Calendar graph like github using jsx support SVG, Canvas and SSR
Stars: ✭ 58
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Calendar Graph
Gantt
Gantt chart library using jsx support SVG, Canvas and SSR
Stars: ✭ 148 (+155.17%)
Mutual labels: svg, canvas, ssr, jsx
G2
📊 A highly interactive data-driven visualization grammar for statistical charts.
Stars: ✭ 11,020 (+18900%)
Mutual labels: graph, svg, canvas
Dracula
JavaScript layout and representation of connected graphs.
Stars: ✭ 767 (+1222.41%)
Mutual labels: graph, svg
Rickshaw
JavaScript toolkit for creating interactive real-time graphs
Stars: ✭ 6,506 (+11117.24%)
Mutual labels: graph, svg
Deep Viz
A React component library, providing concise and beautiful diversity charts with Canvas, SVG, E-map, WebGL, Dom, based on data visualization experience and commercial data display practice.
Stars: ✭ 55 (-5.17%)
Mutual labels: svg, canvas
React D3 Tree
🌳 React component to create interactive D3 tree graphs
Stars: ✭ 543 (+836.21%)
Mutual labels: graph, svg
Html To Image
✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
Stars: ✭ 595 (+925.86%)
Mutual labels: svg, canvas
The Graph
SVG custom elements for FBP graph editing and visualization. Used in noflo/noflo-ui
Stars: ✭ 896 (+1444.83%)
Mutual labels: graph, svg
Billboard.js
📊 Re-usable, easy interface JavaScript chart library based on D3.js
Stars: ✭ 5,032 (+8575.86%)
Mutual labels: graph, svg
Chart.xkcd
Chart.xkcd is a chart library that plots “sketchy”, “cartoony” or “hand-drawn” styled charts.
Stars: ✭ 6,982 (+11937.93%)
Mutual labels: graph, svg
Amcharts4
The most advanced amCharts charting library for JavaScript and TypeScript apps.
Stars: ✭ 907 (+1463.79%)
Mutual labels: graph, svg
Logicflow
A front-end framework for process visualization.
Stars: ✭ 973 (+1577.59%)
Mutual labels: graph, svg
People You Should Follow On Codepen
People You Should Follow on CodePen
Stars: ✭ 542 (+834.48%)
Mutual labels: svg, canvas
Zrender
A lightweight graphic library providing 2d draw for Apache ECharts
Stars: ✭ 5,122 (+8731.03%)
Mutual labels: svg, canvas
Python O365
A simple python library to interact with Microsoft Graph and Office 365 API
Stars: ✭ 742 (+1179.31%)
Mutual labels: graph, calendar
Diagram
☊ Tool for making node graphs. Inspired by dependency graph. Used mainly for automation services 📈
Stars: ✭ 510 (+779.31%)
Mutual labels: graph, canvas
Resonance
◾️Resonance | 5kb React animation library
Stars: ✭ 1,011 (+1643.1%)
Mutual labels: graph, svg
Pts
A library for visualization and creative-coding
Stars: ✭ 4,628 (+7879.31%)
Mutual labels: svg, canvas
Calendar Graph
Calendar graph library using jsx support SVG, Canvas and SSR
Install
$ npm install calendar-graph --save
Usage
import { SVGGraph, CanvasGraph, StrGraph } from 'calendar-graph';
const data = [
{ date: '2016-01-01', count: 1 },
{ date: '2016-01-03', count: 4 },
{ date: '2016-01-06', count: 2 },
// ...and so on
];
new SVGGraph('#svg-root', data, {
startDate: new Date('2016-01-01'),
endDate: new Date('2016-04-01'),
colorFun: (v) => {
return '#d6e685';
}
});
new CanvasGraph('#canvas-root', data, {
startDate: new Date('2016-01-01'),
endDate: new Date('2016-04-01'),
colorFun: (v) => {
return '#d6e685';
}
});
const strGraph = new StrGraph(data, {
startDate: new Date('2016-01-01'),
endDate: new Date('2016-04-01'),
colorFun: (v) => {
return '#d6e685';
}
});
this.body = strGraph.render();
Options
{
onClick: v => {},
colorFun: v => {},
startDate: oneYearAgo,
endDate: today,
size: 12,
space: 1,
padX: 20,
padY: 20,
styleOptions: {
textColor: '#959494',
fontSize: '12px',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
}
}
Report a issue
License
Graph is available under the terms of the MIT License.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].