Draggable data points plugin for Chart.js
License: MIT License
I'm a fullstack developer, studying Automatics & Robotics at the AGH UST so as not to get bored with standard reserach fields for programming. If you want to read a bit more, take a look at my website or play a Rust-WASM-React Game of Life implementation with tone synthesization on the website as well.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
The plugin works fine for the bar chart. But I tried it with the stacked bar. it works fine for the bottom bar. But when I try to drag the top bar the top point jumps suddenly to a different point.
I believe you can support the stack bar with some minimal changes as its almost working. Thanks.
Hey there,
I'm trying to merge three charts together and making a bar chart, bubble and line chart. But once I merged it with Bar chart bubble is not draggable in X-Axis.
But if I removed Bar chart only then I am able to drag bubble anywhere in the canvas.
Code Sample:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-dragdata.min.js"></script>
myChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [
{
type: 'bar',
label: 'Bar DataSet',
data: [10, 20],
dragData: false,
barPercentage: 0.7,
order: 2
},
{
label: 'Bubble DataSet',
data: [{x:10,y: 20,r: 30},{x: 20,y: 30,r: 40}]
type: 'bubble',
dragData: true,
dragX: true,
order: 1
},
{
label: 'Line Dataset',
data: [{ x: 10,y: 20}, { x: 15, y: 10}],
type: 'line',
dragData: false,
borderWidth: 1,
pointRadius: 25,
pointHoverRadius: 25,
order: 3
}
],
}
});
please Check Again. Y-Axis is working Fine but X-Axis is not working
Awesome plugin. Works really well with line charts, however, I can't seem to make it work with bubble charts. Whenever the data point bubble is dragged it disappears.
Hi! Thanks for this library. I have somehow managed to be able to drag the points on the X axis with previous chart js version.
Now i want to upgrade to the newsest chart js and still try to drag the X axis.
The problem is that i have a time axis on X, and i know it does not possible to compute this but still i need some workaround for this because i was able to do that with prev versions.
My case is that the graph is a shutter/blinder graph. The user has to be able to set a specific time point in a day from 00:00 to 23:50 to a specific % from 0 to 100. It will be a dataset on an MCU, this MCU will loop trought this dataset and if the time matches with the actual time it will turn the shutter/blinder on the windows to the specified % value.
Here is a jsfiddle from what i try to do
So the user should be able to drag a point to the Y and the X axes as well. A point represents the shutter percentage in a day on the window.
If the problem is the x axes label format like "13:00" it would be ok for it to be a timestamp in millis or something else if the user sees the correct time in string.
Any suggestion? Sorry if it was not clear enough.
hi Chris ,
i try to move the point over the x axis but the chart does not response even when i converted the x axis to numbers not dates
and if you can give me a work around to move over date x scale it will be benefit for me
` let options = {
type: 'linear',
data: {
// labels: this.data.map(x => this.datepipe.transform(x[0], 'dd-MMM-yyyy')),
labels: this.data.map(x => x[3]),
datasets: [
// {
// type: 'scatter',
// showLine: true,
// label: 'dca',
// data: this.data.map(x => x[2]),
// dragData: true,
// dragX: true,
// fill: false,
// borderColor: 'red', pointBorderColor: 'red',
// backgroundColor: 'red', pointBackgroundColor: 'red',
// spanGaps: true,
// borderWidth: 3,
// pointHitRadius: 25,
// },
{
label: 'Production',
data: this.data.map(x => x[1]),
dragX: true,
dragData: true,
fill: false,
borderColor: 'green', pointBorderColor: 'green',
backgroundColor: 'green', pointBackgroundColor: 'green',
spanGaps: true,
}
],
},
options: {
dragData: true,
dragX: true,
dragDataRound: 1,
dragOptions: {
showTooltip: true
},
scales: {
yAxes: [
{
id: 'y-axis',
type: 'linear',
ticks: {
reverse: false,
min: 0,
max: this.maxPoint[1] + (this.maxPoint[1] * 3)
},
dragData: true,
},],
xAxes: [
{
id: 'x-axis',
type: 'linear',
ticks: {
reverse: false,
},
dragData: true,
},]
},
plugins: {
pluginDragPoints
},
onDragStart: (e) => {
//console.log(e)
},
onDrag: (e, datasetIndex, index, value) => {
e.target.style.cursor = 'grabbing'
//console.log(datasetIndex, index, value)
},
onDragEnd: (e, datasetIndex, index, value) => {
e.target.style.cursor = 'default'
console.log(datasetIndex, index, value)
// if (index == 0)
// this.p1 = {
// x1: 'Red',
// y1: value
// };
// if (index == 1)
// this.p2 = {
// x1: 'Blue',
// y1: value
// };
},
hover: {
onHover: (e) => {
const point = this.dcaChart.getElementAtEvent(e)
if (point.length) e.target.style.cursor = 'grab'
else e.target.style.cursor = 'default'
}
}
}
}
let canvas: any = document.getElementById('chartJSContainer');
let ctx: any = canvas.getContext('2d');
this.dcaChart = new Chart(ctx, options);`
I try to use plugin with typescript/angular 5
and its not working,. Im using dragData: true in options my code:
` options: {
defaultColor: "#3cba9f",
legend: { display: true },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
},
scales: {
margins: {
right: 10,
top: 10
},
yAxes: [{
display: true,
ticks: {
min: 0,
max: 16,
stepSize: 1,
}
}],
xAxes: [{
ticks: {
maxRotation: 80,
minRotation: 75,
},/*
type: 'time',
time: {
unit: 'minute',
unitStepSize: 15,
displayFormats: {
'minute': 'HH:mm',
'hour': 'HH:mm'
},
min: 1502488800000,
max: 1502575200000
}*/
}]
},
dragData: true,
responsive: false,
},`
hi, love your plugin, its the only one that can do x and y axis dragging with chartjs
anyways, i am having issues with the datapoint disappearing if y axis is dragged around/below 0
datapoint is will also be stuck to x axis at 0 if it is dragged around/over 0 on the x axis
however, if i force and limit the x or y point to be at 0.1, everything is fine
i have tried a few browsers and confirmed it is not browser related
mind having a look and see if its an error on my side or a bug in the plugin?
attached html to reproduce issue, thanks
Hi!
How to break of drogging some points? I tried throwing exception on onDragStart callback for cancelling dragging of interest points, but this not working =(
Any ways?
Hi,
Thanks for your plugin, I found that with vertical bar chart the dragging works fine. However when I use the horizontal bar chart, it drags but along the Y axis, i.e. moving the mouse up and down, will move the horizontal bar left and right. I tried the DragX/Y options but did not get it to work, also putting DragData within the X/Y axis.
Also a smaller issue, was when I dragged to zero, I could not drag it out of zero, so I had to set the minimum to be 1 instead of 0.
Any fixes appreciated.
Thanks
Is there any possibility to use functions inside the magnet object?
My goal is to limit the dragging of a datapoint to the previous datapoint value.
I have a stepline chart where the user would adjust the room temperature in a daily basis.
The problem is that the data points can be dragged in the previous direction.
So the problem is that i want to limit the currently dragged data point to be able to drag lower then the previous datapoint's temperature value and time value.
If you comment out the Default_Temp_Data_OK and uncomment the Default_Temp_Data_WRONG data array you can see that it can be set before the previous.
I have been trying adding the dragX: true property to the Line React Fiddle but I cannot get it working. Any idea? Would be nice adding an example with dragging in both directions, X and Y.
Thank you! Amazing plugin
It would be really helpful for the end user if we can show the tooltip while the point is being dragged so the user knows when to release.
Hi, thanks for this great plugin.
Is it possible to make it compatible with the zoom/panning plugin?
https://github.com/chartjs/chartjs-plugin-zoom
I can only get either panning or data-dragging to work.
Example (works in Safari):
https://jsfiddle.net/zpq8an40/1/
Would be nice to have both, like eg here
http://bl.ocks.org/stepheneb/1182434
Is there any workaround available?
Thank you!
I am using the example bar chart configuration in an Angular component.
I create the chart in ngOnInit() like the example code. If I click a bar immediately after the page load the plugin doesn't seem to work. Subsequent clicks or even hard reloading the browser doesn't fix it. No error is logged to the console.
If I wait 1 second before clicking on a bar the plugin works as expected. So, to get around this I just load the chart using setTimeout() with 1 second.
If we put a point such as point = {x: 100, y: 0} (on x axis), if you click it, it disappear immediately
Hello,
I am trying to allow for users to move either end of a range bar chart that is also stacked.
Currently, when I begin to drag, the data on the bar chart disappears. When I take out the range aspect of the Chart it works fine. The code that I am using is below.
data= {{
labels: ['Risk Level'],
datasets: [{
label: 'Low',
data: [[5,10]],
backgroundColor: '#D6E9C6',
},
{
label: 'Moderate',
data: [[10,13]],
backgroundColor: '#FAEBCC',
},
{
label: 'High',
data: [[15,17]],
backgroundColor: '#EBCCD1',
}
]
}}
options= {
{
responsive: true,
dragData: true,
dragX1:true,
dragX2:true,
dragDataRound: 1,
dragOptions: {
showTooltip: true
},
onDragStart: function(e) {
console.log(e)
},
onDrag: function(point_end, datasetIndex, index, value) {
point_end.target.style.cursor = 'grabbing'
console.log(datasetIndex, index, value)
},
onDragEnd: function(point_end, datasetIndex, index, value) {
point_end.target.style.cursor = 'default'
console.log(datasetIndex, index, value)
},
hover: {
onHover: function(e) {
const point = this.getElementAtEvent(e)
if (point.length) e.target.style.cursor = 'grab'
else e.target.style.cursor = 'default'
}
},
scales: {
xAxes: [{
stacked: true,
ticks: {
max: 100,
min: 0
}
}],
yAxes: [{
stacked: true,
ticks: {
max: 100,
min: 0
}
}]
}
}
}
Any help on this would be greatly appreciated.
Hi Christoph,
is there a way to update more than one data point while dragging a single point?
The use case is the user can pick & drag any point and neighbouring data points should be updated as well.
https://jsfiddle.net/ehyz5vj9/3/
In this fiddle, If I drag green by 10% then I want yellow and purple should be changed by 10% from its actual values.
If you guide me where to put my hand-on. I will work on it.
Thanks.
Describe the bug
Plugin does not seem to work with React.js. Even in the demo fiddle, the points are not draggable.
To Reproduce
https://jsfiddle.net/3v9kexbh/
(copied link directly from "Line - React Fiddle")
Expected behavior
Points should be draggable on line graph
Using the multiple horizontal example, once any of the bars reaches 0, it is very difficult to move it from there since the bar has disappeared. On laptop, with a little bit of care, it is doable. On mobile, though, I haven't been able to succeed yet.
Re-occuring issues as #39 show that this plugin is in need of some well defined tests.
The tests should cover
dragData: false within a dataset is working as expectedDid I forget something? I will try my best to review open PRs, and get started with writing these tests in the coming weeks. However, help would be greatly appreciated!
I have three charts on the same html template, each of them created indepently using new Chart() but data set are the same points, and each of the canvas with different ids. Everything works well, when I drag on one chart it works well too. Then if I try to drag one of the other charts, the moment I start dragging, all the points I'm not dragging move and gets the same value as the chart I dragged its points before.
After upgrading to 1.10 (and chart.js 2.9.3):
- "chart.js": "^2.8.0",
- "chartjs-plugin-dragdata": "^1.0.4",
+ "chart.js": "^2.9.3",
+ "chartjs-plugin-dragdata": "^1.1.0",
"react-chartjs-2": "^2.8.0",
I'm getting value as undefined with onDragEnd:
onDragEnd: (e: any, datasetIndex: any, index: any, value: any) =>
console.log(index, datasetIndex, value)
...
>> 1, 0, undefined
// This issue can be circumvented by getting the value from the dataset
onDragEnd: (e: any, datasetIndex: any, index: any, value: any) =>
console.log(index, datasetIndex, data.datasets[datasetIndex].data[index])
...
>> 1, 0, 123 <-- actual value
You can also see this behaviour in the console of the example fiddle:
https://jsfiddle.net/3v9kexbh/
I'm trying to set this plugin up with react-chartjs-2, according to your demo.
I read your Gotchas section, which shows that I have to import chartjs-plugin-dragdata.
But when I do that I just get:
ReferenceError: Chart is not defined
at eval (webpack:///external_%22Chart%22?:1:18)
at Object.chart.js (/Users/martaver/Projects/sightful/git/sightful/node_modules/chartjs-plugin-dragdata/dist/chartjs-plugin-dragdata.js:816:1)
at __webpack_require__ (/Users/martaver/Projects/sightful/git/sightful/node_modules/chartjs-plugin-dragdata/dist/chartjs-plugin-dragdata.js:20:30)
at eval (webpack:///./src/index.js?:2:66)
at Module../src/index.js (/Users/martaver/Projects/sightful/git/sightful/node_modules/chartjs-plugin-dragdata/dist/chartjs-plugin-dragdata.js:805:1)
at __webpack_require__ (/Users/martaver/Projects/sightful/git/sightful/node_modules/chartjs-plugin-dragdata/dist/chartjs-plugin-dragdata.js:20:30)
at /Users/martaver/Projects/sightful/git/sightful/node_modules/chartjs-plugin-dragdata/dist/chartjs-plugin-dragdata.js:84:18
at Object.<anonymous> (/Users/martaver/Projects/sightful/git/sightful/node_modules/chartjs-plugin-dragdata/dist/chartjs-plugin-dragdata.js:87:10)
My import code:
import Chart from 'chart.js';
import 'chartjs-plugin-dragdata';
Using version [email protected], [email protected] (as per demo) and [email protected] (also as per demo).
Without trying to import chartjs-plugin-dragdata, my Line chart renders fine (just not draggable, obviously).
Any idea what might be going on?
On a small screen with hight Zoom (150%), There is a problem with the draggable point radius, only with cursor.
https://codepen.io/mortac8/pen/LYNYJdj
If I run this code in jsfiddle or codepen it works but if I run it straight from an HTML page deployed on a web server, I get problems in that my point can be dragged off the bottom of the chart or locked to X=0. Any ideas would be appreciated. This one is driving me crazy.
Attached is a video of the problem I see. It seems to be similar to what was mentioned in #39 and #35 .
I am using Chart.js 2.9.3 and dragdata 1.0.2 here in the attached examples. If I revert to dragdata 0.0.5, this specific problem goes away for me on a barebones example like the inline code below but then I can't drag points on my plot in our production app.
<script src="Chart-2.9.3.js"></script>
<script src="chartjs-plugin-dragdata-1.0.2.js"></script>
<canvas id="inputChartGray" width=200 height=200></canvas>
<script>
function createInputChart(chartElement, data){
let inputScatterChart = new Chart(chartElement, {
type: "scatter",
data: {
datasets: [
{
label: "points",
showLine: true,
pointRadius: 5,
data: data,
type: "scatter"
}]
},
options: {
responsive: false,
dragData: true,
dragX: true
}
});
return inputScatterChart;
}
initCharts();
function initCharts(){
let data = [{ x: 0, y: 0 }, { x: 65, y: 65 }, { x: 255, y: 255}];
let inputChartGrayElement = document.getElementById("inputChartGray");
let inputGrayChart = createInputChart(inputChartGrayElement, data);
}
</script>
As you might know, we can set the mode 'nearest' to trigger the hover action of the points and the tooltips.
options = {
hover: {
mode: 'nearest',
intersect: false
},
tooltips: {
mode: 'nearest',
intersect: false
}
};
It would be perfect that the drag action would work once the point is activated with the 'nearest' mode instead of actually needing to hover over the point.
Thank you
Hello, thanks for the great plugin.
I have a task to move a line of two points horizontally, could you explain to me this can be done with your plugin?
If so, how to do it in a nutshell? If not, could you advise the tools for this? Thanks
Hey Chris! Great library, really loving it so far. I was wondering, is there any way to drag a vertical bar graph's columns horizontally? An example of what I mean can be seen here (although it's implemented in a non-integratable library there, called CanvasJS.)
Fair enough if it's not possible; my own idea was to edit the source code and then open a P.R., but I'm having trouble so far. Happy to compensate you for your time, if it's a haul. Please let me know, thanks!
So after some extensive testing I found that d3-drag is using preventDefault() without passive: true causes dragData to break chart.js chart. Ill try my best to explain, and hope we can find a solution.
Error Message
Here where it calls .on 'eventType' it should be able to pass a third option passive: true
const ChartJSdragDataPlugin = { id: 'dragdata', afterInit: function(chartInstance) { if (chartInstance.options.dragData) { select(chartInstance.chart.canvas).call( drag().container(chartInstance.chart.canvas) .on('start', getElement(chartInstance, chartInstance.options.onDragStart)) .on('drag', updateData(chartInstance, chartInstance.options.onDrag)) .on('end', dragEndCallback(chartInstance,chartInstance.options.onDragEnd)) ) } } }
This is the offending code in d3-drag in noevent.js. Where it calls event.preventDefault();
import {event} from "d3-selection"; export function nopropagation() { event.stopImmediatePropagation(); } export default function() { event.preventDefault(); event.stopImmediatePropagation(); }
Here are some threads I found in github that might have solutions, but I havent been able to get anything to work.
Hello thanks for the plugin!
There is an issue with dragging the bubble chart items in https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-dragdata.min.js
however it works in https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-dragData.j
Thanks again
Hi Christoph,
I am looking for an option to toggle the dragging feature. I placed a button for toggle dragData property to true or false and updated the chart but it doesn't work.
By default, it considers the value set on page load. I can't change it afterwards.
Could you please provide me with a solution?
I was looking for this exact functionality, and I found your repository, added the tag, and boum! It just worked! Thank you so much, so wonderful when the stars align! <3
I am trying to call a function onDragEnd. I want to pass the values as an arguments where the script displays the updated values in the console.
`
onDragEnd: function (e, datasetIndex, index, value) {
console.log(datasetIndex, index, value)
this.modifyDataSet(datasetIndex, index, value);
}`
Console.log works fine. But I dont know how to trigger a custom function. I need to project the values in a datagrid in parallel to the chart. Your help would be highly appreciated. Thanks
Testing the React wrapper in your Fiddle:
https://jsfiddle.net/rts082hj/
the dragging action doesn't work for me.
Confirmed also locally with [email protected] and [email protected]
Thank you!
Hello,
Firstly thanks for the awesome plugin!
I have a chart that doesn't fill the screen, when I do a drag interaction (y-axis only), the position goes haywire, I did a quick fix by adding an offset to the value in the updateData function:
function updateData(chartInstance, callback) {
return function () {
if (element && _d3Selection.event) {
var e = _d3Selection.event.sourceEvent;
var datasetIndex = element['_datasetIndex'];
var index = element['_index'];
var value = chartInstance.scales[scale].getValueForPixel(e.clientY-chartInstance.canvas.getBoundingClientRect().y);
chartInstance.data.datasets[datasetIndex].data[index] = value;
chartInstance.update(0);
if (typeof callback === 'function') callback(e, datasetIndex, index, value);
}
};
}Hello,
I was having a heck of a time getting this thing to import, and I noticed in the package.json the main attribute is "main": "dist/chartjs-plugin-dragData.js". However, in the dist folder, there is only a .min.js file. So it's looking for a file that doesn't exist.
Thanks
We use Chart.js and your awesome dragdata plugin for one of our projects. Issue #56 and chartjs-plugin-dragdata 1.1.3 was a big fix that we needed.
We can't officially use any FOSS code that isn't versioned as a release. Is there some way I can help create a release for 1.1.3 just like you did for 1.0.2?
'dragData' Option Not Recognized:
Using Chart.js 2.9.3 in Angular. Imported plugin: import 'chartjs-plugin-dragdata'
However, dragData is not recognized as a chart option.
Receiving the following error:
index.d.ts(278, 9): The expected type comes from property 'options' which is declared here on type 'ChartConfiguration'
Please let me know how to fix this issue.
Hello,
I found an issue in your index.js file.
If you look at getElement function you can see this line is passing in 6 arguments, but the function only requires 5.
let newPos = calcPosition(e,chartInstance,datasetIndex,index,x,y)
Firstly, what a great library, thanks!
I'm having some trouble with a stacked bar chart with all-but-one of the series having value 0 (this is so I can have multiple data labels to draw the ห
ห). I've set
dragData: false
for the series with value 0, but sometimes when dragging the remaining visible bar section, I get a lot of decimal places in the value:
I have set
dragDataRound: 1,
Am I doing something wrong here? Or is it a likely to be an interaction with the multiple datasets and labels?
I am using this in an angular 7 application and it works fine in a PC but I can't get it to work on an iPad. Here is a stackblitz of the example: https://stackblitz.com/edit/ng2-charts-g . Is touch fully supported on this?
Thank you.
Is there a new version planned for the latest chart.js?
This is such great work!
But I am just wondering if it is able to return the value of the points after the user makes the tweak on the graph.
Thanks
Is there a way to make this work with a radar chart?
Because I don't manage to make it work and I don't know if it's me or the plugin ;)
Hi there!
I am trying to use chartjs-plugin-dragdata in combination with react-chartjs-2. My setup is as follows:
import { Radar } from 'react-chartjs-2';
import 'chartjs-plugin-dragdata';
const data = {
labels: ['Thing 1', 'Thing 2', 'Thing 3', 'Thing 4', 'Thing 5'],
datasets: [
{
label: 'Weights',
data: [50, 50, 50, 50, 50],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
},
],
};
const options = {
scales: {
r: {
angleLines: {
display: false,
},
min: 0,
max: 100,
stepSize: 1,
},
},
plugins: {
dragData: {
magnet: {
to: (value) => Math.round(value / 10) * 10,
},
onDrag: function (e, datasetIndex, index, value) {
console.log(e, datasetIndex, index, value);
},
onDragStart: function (e, element) {
console.log(e, element);
},
onDragEnd: function (e, datasetIndex, index, value) {
console.log(e, datasetIndex, index, value);
},
},
},
};
export function RadarChart() {
return <Radar data={data} options={options} type="radar" />;
}With that setup, the radar chart is rendered as expected, and I am able to drag its points around quite beautifully. However, the handlers onDrag, onDragStart, and onDragEnd are never called (i.e., there is no console output in the browser).
This could possibly also be an issue of react-chartjs-2 - or maybe I am doing something obviously wrong?
Hi, first of all, thank you for this amazing plugin.
I have a simple question, it is possible when dragging a point to drag a set of points?
Example: if I have 100 points in the graph and by dragging one I want to drag the 5 points that surrounds the selected points.
Thanks in advance,
At first dragging of any point all ok, X coordinate saved, but at second drag i getting error:
Uncaught TypeError: Cannot assign to read only property 'x' of object '#<Object>'
at HTMLCanvasElement.<anonymous> (chartjs-plugin-dragData.js:177)
at Dispatch.apply (chartjs-plugin-dragData.js:1611)
at Object.customEvent (chartjs-plugin-dragData.js:1315)
at Object.gesture [as mouse] (chartjs-plugin-dragData.js:450)
at mousemoved (chartjs-plugin-dragData.js:362)
at chartjs-plugin-dragData.js:1218
In file chartjs-plugin-dragData.js lines from 124 to 132 i change to this and all works normally
if (chartInstance.data.datasets[datasetIndex].data[index].x !== undefined && chartInstance.options.dragX) {
chartInstance.data.datasets[datasetIndex].data[index] = {
...chartInstance.data.datasets[datasetIndex].data[index],
x: x,
}
}
if (chartInstance.data.datasets[datasetIndex].data[index].y !== undefined) {
chartInstance.data.datasets[datasetIndex].data[index] = {
...chartInstance.data.datasets[datasetIndex].data[index],
y: y,
}
} else {
chartInstance.data.datasets[datasetIndex].data[index] = {
...chartInstance.data.datasets[datasetIndex].data[index],
y: y,
}
}
Maybe this solution not correct but its working.
Hi,
When dragging points fast or in some other times, tooltip is not being updated (in Line chart).
This is happenning also in your examples here:
https://chrispahm.github.io/chartjs-plugin-dragdata/
Can you please suggest?
Thanks in advanced!
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google โค๏ธ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.