SAP Analytics Cloud (SAC) est la plateforme Analytique de SAP et se compose de différents modules :
Comme toute plateforme analytique de dernière génération, elle permet d'utiliser des approches de machine learning automatisées sans avoir un background en data science.
SAC contient plusieurs dizaines de types de visualisations différentes allant du simple tableau, graphique, jusqu'à des représentations beaucoup plus complexes comme des cartes (geomap) ou des bubble charts. Cependant, malgré ce large choix, il arrive de ne pas trouver son bonheur, il est donc bien pratique de pouvoir recourir à des visualisations D3JS.
D3JS (ou D3 pour Data-Driven Documents) est une bibliothèque graphique JavaScript qui permet l'affichage de données numériques sous une forme graphique et dynamique. Il s'agit d'un outil important pour la conformation aux normes W3C qui utilise les technologies courantes SVG, JavaScript et CSS pour la visualisation de données.
Des exemples de visuels D3JS sont disponible sur le site web officiel
Le visuel que nous avons choisi est le “Sequences Sunburst” 
Notre use case d’agence immobilière utilisant Google Analytics
Google Analytics est un service gratuit d'analyse d'audience d'un site Web ou d'applications pour étudier les comportements des visiteurs de son site web afin d’adapter et améliorer ses offres :
Voici le contenu du répertoire projet avec les fichiers suivants (à créer ou à copier) : 
Quelques règles à suivre pour générer le fichier CSV:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sequences sunburst</title> <script src="//d3js.org/d3.v3.min.js"></script> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600"> <link rel="stylesheet" type="text/css" href="sequences.css"/> </head> <body> <div id="main"> <div id="sequence"></div> <div id="chart"> <div id="explanation" style="visibility: hidden;"> <span id="percentage"></span><br/> of visits begin with this sequence of pages </div> </div> </div> <div id="sidebar"> <input type="checkbox" id="togglelegend"> Legend<br/> <div id="legend" style="visibility: hidden;"></div> </div> <script type="text/javascript" src="sequences.js"></script> <script type="text/javascript"> // Hack to make this example display correctly in an iframe on bl.ocks.org d3.select(self.frameElement).style("height", "700px"); </script> </body> </html>
Cette page permet de :
var vis = d3.select("#chart").append("svg:svg")
.attr("width", width)
.attr("height", height)
.append("svg:g")
.attr("id", "container")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var partition = d3.partition()
.size([2 * Math.PI, radius * radius]);
var arc = d3.arc()
.startAngle(function(d) { return d.x0; })
.endAngle(function(d) { return d.x1; })
.innerRadius(function(d) { return Math.sqrt(d.y0); })
.outerRadius(function(d) { return Math.sqrt(d.y1); });
// Use d3.text and d3.csvParseRows so that we do not need to have a header
// row, and can receive the csv as an array of arrays.
d3.text("visit-sequences.csv", function(text) {
var csv = d3.csvParseRows(text);
var json = buildHierarchy(csv);
createVisualization(json);
});
// Main function to draw and set up the visualization, once we have the data.
function createVisualization(json) {
// Basic setup of page elements.
initializeBreadcrumbTrail();
drawLegend();
d3.select("#togglelegend").on("click", toggleLegend);
Cette page permet de :
Afin d’intégrer notre visuel dans SAC, nous avons suivi les étapes suivantes afin de créer le node JS et des pages html et javascript
Notre visualisation est maintenant disponible et accessible par une url publique https://4662500b.ngrok.io
Voici le rendu dans l’application Analytique SAC d’une visualisation D3JS SunBurst :
A partir du visuel on peut voir que :
De la même manière et en analysant ce visuel on peut voir comment naviguent les visiteurs dans le site web à partir du moment où ils arrivent sur la page d’accueil ou sur toute autre page sur le site web.
Nous pouvons finalement conclure après exploration du visuel que la plupart des visiteurs sur le site web sont intéressés par les offres de location, donc il serait judicieux pour l’agence immobilière de mettre plus d’effort pour améliorer ses offres de location.
Et en bonus, voici le même graphique SunBurst, mais cette fois appliqué sur les données de navigation sur le blog Octo pour la journée du 4 juin 2020:
L’architecture proposée pour la solution est une architecture de cloud “hybride” mêlant d’un côté une application SaaS qui peut être hébergée chez Amazon Web Services ou dans les Datacenter de SAP et de l’autre des serveurs privés “on premise”.
Le bénéfice principal de booster SAC avec des visualisations D3JS est d’obtenir une amélioration visuelle de SAC (même si déjà pas mal loti) avec des graphiques D3JS innovants comme Sequences Sunburst.
Beaucoup d’exemples de visualisation sont disponibles dans le site officiel D3JS https://d3js.org/. Les codes sont fournis dans les exemples avec des explications, la configuration des visuels est relativement simple selon le use case choisi.
A venir un deuxième article sur comment “Booster SAP Analytics Cloud avec Python”