3f:null 40:["$","title",null,{"children":"TP4 - World History Timeline | lauriannelalonde | Observable"}] 46:T13eb,// déclaration de la visualisation permettant d'afficher le graphique ci-haut : // utilisation de «filteredData» dans une boucle «if» dont la logique est : si «sorting» est different de «time», utilisez «dataByRegion» pour trier et afficher les objets provenant de «data». Autrement, utilisez la formule pour trier et afficher les objets provenant de «data» en ordre chronologique. chart = { let filteredData; if(sorting !== "time") { filteredData = [].concat.apply([], dataByRegion.map(d=>d.values)); } else { filteredData = data.sort((a,b)=> a.start-b.start); } // attribution d'une couleur différente à chaque région du tableau. filteredData.forEach(d=> d.color = d3.color(color(d.region))) // déclaration de la variable «parent» en tant que conteneur (this), suivi de la boucle if : si «parent» n'est pas un conteneur, créez un contenuer (div). // déclaration de la constante «svg». let parent = this; if (!parent) { parent = document.createElement("div"); const svg = d3.select(DOM.svg(width, height)); // déclaration de la constante «g» en tant que conteneur dont les propriétés (margin) seront héritées par les éléments qu'elle contiendra. const g = svg.append("g").attr("transform", (d,i)=>`translate(${margin.left} ${margin.top})`); // déclaration de la constante «groups» comme étant égale à la constante «g», suivi d'attributions de propriétés qui seront héritées par les éléments qu'elle contiendra. const groups = g .selectAll("g") .data(filteredData) .enter() .append("g") .attr("class", "civ") // déclaration de la constante «tooltip» constituée d'une instruction permettant de créer un conteneur (div) puis faisant appel à la fonction «createTooltip» (définition de cette fonction plus bas). const tooltip = d3.select(document.createElement("div")).call(createTooltip); // déclaration de la constante «line» constituée d'une instruction permettant de montrer la position de la souris sur un graphique (pointer-events) grâce à une ligne verticale (line). const line = svg.append("line").attr("y1", margin.top-10).attr("y2", height-margin.bottom).attr("stroke", "rgba(0,0,0,0.2)").style("pointer-events","none"); // fonction permettant de positionner les objets («groups») dans l'espace graphique. groups.attr("transform", (d,i)=>`translate(0 ${y(i)})`) // instruction dessinant le carré d’information contenant les information : groups .each(getRect) // lorsque la souris est sur un élément du graphique (mouseover), la couleur et le carré d’informations s’affiche (tooltip). .on("mouseover", function(d) { d3.select(this).select("rect").attr("fill", d.color.darker()) tooltip .style("opacity", 1) .html(getTooltipContent(d)) }) // lorsque la souris quitte l’élément du graphique (mouseleave), la couleur le carré d’informations disparait (tooltip). .on("mouseleave", function(d) { d3.select(this).select("rect").attr("fill", d.color) tooltip.style("opacity", 0) }) // instructions utilisant la constante «svg» pour appeler la fonction «axisTop» (définition de cette fonction plus bas) pour créer la ligne du temps dans le haut du graphique. svg .append("g") .attr("transform", (d,i)=>`translate(${margin.left} ${margin.top-10})`) .call(axisTop) // instructions utilisant la constante «svg» pour appeler la fonction «axisBottom» (définition de cette fonction plus bas) pour créer la ligne du temps dans le bas du graphique. svg .append("g") .attr("transform", (d,i)=>`translate(${margin.left} ${height-margin.bottom})`) .call(axisBottom) // instructions utilisant la constante «svg» pour créer un bloc d'instructions à déclencher lorsque le curseur est sur un élément du graphique. svg.on("mousemove", function(d) { // instructions utilisant la constante «line» pour créer un bloc d'instructions afin de déterminer la position de la souris pour décaler le carré d'information (tooltip) de manière dynamique et éviter qu'il s'affiche sous la souris. let [x,y] = d3.mouse(this); line.attr("transform", `translate(${x} 0)`); y +=20; if(x>width/2) x-= 100; tooltip .style("left", x + "px") .style("top", y + "px") }) // instructions permettant l'affichage du graphique. parent.appendChild(svg.node()); parent.appendChild(tooltip.node()); parent.groups = groups; // fermeture de la boucle «if» ouverte lors de : // let parent = this; // if (!parent) { } else { // déclaration de la constante «civs» constituée d'une instruction sélectionnant tous les éléments «.civ». const civs = d3.selectAll(".civ") // civs.data(filteredData, d=>d.civilization) .transition() .delay((d,i)=>i*10) .ease(d3.easeCubic) .attr("transform", (d,i)=>`translate(0 ${y(i)})`) } // retourne (affiche) «parent». return parent }47:T679,// déclaration de la fonction «getRect» dont les instructions sont ici-bas : getRect = function(d){ // déclaration de la constante «el» qui permet de sélectionner chaque objet pour lui appliquer une fonction. const el = d3.select(this); // déclaration de la constante «sx» positionne le début de la barre représentant chaque civilisation. const sx = x(d.start); // déclaration de la constante «w» positionne la fin de la barre représentant chaque civilisation. const w = x(d.end) - x(d.start); // déclaration de la constante «isLabelRight» qui positionne l'étiquette («label») de chaque civilisation. const isLabelRight =(sx > width/2 ? sx+w < width : sx-w>0); // ce code permet au curseur de devenir un élément intéractif. el.style("cursor", "pointer") // les lignes de codes suivantes indiquent que l'intéraction du curseur sera un rectangle horizontal (axe «x») coloré (fill) dont la hauteur sera celle de la bande du graphique (bandwidth). el .append("rect") .attr("x", sx) .attr("height", y.bandwidth()) .attr("width", w) .attr("fill", d.color); // les lignes de codes suivantes décrivent le contenu du rectangle lors de l'intéraction du curseur sur une bande du graphique : // le texte, de couleur noir, correspond au nom de la civilisation («civilization») et il est positionné horizontalement via la constante «isLabelRight». el .append("text") .text(d.civilization) .attr("x",isLabelRight ? sx-5 : sx+w+5) .attr("y", 2.5) .attr("fill", "black") .style("text-anchor", isLabelRight ? "end" : "start") .style("dominant-baseline", "hanging"); }48:[{"id":"fcc0015cbe24eea265833239de543af33607f288cc9959f9ce4d0e2456b25dbaae5ff62a355704d879441905518bdbbeef0d13496346f63bfed61b07decbd0d3","href":"https://static.observableusercontent.com/files/fcc0015cbe24eea265833239de543af33607f288cc9959f9ce4d0e2456b25dbaae5ff62a355704d879441905518bdbbeef0d13496346f63bfed61b07decbd0d3","name":"civilization timelines - civilization timelines.csv","type":"text/csv","lastModified":1750433035634.485,"size":3382}] 44:{"id":"d293772268369281","slug":"tp4","title":"TP4 - World History Timeline","thumbnail":"2a547d45e0c3be698969c8efed9e26ef87d1f1e57ddec7110b673c5068b35055","access_level":"public","create_time":"$D2025-06-20T15:23:55.634Z","update_time":"$D2025-07-05T03:37:13.786Z","view_time":null,"first_public_time":"$D2025-06-20T15:23:55.634Z","has_unpublished_edits":null,"fork":{"id":"6f8f62930d4149f9","slug":"world-history-timeline","title":"World History Timeline","owner":{"id":"eb1622af3a3424c4","login":"tezzutezzu","name":"Danilo Di Cuia"}},"stars":0,"starred":false,"owner":{"type":"team","id":"716c82eed140fa9f","login":"lauriannelalonde","name":"lauriannelalonde","avatar_url":"https://avatars-next.observableusercontent.com/5be2aaf38b8bd89b9720d5afac3053515850dc9ef57adb56ee566012ee1d63fd","tier":"starter_2024","bio":"","following":false},"version":1015,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1f73113adfc38e57","login":"lauriannelalonde","name":"lauriannelalonde","avatar_url":"https://avatars-next.observableusercontent.com/488259422eaf66f07bfc4c891d037bb1e9dea2b9e440484c6494e860ba3abaa7","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"1f73113adfc38e57","login":"lauriannelalonde","name":"lauriannelalonde","avatar_url":"https://avatars-next.observableusercontent.com/488259422eaf66f07bfc4c891d037bb1e9dea2b9e440484c6494e860ba3abaa7","tier":null,"role":"editor"},{"type":"team","id":"716c82eed140fa9f","login":"lauriannelalonde","name":"lauriannelalonde","avatar_url":"https://avatars-next.observableusercontent.com/5be2aaf38b8bd89b9720d5afac3053515850dc9ef57adb56ee566012ee1d63fd","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"9541b8b2eebf66ed","slug":"hnu6056-tp4","title":"HNU6056 - TP4","owner":{"id":"716c82eed140fa9f","login":"lauriannelalonde","name":"lauriannelalonde"}},"type":"notebook","body":{"titling":"auto","title":"TP4 - World History Timeline","cells":[{"id":0,"value":"md`# TP4 - World History Timeline\nData adapted from [Essential Humanities](http://www.essential-humanities.net/history-overview/world-history-timeline/)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"viewof sorting = select({title: 'Sorted by', options:[\"region\",\"time\"], value:\"time\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"// déclaration de la varible «d3» correspondant à l'importation de la bibliothèque D3.js.\n\nd3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"// déclaration de la variable «csv» créant un tableau contenant toutes les données importées du jeu de données «civilization timelines - civilization timelines.csv» (pièce jointe). \n\ncsv =d3.csvParse(await FileAttachment(\"civilization timelines - civilization timelines.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"// déclaration du tableau «data» contenant les objets de «csv» triés en ordre croissant via la valeur «start», donc en ordre chronologique.\n\ndata = csv.map(d=>{\nreturn {\n ...d,\n start: +d.start,\n end: +d.end\n}\n}).sort((a,b)=> a.start-b.start);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"// déclaration du tableau «regions» ayant 3 objets («timeline») provenant du taleau «data» : \n// pour obtenir les 3 objets, une analyse et une sélection a été effectué pour afficher 1 seule fois chaque période («timeline») nommée dans le tableau.\n\ntimelines = dataByTimeline.map(d=>d.key)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"// déclaration du tableau «dataByTimeline» dans lequel les objets du taleau «data» sont regroupés («d3.nest()») avec la valeur «timeline».\n\ndataByTimeline = d3.nest().key(d=>d.timeline).entries(data);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"// déclaration du tableau «regions» ayant 6 objets («region») provenant du taleau «data» :\n// pour obtenir les 6 objets, une analyse et une sélection a été effectué pour afficher 1 seule fois chaque région («region») nommée dans le tableau.\n\nregions = d3.nest().key(d=>d.region).entries(data).map(d=>d.key)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"// déclaration du tableau «dataByRegion» dans lequel les objets du taleau «data» sont regroupés («d3.nest()») avec la valeur «region».\n\ndataByRegion = d3.nest().key(d=>d.region).entries(data);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"// déclaration de la fonction «formatDate» correspondant à un bloc d'instructions permettant la mise en forme de l'affichage de la date : \n// si la valeur numérique de «d» est plus petite que 0, affiche la chaine de caractères incluant le chiffre suivi de «BC». Autrement, affiche la chaine de caractères incluant le chiffre suivi de «AD».\n\nformatDate = d=> d < 0 ? `${-d}BC` : `${d}AD`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"// création d'un axe horizontal, c'est-à-dire une ligne du temps, positionné en haut de la visualisation avec un format d'affichage des valeurs personnalisé (tickFormat) basé sur «formatDate» et la hauteur de traits verticaux à 2 pixels (tickPadding).\n\naxisTop = d3.axisTop(x)\n .tickPadding(2)\n .tickFormat(formatDate)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"// création d'un axe horizontal, c'est-à-dire une ligne du temps, positionné en bas de la visualisation avec un format d'affichage des valeurs personnalisé (tickFormat) basé sur «formatDate» et la hauteur de traits verticaux à 2 pixels (tickPadding).\n\naxisBottom = d3.axisBottom(x)\n .tickPadding(2)\n .tickFormat(formatDate)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"// ajout de marges de 30 pixels tout autour de la visualisation (haut, bas, gauche et droite).\nmargin = ({top: 30, right: 30, bottom: 30, left: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"// définition de la hauteur de la visualisation à 1000 pixels.\n\nheight = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"// importation permettant d'appeler les fonctionnalités «checkbox» (cases à cocher) et «select» (barre déroulante) du notebook de Jeremy Ashkenas.\n\nimport {checkbox, select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"// attribution d'une couleur différente à chaque région du tableau.\n\ncolor = d3.scaleOrdinal(d3.schemeSet2).domain(regions)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"// mise en forme de la police d'écriture grâce aux feuilles de style CSS exécuté dans des balises HTML : police d'écriture « sans-serif» de taille de 11 pixels.\n\nhtml`CSS`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"// déclaration de la fonction «createTooltip» contenant un bloc d'instructions pour configurer un carré d'informations sur une civilisation donnée lorsqu'on place le curseur sur une bande du graphique :\n// cette fonction utilise la variable «el» afin de configurer les éléments de style tel que la couleur du carré (blanc), police d'écriture (sans-serif taille 11), etc. \n\ncreateTooltip = function(el) {\n el\n .style(\"position\", \"absolute\")\n .style(\"pointer-events\", \"none\")\n .style(\"top\", 0)\n .style(\"opacity\", 0)\n .style(\"background\", \"white\")\n .style(\"border-radius\", \"5px\")\n .style(\"box-shadow\", \"0 0 10px rgba(0,0,0,.25)\")\n .style(\"padding\", \"10px\")\n .style(\"line-height\", \"1.3\")\n .style(\"font\", \"11px sans-serif\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"// déclaration de la fonction «getTooltipContent» contenant un bloc d'instructions retournant une chaîne HTML pour afficher les informations textuelles à l'intérieur d'un carré d'informations pour une civilisation donnée lorsqu'on place le curseur sur une bande du graphique, soit le nom de la civisilisation, la région, ainsi que la date de début et de fin de la civilisation.\n\ngetTooltipContent = function(d) {\nreturn `${d.civilization}\n
\n${d.region}\n
\n${formatDate(d.start)} - ${formatDate(d.end)}\n`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"// déclaration de la fonction «x» contenant un bloc d'instructions utilisant D3 :\n// création d'une échelle horizontale pour le graphique en bandes qui prend les années de début/fin des civilisations dans «data», puis les convertit en positions pour pouvoir dessiner des bandes.\n\nx = d3.scaleLinear()\n .domain([d3.min(data, d => d.start), d3.max(data, d => d.end)])\n .range([0, width - margin.left - margin.right])\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"// déclaration de la fonction «y» contenant un bloc d'instructions utilisant D3 : \n// création d'une échelle verticale pour le graphique en bandes en utilisant les objets de «data» pour déterminer la dimension, puis ajout d'un espacement (padding) entre les bandes.\n\n y= d3.scaleBand()\n .domain(d3.range(data.length))\n .range([0,height - margin.bottom - margin.top])\n .padding(0.2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"