31:T7a3,notetec=md`## Notes techniques Dans le contexte Observable l'objet des données est statique et provient d'un fichier .json. Sur le serveur ce même fichier est dynamique ... ### from observable to NPDS cms ... en préambule il est recommander d'identifier les cellules afin de pouvoir les manipuler lors de l'intégration - télécharger (Notebook actions > download) - modification si besoin du nom de dossier généré - modification des noms et appels de fichier : - dans le dossier files remplacer le hash par un nom de fichier humainement lisible (c'est donc ce fichier qui deviendra dynamique, mise à jour par le cms) - dans le fichier js qui contient la const fileAttachments remplacer dans cette constante la valeur de new URL par le chemin d'acces et le nom de votre fichier - modification du fichier index.html : - remplacer les path des import (index.js et runtime.js) par le chemin contextuel - supprimer les balises html inutiles - ajouter des balise html div au id des cellules que vous voulez afficher - modifier le script pour n'afficher que les cellules choisies voici donc le fichier index.html : ~~~html

~~~ ~~~js import define from "./static/plansite/index.js"; import {Runtime, Library, Inspector} from "./static/plansite/runtime.js"; const runtime = new Runtime(); const renders = {"charttitr": "#charttitr","chart": "#chart","aide":"#aide"}; for (let i in renders) renders[i] = document.querySelector(renders[i]); const main = runtime.module(define, name => { if (renders[name]) return new Inspector(renders[name]); else return true; }) ~~~ - uploader sur le serveur l'ensemble du code généré and that's all ... [my work on observable is in the cms](https://labo.infocapagde.com/static.php?op=plansite/index.html&npds=-1) `; 32:T1c3c,chart = { const divtooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); const root = d3.hierarchy(data); root.x0 = dy / 2; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; if (d.depth && d.data.name.length !== 4) d.children = null; //if (d.data.name.length !== 4) d.children = null; }); const svg = d3 .create("svg") .attr("id", "svg") .attr("width", width) //.attr("height", dx) .attr("viewBox", [-margin.left, -margin.top, width, dx]) .style("font", "14px sans-serif") .style("user-select", "none"); const forest = svg.append("g").attr("id", "forest"); const gLink = forest .append("g") .attr("id", "branches") .attr("fill", "none") .attr("stroke", "grey") .attr("stroke-width", 0.4); const gNode = forest .append("g") .attr("cursor", "pointer") .attr("id", "feuilles"); function update(source) { // two speed for the transition const duration = d3.event && d3.event.altKey ? 1500 : 250; const nodes = root.descendants().reverse(); //nodes.forEach(function(d) { d.y = d.depth * 230 + 120 ; }); const links = root.links(); // Compute the new tree layout. tree(root); let left = root; let right = root; root.eachBefore(node => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); const height = right.x - left.x + margin.top + margin.bottom; const transition = svg .transition() .duration(duration) .attr("height", height) .attr("viewBox", [-margin.left, left.x - margin.top, width, height]) .tween( "resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle") ); // Update the nodes… const node = gNode.selectAll("g").data(nodes, d => d.id); // Enter any new nodes at the parent's previous position. const nodeEnter = node .enter() .append("g") .attr("transform", d => `translate(${source.y0},${source.x0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0) .on("click", d => { d.children = d.children ? null : d._children; update(d); if (!d.parent) { d3.select("#svg").attr("transform", "translate(0,0) scale(1)"); d3.select("#forest").attr("transform", "translate(0,0) scale(1)"); d3.select("#feuilles").attr("transform", "translate(0,0) scale(1)"); d3.select("#branches").attr("transform", "translate(0,0) scale(1)"); } }); nodeEnter .append("circle") .attr("r", function(d) { if (!d.parent) { return 16; } else if (d.data.topicid || d.data.catid) { if (20 - 20 / d.data.nbarticle < 1) { return 4; } else { return 20 - 20 / d.data.nbarticle; } } else if (d.data.sujets) { if (20 - 20 / d.data.sujets < 1) { return 4; } else { return 20 - 20 / d.data.sujets; } } else return 4; }) .attr("fill", function(d) { if (d._children) return bs_color.bs_blue; else if (d.data.topicid || d.data.catid) { if (d.data.nbarticle) { var co = 20 - 20 / d.data.nbarticle; return colorrange[Math.round(co)]; } else return "white"; } else if (d.data.sujets) { var co = 20 - 20 / d.data.sujets; return colorrange[Math.round(co)]; } else return "white"; }) .attr("stroke", d => (d._children ? bs_color.bs_blue : "grey")) .attr("stroke-width", d => (d._children ? "2" : "0.5")) .on("mouseover", d => { if (d.data.nbarticle || d.data.sujets) { divtooltip .transition() .duration(200) .style("opacity", .8); if (d.data.nbarticle) { divtooltip .html(``) .style("left", d3.event.pageX - 40 + "px") .style("top", d3.event.pageY - 8 + "px"); } else if (d.data.sujets) { divtooltip .html(``) .style("left", d3.event.pageX - 40 + "px") .style("top", d3.event.pageY - 8 + "px"); } } }) .on("mouseout", d => { divtooltip .transition() .duration(1500) .style("opacity", 0); }); nodeEnter .append("a") .attr("xlink:href", function(d) { return d.data.url; }) .append("text") .attr("dy", "0.28em") .attr("x", d => (d._children ? -9 : 24)) .attr("text-anchor", d => (d._children ? "end" : "start")) .text(d => (!d.parent ? '' : d.data.name)) .attr("fill", d => (d.data.url ? colorrange[29] : 'grey')) .on("mouseover", function(d) { if (d.data.url) d3.select(this).style("fill", "#0056b3"); }) .on("mouseout", function(d) { if (d.data.url) d3.select(this).style("fill", bs_color.bs_blue); }) .clone(true) .lower() .attr("stroke-linejoin", "round") .attr("stroke-width", 6) .attr("stroke", "white"); // Transition nodes to their new position. const nodeUpdate = node .merge(nodeEnter) .transition(transition) .attr("transform", d => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); // Transition exiting nodes to the parent's new position. const nodeExit = node .exit() .transition(transition) .remove() .attr("transform", d => `translate(${source.y},${source.x})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // Update the links… const link = gLink.selectAll("path").data(links, d => d.target.id); // Enter any new links at the parent's previous position. const linkEnter = link .enter() .append("path") .attr("d", d => { const o = { x: source.x0, y: source.y0 }; return diagonal({ source: o, target: o }); }); // Transition links to their new position. link .merge(linkEnter) .transition(transition) .attr("d", diagonal); // Transition exiting nodes to the parent's new position. link .exit() .transition(transition) .remove() .attr("d", d => { const o = { x: source.x, y: source.y }; return diagonal({ source: o, target: o }); }); // Stash the old positions for transition. root.eachBefore(d => { d.x0 = d.x; d.y0 = d.y; }); } update(root); const zoom = d3 .zoom() .scaleExtent([0.5, 1]) .on("zoom", () => { gNode.attr("transform", d3.event.transform); gLink.attr("transform", d3.event.transform); forest.attr("transform", d3.event.transform); svg.attr("transform", d3.event.transform); }); svg .call(zoom) .on("dblclick.zoom", null) .on("wheel", function() { d3.event.preventDefault(); }); return svg.node(); }33:Ta0a,style = html``34:[{"id":"ae1c3197a999ae6a9f295b43e27bee43a0c264daac153de6eff77b6eedc1f767e7a63f1ae06fb2352c35b24965005b136f038c673f9572cad5cf493cba5444a2","href":"https://static.observableusercontent.com/files/ae1c3197a999ae6a9f295b43e27bee43a0c264daac153de6eff77b6eedc1f767e7a63f1ae06fb2352c35b24965005b136f038c673f9572cad5cf493cba5444a2","name":"plansite@1.json","type":"application/json","lastModified":1577086763022.394,"size":7446}] 2f:{"title":"Visualisation des données NPDS","cells":[{"id":0,"value":"metatitre = md`# Visualisation des données NPDS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"charttitr =md`# PLAN DU SITE`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"chartintro = md`Voici un test pour la visualisation des données qu'un portail [NPDS](http://www.npds.org) délivre. Dans cette exemple il s'agit du plan du site du labo de développement que l'on peut voir dans sa forme html classique [Ici](https://labo.infocapagde.com/map.php) et [là](https://labo.infocapagde.com/static.php?op=plansite/index.html&npds=-1) avec D3js build with observable.\n\n[source from [Collapsible Tree](https://beta.observablehq.com/@mbostock/collapsible-tree) by @mbostockMike Bostock]\n\n## Arbre ordonné retractable avec liens et zoom.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"aide=md`## Aide\nLes noeuds avec elements enfants sont escamotables, click sur les cercles bleus pour déplier ou rétracter l'arbre, avec la touche alt ⌥ enfoncée la durée de la transition (animation) est plus lente.\n\nLe zoom est implémenté avec la molette.\n`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"data = FileAttachment(\"plansite@1.json\").json();","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"margin = ({ top: 30, right: 80, bottom: 30, left: 20 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"dx = width / 24","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"dy = width / 3.8","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"tree = d3.tree()\n.nodeSize([dx, dy])\n.separation((a, b) => (a.parent == b.parent ? 1 : 2))\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"colorrange3 =d3.quantize(d3.interpolateHcl( \"rgb(159,225,255)\",\"steelblue\"), 30)","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"//with bootstrap blue as last value\ncolorrange = d3.quantize(d3.interpolateHcl(\"white\", \"#007bff\"), 30)","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"bscolor = [\n \"#007bff\",\n \"#6610f2\",\n \"#6f42c1\",\n \"#e83e8c\",\n \"#dc3545\",\n \"#fd7e14\",\n \"#ffc107\",\n \"#28a745\",\n \"#20c997\",\n \"#17a2b8\",\n \"#fff\",\n \"#6c757d\",\n \"#343a40\",\n \"#007bff\",\n \"#6c757d\",\n \"#28a745\",\n \"#17a2b8\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":911,"value":"bs_color = ({\n bs_blue: \"#007bff\",\n bs_indigo: \"#6610f2\",\n bs_purple: \"#6f42c1\",\n bs_pink: \"#e83e8c\",\n bs_red: \"#dc3545\",\n bs_orange: \"#fd7e14\",\n bs_yellow: \"#ffc107\",\n bs_green: \"#28a745\",\n bs_teal: \"#20c997\",\n bs_cyan: \"#17a2b8\",\n bs_white: \"#fff\",\n bs_gray: \"#6c757d\",\n bs_gray_dark: \"#343a40\",\n bs_primary: \"#007bff\",\n bs_secondary: \"#6c757d\",\n bs_success: \"#28a745\",\n bs_info: \"#17a2b8\",\n bs_warning: \"#ffc107\",\n bs_danger: \"#dc3545\",\n bs_light: \"#f8f9fa\",\n bs_dark: \"#343a40\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}