Génération de Graphiques Interactifs (HTML/JS) via SAS

Le script utilise une étape DATA _NULL_ avec l'instruction `file _webout` pour écrire directement une page web HTML complète dans le flux de sortie du serveur web (typiquement pour SAS^© Studio ou SAS^© Viya^™). La section `cards4` permet d'intégrer le contenu HTML et JavaScript dans le script SAS^©. La page HTML inclut des références aux bibliothèques dc.js, d3.js et Crossfilter via des CDN. Le code JavaScript embarqué définit des données statiques (`spendData`) puis initialise et configure trois graphiques interactifs (un graphique en anneau, un histogramme et un graphique à barres horizontales) pour visualiser ces données. L'objectif est de présenter une visualisation de données dynamique sans interaction directe avec des datasets SAS^©.

Analyse des données

Type : CREATION_INTERNE

Les données (`spendData`) utilisées par les graphiques sont définies en dur et directement intégrées dans le code JavaScript de la page HTML générée. Elles ne proviennent pas de datasets SAS ni de sources de données externes traitées par SAS.

1 Bloc de code

DATA STEP

Explication :
Cette étape `DATA _NULL_` est configurée pour écrire son contenu directement vers la sortie web (`_webout`), ce qui est une méthode courante en environnement SAS Viya et SAS Studio pour générer du contenu dynamique affiché dans le navigateur. L'instruction `input` et `put _infile_` combinée avec `cards4` permet d'inclure un bloc de texte littéral (ici, une page HTML complète avec du JavaScript) qui est ensuite émis tel quel. Le HTML contient des balises pour la structure de la page et des liens vers des bibliothèques JavaScript externes (d3.js, crossfilter.js, dc.js) via des CDNs pour créer des visualisations de données interactives côté client.

Copié !

data _null_ ; file _webout ; input ; put _infile_ ; cards4 ; <!DOCTYPE html> <html lang="en"> <head> <title>dc.js - Number Display Example</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.css"/> </head> <body> <div id="chart-ring-year"></div> <div id="chart-hist-spend"></div> <div id="chart-row-spenders"></div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.js"></script> <script type="text/javascript"> var yearRingChart = dc.pieChart("#chart-ring-year"), spendHistChart = dc.barChart("#chart-hist-spend"), spenderRowChart = dc.rowChart("#chart-row-spenders"); // use static or load via d3.csv("spendData.csv", function(error, spendData) {/* do stuff */}); var spendData = [ {Name: 'Mr A', Spent: '$40', Year: 2011}, {Name: 'Mr B', Spent: '$10', Year: 2011}, {Name: 'Mr C', Spent: '$40', Year: 2011}, {Name: 'Mr A', Spent: '$70', Year: 2012}, {Name: 'Mr B', Spent: '$20', Year: 2012}, {Name: 'Mr B', Spent: '$50', Year: 2013}, {Name: 'Mr C', Spent: '$30', Year: 2013} ]; // normalize/parse data spendData.forEach(function(d) { d.Spent = d.Spent.match(/\d+/); }); // set crossfilter var ndx = crossfilter(spendData), yearDim = ndx.dimension(function(d) {return +d.Year;}), spendDim = ndx.dimension(function(d) {return Math.floor(d.Spent/10);}), nameDim = ndx.dimension(function(d) {return d.Name;}), spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;}), spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;}), spendHist = spendDim.group().reduceCount(); yearRingChart .width(200).height(200) .dimension(yearDim) .group(spendPerYear) .innerRadius(50); spendHistChart .width(300).height(200) .dimension(spendDim) .group(spendHist) .x(d3.scale.linear().domain([0,10])) .elasticY(true); spendHistChart.xAxis().tickFormat(function(d) {return d*10}); // convert back to base unit spendHistChart.yAxis().ticks(2); spenderRowChart .width(350).height(200) .dimension(nameDim) .group(spendPerName) .elasticX(true); dc.renderAll(); </script> </body> </html> ;;;; run ;

1	DATA _null_ ;
2	file _webout ;
3	INPUT ;
4	put _infile_ ;
5	cards4 ;
6
7	"en">
8
9	dc.js - Number Display Example
10	"UTF-8">
11	"stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.css"/>
12
13
14
15	"chart-ring-year">
16	"chart-hist-spend">
17	"chart-row-spenders">
18
19
20
21
22
68
69
70
71	;;;;
72	RUN ;

Ce matériel est fourni "tel quel" par We Are Cas. Il n'y a aucune garantie, expresse ou implicite, quant à la qualité marchande ou à l'adéquation à un usage particulier concernant le matériel ou le code contenu dans les présentes. We Are Cas n'est pas responsable des erreurs dans ce matériel tel qu'il existe maintenant ou existera, et We Are Cas ne fournit pas de support technique pour celui-ci.

Retour à la liste

Le Conseil de l'Expert

Stéphanie

Spécialiste Machine Learning et IA.

« Bien que ce script utilise des données statiques pour l'exemple, la véritable puissance est atteinte en remplaçant la section spendData par une boucle SAS qui transforme un dataset réel en format JSON (via PROC JSON). Vous obtenez alors un pont parfait entre la robustesse des données SAS et le design moderne du web interactif. »