chart = { const style = ` style { visibility: hidden; } .tooltip { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background: #18304E; border-radius: .1rem; color: #fff; display: block; font-size: 11px; max-width: 320px; padding: .2rem .4rem; position: absolute; text-overflow: ellipsis; white-space: pre; z-index: 300; visibility: hidden; } .textbox { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background: #18304E; border-radius: .1rem; color: #fff; font-size: 12px; max-width: 320px; padding: .2rem .4rem; display: block; position: absolute; text-overflow: ellipsis; z-index: 300; visibility: hidden; } .thumbnail{ max-width: 50px; } h3 { color: #fff; font-size: 14px; margin-block-start: 0.3em; margin-block-end: 0.3em; } td { text-align: center } #close { float:right; display:inline-block; color: #fff; font-size: 14px; } `; d3.select("body") .append("style") .html(style); //fonction de zoom employée telle que dans l'implémentation du code suivant: https://observablehq.com/@d3/zoom-to-bounding-box const zoom = d3.zoom() .scaleExtent([1, 8]) .on("zoom", zoomed); //création du "canevas" sur lequel nous allons placer la carte et les autres éléments //début à -50 pour laisser de la marge à gauche pour le textbox const svg = d3.create("svg").attr("viewBox", `-25, 0, ${width}, ${height}`) .on("click", reset); const g = svg.append("g"); //zone d'information associée à la souris const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden") //boîte d'informations supplémentaires en bas à gauche const textbox = d3.select("body") .append("div") .attr("class", "textbox") .style("position", "absolute") .style("visibility", "hidden") //dessine les pays sur la carte //ajoute une couleur en fonction du nombre d'occurrences avec attr "fill" const c = g.append("g") .attr("cursor", "pointer") .selectAll("path") .data(countries.features) .enter() .append("path") .attr("d", path) .attr("stroke", "#111") .attr("stroke-width", 0.5) .attr("fill", d => d.properties.data? color(d.properties.data.length) : "transparent") .on("mouseover", function(event, d) { //Quand on passe la souris sur un pays, affiche le nom du pays et les occurrences dans tooltip let text = d.properties.nom; d.properties.data? text = text + "\nOccurrences: "+ d.properties.data.length : text = text ; showToolTip(text, [event.pageX, event.pageY]) }) .on("mousemove", function(event) { d3.select(".tooltip") .style("top", event.pageY - 10 + "px") .style("left", event.pageX + 10 + "px") }) .on("mouseout", function() { d3.select(".tooltip").style("visibility", "hidden") }) .on("click", clicked) .join("path") svg.call(zoom); function reset() { //dézoome quand on clique quelque part c.transition().style("fill", null); svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } function prepareData(map) { // fonction appelée dans clicked // pour chaque photo, décrit son numéro (photo), le nombre d'occurrences (nb) et inscrit le nom de l'url (url). Images est le début de l'url du gist sur lequel se trouvent les images. On rajoute le numéro de l'image et le format (.jpg) pour avoir un url complet. var arrayData = Array.from(map) var readyData = []; arrayData.forEach(a => { readyData.push({ photo: a[0], nb: a[1].length, url: images.concat(a[0]).concat('.jpeg') }) }) //retourne les données compilées dans le bon format return readyData; } function clicked(event, pays) { //fonction qui s'active quand on clique sur un pays var name = pays.properties.nom; if (name == vide){ //les pays pour lesquelles on n'a aucune donnée --> on ne fait rien console.log(vide) //(écrit "aucune donnée" dans la console) } else { //pays pour lesquels ont a des données --> on affiche des infos supplémentaires dans textbox //informations de base var photos = d3.group(pays.properties.data, d =>d.photo) var text = `x

${name}

Occurrences totales: ${pays.properties.data.length}

` //gestion des données pour l'affichage var info = prepareData(photos); //création d'un tableau avec une colonne pour chaque photo var tableContent= ''; info.forEach(i => { var p = i.photo; var u = i.url; var n = i.nb; tableContent = tableContent.concat(`

${n} `) }) var table=` ${tableContent}

Photo	Occurrences

` // le texte à afficher continer les informations de base + le contenu du tableau text = text.concat(table) //afficher textbox showTextBox(text, [0, height/2]) //id close: x pour fermer le textbox d3.select("#close") .on("click", function(event){ textbox.style("visibility", "hidden") }) } } function zoomed(event) { //fonction qui gère le zoom const {transform} = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } return svg.node() }