Je travaille actuellement sur un projet de marketing dans lequel je dois présenter des données statistiques et des tendances de manière claire et concise. Je pense que l’utilisation de graphiques interactifs pourrait être une excellente manière de visualiser ces informations. Cependant, je ne suis pas sûr de quelle plateforme ou outil serait le meilleur pour ce genre de tâche. Quelqu’un a-t-il des suggestions ou des expériences à partager sur l’utilisation de graphiques interactifs pour présenter des données ?
Voici 10 graphiques interactif en html css et javascript:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemples de Graphiques Interactifs</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
canvas {
margin: 20px;
border: 1px solid #ccc;
border-radius: 10px;
}
</style>
</head>
<body>
<canvas id="barChart" width="400" height="200"></canvas>
<canvas id="pieChart" width="400" height="200"></canvas>
<canvas id="lineChart" width="400" height="200"></canvas>
<canvas id="radarChart" width="400" height="200"></canvas>
<canvas id="bubbleChart" width="400" height="200"></canvas>
<canvas id="areaChart" width="400" height="200"></canvas>
<script>
// Graphique à Barres
new Chart(document.getElementById('barChart').getContext('2d'), {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Ventes',
data: [12, 19, 3, 5, 2],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
// Graphique à Secteurs
new Chart(document.getElementById('pieChart').getContext('2d'), {
type: 'pie',
data: {
labels: ['A', 'B', 'C', 'D', 'E'],
datasets: [{
label: 'Pourcentage',
data: [10, 20, 30, 25, 15],
backgroundColor: ['red', 'blue', 'green', 'orange', 'yellow']
}]
}
});
// Graphique à Ligne
new Chart(document.getElementById('lineChart').getContext('2d'), {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Ventes',
data: [12, 19, 3, 5, 2],
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
// Graphique Radar
new Chart(document.getElementById('radarChart').getContext('2d'), {
type: 'radar',
data: {
labels: ['A', 'B', 'C', 'D', 'E'],
datasets: [{
label: 'Données',
data: [10, 20, 30, 25, 15],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
scales: {
r: {
min: 0,
max: 40,
stepSize: 10
}
}
}
});
// Graphique à Bulles
new Chart(document.getElementById('bubbleChart').getContext('2d'), {
type: 'bubble',
data: {
datasets: [{
label: 'Données',
data: [{
x: 10,
y: 20,
r: 15
}, {
x: 30,
y: 40,
r: 25
}, {
x: 50,
y: 60,
r: 20
}],
backgroundColor: 'rgba(255, 99, 132, 0.6)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
scales: {
x: {
min: 0,
max: 100,
stepSize: 20
},
y: {
min: 0,
max: 100,
stepSize: 20
}
}
}
});
// Graphique à Aires
new Chart(document.getElementById('areaChart').getContext('2d'), {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Ventes',
data: [12, 19, 3, 5, 2],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
-
Tableau: Tableau est un outil de visualisation de données interactif qui vous permet de créer des graphiques, des tableaux de bord et des infographies. Il offre une période d’essai gratuite, après quoi les plans commencent à 70$/mois. Url: https://www.tableau.com/
-
D3.js: D3.js est une bibliothèque JavaScript gratuite qui vous permet de créer des visualisations de données interactives directement dans le navigateur. Url: https://d3js.org/
-
Plotly: Plotly est un outil qui permet de créer des graphiques interactifs et des visualisations de données. Il offre une version gratuite avec des fonctionnalités limitées et des plans payants à partir de 25$/mois. Url: https://plotly.com/
-
Highcharts: Highcharts est une bibliothèque JavaScript pour créer des graphiques interactifs. Il est gratuit pour une utilisation non commerciale, mais les licences commerciales commencent à 530$. Url: https://www.highcharts.com/
-
PowerBI: PowerBI est un outil de visualisation de données de Microsoft qui vous permet de créer des rapports et des tableaux de bord interactifs. Les plans commencent à 9.99$/mois. Url: https://powerbi.microsoft.com/
-
Google Charts: Google Charts est un service gratuit qui vous permet de créer des graphiques interactifs et des visualisations de données. Url: Charts | Google for Developers
-
Datawrapper: Datawrapper est un outil qui vous permet de créer des graphiques interactifs et des cartes. Il offre une version gratuite avec des fonctionnalités limitées et des plans payants à partir de 39$/mois. Url: https://www.datawrapper.de/
-
Infogram: Infogram est un outil de création de graphiques interactifs et d’infographies. Il offre une version gratuite avec des fonctionnalités limitées et des plans payants à partir de 19$/mois. Url: https://infogram.com/
-
Chart.js: Chart.js est une bibliothèque JavaScript gratuite et open source qui vous permet de créer des graphiques interactifs pour le web. Url: https://www.chartjs.org/
-
FusionCharts: FusionCharts est une bibliothèque JavaScript pour créer des graphiques interactifs et des visualisations de données. Les licences commencent à 399$. Url: https://www.fusioncharts.com/