Plotly.js est une bibliothèque de graphiques comprenant plus de 40 types de graphiques :
Graphiques à barres horizontales et verticales
Graphiques à secteurs et à beignets
Graphiques linéaires
Diagrammes de dispersion et de bulles
Tracés d'équation
Graphiques 3D
Graphiques statistiques
Cartes SVG
...
Plotly.js est gratuit et open source sous licence MIT. Cela ne coûte rien à installer et à utiliser. Vous pouvez afficher la source, signaler des problèmes et contribuer en utilisant Github.
const xArray = ["Italy","France","Spain","USA","Argentina"];
const yArray = [55, 49, 44, 24, 15];
const data = [{
x: xArray,
y: yArray,
type: "bar",
orientation:"v",
marker: {color:"rgba(0,0,255)"}
}];
const layout = {title:"World Wide Wine Production"};
Plotly.newPlot("myPlot", data, layout);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
const xArray = ["Italy", "France", "Spain", "USA", "Argentina"];
const yArray = [55, 49, 44, 24, 15];
const data = [{
x:xArray,
y:yArray,
type:"bar",
orientation:"v",
marker: {color:"rgba(0,0,255,0.6)"}
}];
const layout = {title:"World Wide Wine Production"};
Plotly.newPlot("myPlot", data, layout);
</script>
</body>
</html>
const xArray = [55, 49, 44, 24, 15];
const yArray = ["Italy","France","Spain","USA","Argentina"];
const data = [{
x: xArray,
y: yArray,
type: "bar",
orientation: "h",
marker: {color:"rgba(255,0,0,0.6)"}
}];
const layout = {title:"World Wide Wine Production"};
Plotly.newPlot("myPlot", data, layout);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
const xArray = [55, 49, 44, 24, 15];
const yArray = ["Italy ", "France ", "Spain ", "USA ", "Argentina "];
const data = [{
x:xArray,
y:yArray,
type:"bar",
orientation:"h",
marker: {color:"rgba(255,0,0,0.6)"}
}];
const layout = {title:"World Wide Wine Production"};
Plotly.newPlot("myPlot", data, layout);
</script>
</body>
</html>
Pour afficher un secteur au lieu de barres, remplacez x et y par des étiquettes et des valeurs, et modifiez le type en « tarte » :
const data = [{
labels: xArray,
values: yArray,
type: "pie"
}];
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
const xArray = ["Italy", "France", "Spain", "USA", "Argentina"];
const yArray = [55, 49, 44, 24, 15];
const layout = {title:"World Wide Wine Production"};
const data = [{labels:xArray, values:yArray, type:"pie"}];
Plotly.newPlot("myPlot", data, layout);
</script>
</body>
</html>
Pour afficher un beignet au lieu d'une tarte, ajoutez un trou :
const data = [{
labels: xArray,
values: yArray,
hole: .4,
type: "pie"
}];
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
const xArray = ["Italy", "France", "Spain", "USA", "Argentina"];
const yArray = [55, 49, 44, 24, 15];
const layout = {title:"World Wide Wine Production"};
const data = [{labels:xArray, values:yArray, hole:.4, type:"pie"}];
Plotly.newPlot("myPlot", data, layout);
</script>
</body>
</html>
let exp = "Math.sin(x)";
// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 0.1) {
xValues.push(x);
yValues.push(eval(exp));
}
// Display using Plotly
const data = [{x:xValues, y:yValues, mode:"lines"}];
const layout = {title: "y = " + exp};
Plotly.newPlot("myPlot", data, layout);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
let exp = "Math.sin(x)";
// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 0.1) {
xValues.push(x);
yValues.push(eval(exp));
}
// Display using Plotly
const data = [{x:xValues, y:yValues, mode:"lines"}];
const layout = {title: "y = " + exp};
Plotly.newPlot("myPlot", data, layout);
</script>
</body>
</html>
Pour afficher les scatters à la place, changez le mode en marqueurs :
// Display using Plotly
const data = [{x:xValues, y:yValues, mode:"markers"}];
const layout = {title: "y = " + exp};
Plotly.newPlot("myPlot", data, layout);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
let exp = "Math.cos(x)";
// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 0.2) {
xValues.push(x);
yValues.push(eval(exp));
}
// Display using Plotly
const data = [{x:xValues, y:yValues, mode:"markers"}];
const layout = {title: "y = " + exp};
Plotly.newPlot("myPlot", data, layout);
</script>
const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Define Data
const data = [{
x: xArray,
y: yArray,
mode:"markers",
type:"scatter"
}];
// Define Layout
const layout = {
xaxis: {range: [40, 160], title: "Square Meters"},
yaxis: {range: [5, 16], title: "Price in Millions"},
title: "House Prices vs. Size"
};
Plotly.newPlot("myPlot", data, layout);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Define Data
const data = [{
x:xArray,
y:yArray,
mode:"markers"
}];
// Define Layout
const layout = {
xaxis: {range: [40, 160], title: "Square Meters"},
yaxis: {range: [5, 16], title: "Price in Millions"},
title: "House Prices vs. Size"
};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
</script>
</body>
</html>
const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Define Data
const data = [{
x: xArray,
y: yArray,
mode: "lines",
type: "scatter"
}];
// Define Layout
const layout = {
xaxis: {range: [40, 160], title: "Square Meters"},
yaxis: {range: [5, 16], title: "Price in Millions"},
title: "House Prices vs Size"
};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Define Data
const data = [{
x: xArray,
y: yArray,
mode:"lines"
}];
// Define Layout
const layout = {
xaxis: {range: [40, 160], title: "Square Meters"},
yaxis: {range: [5, 16], title: "Price in Millions"},
title: "House Prices vs. Size"
};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
</script>
</body>
</html>
Les graphiques à bulles sont des nuages de points dont les marqueurs ont une couleur, une taille et des symboles variables.
C'est un type de graphique en 3 dimensions avec seulement deux axes (x et y) où la taille de la bulle communique la troisième dimension.
const xArray = [1,2,3,4];
const yArray = [10,20,30,40];
const trace1 = {
x: xArray,
y: yArray,
mode: 'markers',
marker: {
color: ['red', 'green', 'blue', 'orange'],
size: [20, 30, 40, 50]
}
};
const data = [trace1];
const layout = {
title: "Plotting Bubbles"
};
Plotly.newPlot('myPlot', data, layout);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
const xArray = [1,2,3,4];
const yArray = [10,20,30,40];
const trace1 = {
x: xArray,
y: yArray,
mode: 'markers',
marker: {
color: ['red', 'green', 'blue', 'orange'],
size: [20, 30, 40, 50]
}
};
const trace2 = {
x: [1, 2, 3, 4],
y: [15, 30, 45, 60],
mode: 'markers',
marker: {
color: 'rgb(31, 119, 180)',
size: 18,
symbol: ['circle', 'square', 'diamond', 'cross']
},
};
const data = [trace1, trace2];
const layout = {
title: "Plotting Bubbles"
};
Plotly.newPlot('myPlot', data, layout);
</script>
</body>
</html>
let exp = "x + 17";
// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 1) {
yValues.push(eval(exp));
xValues.push(x);
}
// Define Data
const data = [{
x: xValues,
y: yValues,
mode: "lines"
}];
// Define Layout
const layout = {title: "y = " + exp};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
let exp = "x + 17";
// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 1) {
xValues.push(x);
yValues.push(eval(exp));
}
// Define Data
const data = [{
x: xValues,
y: yValues,
mode:"lines"
}];
// Define Layout
const layout = {title: "y = " + exp};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
</script>
</body>
</html>
let exp1 = "x";
let exp2 = "1.5*x";
let exp3 = "1.5*x + 7";
// Generate values
const x1Values = [];
const x2Values = [];
const x3Values = [];
const y1Values = [];
const y2Values = [];
const y3Values = [];
for (let x = 0; x <= 10; x += 1) {
x1Values.push(x);
x2Values.push(x);
x3Values.push(x);
y1Values.push(eval(exp1));
y2Values.push(eval(exp2));
y3Values.push(eval(exp3));
}
// Define Data
const data = [
{x: x1Values, y: y1Values, mode:"lines"},
{x: x2Values, y: y2Values, mode:"lines"},
{x: x3Values, y: y3Values, mode:"lines"}
];
// Define Layout
const layout = {title: "[y=" + exp1 + "] [y=" + exp2 + "] [y=" + exp3 + "]"};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
let exp1 = "x";
let exp2 = "1.5*x";
let exp3 = "1.5*x + 7";
// Generate values
const x1Values = [];
const x2Values = [];
const x3Values = [];
const y1Values = [];
const y2Values = [];
const y3Values = [];
for (let x = 0; x <= 10; x += 1) {
x1Values.push(x);
x2Values.push(x);
x3Values.push(x);
y1Values.push(eval(exp1));
y2Values.push(eval(exp2));
y3Values.push(eval(exp3));
}
// Define Data
const data = [
{x: x1Values, y: y1Values, mode:"lines"},
{x: x2Values, y: y2Values, mode:"lines"},
{x: x3Values, y: y3Values, mode:"lines"}
];
//Define Layout
const layout = {title: "[y=" + exp1 + "] [y=" + exp2 + "] [y=" + exp3 + "]"};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
</script>
</body>
</html>