[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_139":-5,"_63":16,"_140":-5,"_141":142,"_143":144},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":26,"_27":-5,"_28":29,"_30":16,"_31":32,"_33":-5,"_34":35},"vizInfo",{"_42":73,"_118":73,"_44":119,"_120":-7,"_121":52,"_122":50,"_123":-5,"_124":125,"_126":16,"_127":128,"_129":130,"_131":43,"_132":-7,"_70":133,"_72":134,"_135":-5,"_136":69,"_137":138},"vizContent",{"_42":73,"_74":75,"_28":29},"ownerAccount",{"_42":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":16,"_64":-7,"_65":41,"_66":67,"_68":69,"_70":71,"_72":71},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz",{"_42":43,"_44":45,"_46":47,"_48":49},"runtimeVersion","license","MIT","descriptionIsAiGenerated","sourceProvenance",{"_36":37,"_38":39,"_28":29,"_40":41},"project","socialImageUrl","https://next.vizhub.com/assets/unfurl.webp","sourceType","v3","originalUrl","https://vizhub.com/ICayer/db445bc498f74cd1b6acb927c44b8246","author","ICayer","id","793d6a64ad64473dafe3ba102c9c16bf","title","Fork of HTML Starter","ownerHandle","Abhiram6588","ownerDisplayName","Abhiram-Janagama","v3-user-icayer","accountType","user","email","cayerisabel@gmail.com","displayName","Isabel Cayer","avatar","https://avatars.githubusercontent.com/u/162628088?v=4","oauthProvider","github","oauthId","162628088","isAdmin","stripeCustomerId","handle","handleNormalized","icayer","lifecycleEmailsEnabled",true,"createdAt",1791662610183,"updatedAt","db445bc498f74cd1b6acb927c44b8246","files",{"_76":77,"_78":79,"_80":81,"_82":83,"_84":85,"_86":87,"_88":89,"_90":91,"_92":93,"_94":95},"10158638",{"_96":116,"_98":117},"16189718",{"_96":114,"_98":115},"17325845",{"_96":112,"_98":113},"20447488",{"_96":110,"_98":111},"56501886",{"_96":108,"_98":109},"61902759",{"_96":106,"_98":107},"85443008",{"_96":104,"_98":105},"94894201",{"_96":102,"_98":103},"09363091",{"_96":100,"_98":101},"8dbc301e",{"_96":97,"_98":99},"name","index.html","text","\n\n \n \n \n MasterCayer × TAC\n \n \n \n \n \n

Mon récit climatique

\n Un réseau d'acteurs, de liens, et d'une tension à\n raconter.\n

\n\n

Le réseau de départ

\n 6 acteurs du littoral gaspésien —\n institutions, communautés, chercheurs. Tous\n connectés par des enjeux climatiques communs.\n

Les liens de recherche

\n Les partenariats de recherche (en orange)\n forment l'épine dorsale du réseau. L'IML et\n l'UQAR sont au cœur des échanges de\n connaissance.\n

Les savoirs autochtones

\n La communauté Gesgapegiag détient des liens de\n savoir traditionnel uniques avec le Parc\n Forillon — une relation absente des bases de\n données institutionnelles.\n

\n\n

\n \n

\n\n

Produit avec MasterCayer · Atelier TAC · OFI

\n\n \n \n\n","nodes.csv","id,nom,categorie,description,lat,lon\nact-001,Municipalité de Gaspé,institution,Ville côtière partenaire,48.8350,-64.4786\nact-002,Communauté Gesgapegiag,communaute,Communauté Mi'kmaw riveraine,48.198877,-65.921059 \nact-003,Station IML,recherche,Institut Maurice-Lamontagne,48.639034,-68.155746\nact-004,Parc Forillon,conservation,Parc national côtier,48.7833,-64.2000\nact-005,UQAR,recherche,Université du Québec à Rimouski,48.4497,-68.5223\nact-006,MRC Haute-Gaspésie,institution,MRC régionale,49.126017,-66.483765 ","viz/map.js","// viz/map.js — carte SVG + projection Mercator\nimport { dataStore } from '../state.js';\nimport { tile as d3tile } from 'https://cdn.jsdelivr.net/npm/d3-tile@1/+esm';\n\nexport let projection;\nexport let gBasemap, gLinks, gNodes;\n\nexport function initMap(svg) {\n const w = +svg.node().clientWidth || 800;\n const h = +svg.node().clientHeight || 600;\n\n svg.attr('viewBox', `0 0 ${w} ${h}`);\n\n gBasemap = svg.append('g').attr('class', 'basemap');\n gLinks = svg.append('g').attr('class', 'links');\n gNodes = svg.append('g').attr('class', 'nodes');\n\n const nodesGeo = dataStore.nodes.filter(\n (d) => d.lat && d.lon,\n );\n\n projection = d3.geoMercator().fitExtent(\n [\n [40, 40],\n [w - 40, h - 40],\n ],\n {\n type: 'FeatureCollection',\n features: nodesGeo.map((d) => ({\n type: 'Feature',\n geometry: {\n type: 'Point',\n coordinates: [+d.lon, +d.lat],\n },\n })),\n },\n );\n\n drawOSM(w, h);\n\n return { w, h };\n}\n\nfunction drawOSM(w, h) {\n const tile = d3tile();\n\n const k = projection.scale() * 2 * Math.PI;\n const [tx, ty] = projection.translate();\n\n const tiles = tile\n .size([w, h])\n .scale(k)\n .translate([tx, ty])();\n\n gBasemap\n .selectAll('image')\n .data(tiles, (d) => `${d[0]}-${d[1]}-${d[2]}`)\n .join('image')\n .attr(\n 'href',\n (d) =>\n `https://cartodb-basemaps-a.global.ssl.fastly.net/light_nolabels/${d[2]}/${d[0]}/${d[1]}.png`,\n )\n .attr('x', (d) =>\n Math.floor((d[0] + tiles.translate[0]) * tiles.scale),\n )\n .attr('y', (d) =>\n Math.floor((d[1] + tiles.translate[1]) * tiles.scale),\n )\n .attr('width', Math.ceil(tiles.scale))\n .attr('height', Math.ceil(tiles.scale))\n .attr('opacity', 0.85);\n}\n","state.js","// state.js — mémoire partagée de l'interface\nexport const state = {\n index: 0,\n focus: null,\n filtre: null,\n};\n\n// dataStore — source de vérité unique\nexport const dataStore = {\n nodes: [],\n links: [],\n};\n","dataLoader.js","// dataLoader.js — charge les données UNE seule fois\nimport { dataStore } from './state.js';\n\nexport async function loadData() {\n const [nodesRaw, linksRaw] = await Promise.all([\n d3.csv('nodes.csv'),\n d3.csv('links.csv'),\n ]);\n\n // ✏️ ATELIER : Adapter les noms de colonnes à votre CSV\n dataStore.nodes = nodesRaw.map((d) => ({\n id: d.id,\n nom: d.nom,\n categorie: d.categorie,\n description: d.description || '',\n lat: d.lat ? +d.lat : null,\n lon: d.lon ? +d.lon : null,\n }));\n\n dataStore.links = linksRaw.map((d) => ({\n source: d.source,\n target: d.target,\n type: d.type,\n intensite: d.intensite ? +d.intensite : 1,\n }));\n\n console.log(\n '✔ Données chargées :',\n dataStore.nodes.length,\n 'nodes ·',\n dataStore.links.length,\n 'liens',\n );\n}\n","links.csv","source,target,type,intensite,description\nact-001,act-002,collaboration,3,Plan adaptation côtière conjoint\nact-002,act-003,partenariat_recherche,2,Suivi espèces marines\nact-003,act-005,partenariat_recherche,4,Protocoles de mesure partagés\nact-001,act-004,gestion_territoire,2,Corridor écologique\nact-005,act-003,partenariat_recherche,3,Programme monitoring commun\nact-006,act-001,gouvernance,2,Plan développement régional\nact-004,act-002,savoir_traditionnel,4,Gardiens du territoire","colors.js","// ============================================================\n// colors.js — Palette de couleurs du projet\n// ============================================================\n// 🎨 C'EST ICI QUE TU PERSONALISES LES COULEURS\n//\n// Règle d'or : nommer par CONCEPT, jamais par valeur visuelle\n// ✓ communaute: '#1D9E75' (on sait ce que ça représente)\n// ✗ vert: '#1D9E75' (la couleur peut changer!)\n// ============================================================\n\n// ----------------------------------------------------------\n// 1. CATÉGORIES DE NODES\n// Ces noms doivent correspondre aux valeurs de l'attribut\n// choisi dans ATTRIBUT_COULEUR (voir reseau.js)\n// ----------------------------------------------------------\nexport const COLORS = {\n\n // Valeurs possibles si ATTRIBUT_COULEUR = 'categorie'\n institution: '#378ADD', // bleu — organisations publiques\n communaute: '#1D9E75', // vert — communautés et partenaires\n recherche: '#EF9F27', // orange — chercheurs et universités\n conservation: '#7F77DD', // mauve — organismes de conservation\n\n // Valeurs possibles si ATTRIBUT_COULEUR = 'culture'\n // Québécoise: '#378ADD',\n // Inuit: '#1D9E75',\n // \"Mi'kmaw\": '#EF9F27',\n // Innue: '#7F77DD',\n // \"Sino-canadienne\": '#D85A30',\n\n // Valeurs possibles si ATTRIBUT_COULEUR = 'emploi'\n // \"Professeure-chercheuse\": '#378ADD',\n // \"Chercheur postdoctoral\": '#1D9E75',\n // \"Directeur général\": '#EF9F27',\n // \"Avocate-chercheure\": '#7F77DD',\n\n // ----------------------------------------------------------\n // 2. TYPES DE LIENS\n // Couleur selon la nature de la relation\n // ----------------------------------------------------------\n lien_fort: 'rgba(35,42,50,0.7)', // liens intenses (intensite >= 3)\n lien_faible: 'rgba(180,180,180,0.5)', // liens légers (intensite < 3)\n\n // ----------------------------------------------------------\n // 3. ÉLÉMENTS D'INTERFACE\n // ----------------------------------------------------------\n node_stroke: '#ffffff', // contour blanc des cercles\n background: '#fafaf8', // couleur de fond de la viz\n};\n","viz/reseau.js","// ============================================================\n// viz/reseau.js — Visualisation du réseau de collaborations\n// ============================================================\nimport { dataStore, state } from '../state.js';\nimport { COLORS } from '../colors.js';\nimport { projection } from './map.js';\n\n// ✏️ ATELIER : Change cet attribut pour révéler de nouvelles tensions\n// Options : 'categorie' | 'culture' | 'emploi' | 'organisation' | 'region'\nconst ATTRIBUT_COULEUR = 'categorie';\n\nlet gNodes, gLinks;\n\n// ============================================================\n// SECTION 1 — Initialisation du réseau\n// ============================================================\nexport function initReseau(svg) {\n const w = +svg.node().clientWidth || 800;\n const h = +svg.node().clientHeight || 600;\n svg.attr('viewBox', `0 0 ${w} ${h}`);\n\n gLinks = svg.append('g').attr('class', 'links');\n gNodes = svg.append('g').attr('class', 'nodes');\n\n // Copier les données\n const nodes = dataStore.nodes.map((d) => ({ ...d }));\n const links = dataStore.links.map((d) => ({ ...d }));\n\n // Index pour accès rapide par id\n const nodeById = new Map(nodes.map((d) => [d.id, d]));\n\n // Positionner les nodes selon lat/lon\n nodes.forEach((d) => {\n if (d.lat && d.lon) {\n const [x, y] = projection([+d.lon, +d.lat]);\n d.x = x;\n d.y = y;\n }\n });\n\n // Dessiner les liens\n gLinks\n .selectAll('line')\n .data(links)\n .join('line')\n .attr('stroke', (d) =>\n +d.intensite >= 3\n ? COLORS.lien_fort\n : COLORS.lien_faible,\n )\n .attr('stroke-width', (d) => +d.intensite || 1)\n .attr('x1', (d) => nodeById.get(d.source)?.x)\n .attr('y1', (d) => nodeById.get(d.source)?.y)\n .attr('x2', (d) => nodeById.get(d.target)?.x)\n .attr('y2', (d) => nodeById.get(d.target)?.y);\n\n // Dessiner les nodes\n const node = gNodes\n .selectAll('g.node')\n .data(nodes, (d) => d.id)\n .join('g')\n .attr('class', 'node')\n .attr('transform', (d) => `translate(${d.x},${d.y})`)\n .style('cursor', 'pointer');\n\n node\n .append('circle')\n .attr('r', 12)\n .attr(\n 'fill',\n (d) => COLORS[d[ATTRIBUT_COULEUR]] || '#aaa',\n )\n .attr('stroke', COLORS.node_stroke)\n .attr('stroke-width', 2);\n\n // ✏️ ATELIER : change d.nom par d.emploi ou d.organisation\n node\n .append('text')\n .text((d) => d.nom)\n .attr('dx', 16)\n .attr('dy', 4)\n .style('font-size', '11px')\n .style('font-family', 'sans-serif')\n .style('fill', '#222');\n\n node\n .append('title')\n .text(\n (d) =>\n `${d.nom}\\n${ATTRIBUT_COULEUR}: ${d[ATTRIBUT_COULEUR]}\\n${d.organisation || ''}`,\n );\n}\n\n// ============================================================\n// SECTION 2 — Mise à jour visuelle selon le scroll\n// ============================================================\nexport function updateReseau() {\n if (!gNodes) return;\n\n gNodes\n .selectAll('g.node circle')\n .transition()\n .duration(400)\n .attr('opacity', (d) =>\n !state.filtre || d[ATTRIBUT_COULEUR] === state.filtre\n ? 1\n : 0.15,\n )\n .attr('r', (d) => (state.focus === d.id ? 18 : 12));\n\n gNodes\n .selectAll('g.node text')\n .transition()\n .duration(400)\n .style('font-weight', (d) =>\n state.focus === d.id ? '700' : '400',\n )\n .attr('opacity', (d) =>\n !state.filtre || d[ATTRIBUT_COULEUR] === state.filtre\n ? 1\n : 0.15,\n );\n}\n","style.css","* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n font-family: 'Georgia', serif;\n background: #fafaf8;\n color: #222;\n}\n\n#intro {\n padding: 5rem 2rem 3rem;\n max-width: 680px;\n margin: 0 auto;\n}\n#intro h1 {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n}\n#intro p {\n font-size: 1rem;\n color: #666;\n}\n\n#viz .scrolly-container {\n display: flex;\n align-items: flex-start;\n}\n\n.scrolly-text {\n flex: 0 0 36%;\n padding: 0 2rem;\n}\n\n.step {\n min-height: 85vh;\n padding: 2rem 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n opacity: 0.4;\n transition: opacity 0.3s;\n}\n.step.is-active {\n opacity: 1;\n}\n\n.step h3 {\n font-size: 1.1rem;\n margin-bottom: 0.75rem;\n color: #111;\n}\n.step p {\n font-size: 0.9rem;\n line-height: 1.7;\n color: #555;\n}\n\n.scrolly-vis {\n flex: 0 0 64%;\n position: sticky;\n top: 0;\n height: 100vh;\n}\n\n#viz-wrapper {\n width: 100%;\n height: 100vh;\n}\n\n#main-svg {\n width: 100%;\n height: 100%;\n}\n\n#credits {\n padding: 3rem 2rem;\n text-align: center;\n color: #aaa;\n font-size: 0.8rem;\n}\n","script.js","// ============================================================\n// script.js — Chef d'orchestre\n// ============================================================\n// Ordre strict : données → carte → réseau → scroll\n// Ne jamais inverser cet ordre !\n// ============================================================\n\nimport { loadData } from './dataLoader.js';\nimport { state } from './state.js';\nimport { initMap } from './viz/map.js';\nimport { initReseau, updateReseau } from './viz/reseau.js';\n\n// ============================================================\n// INIT — point d'entrée principal\n// ============================================================\nasync function init() {\n // 1. Données EN PREMIER — tout le reste en dépend\n await loadData();\n\n // 2. SVG — sélectionné après que le DOM est prêt\n const svg = d3.select('#main-svg');\n\n // 3. Carte — projection et tuiles OSM\n initMap(svg);\n\n // 4. Réseau — nodes et liens par-dessus la carte\n initReseau(svg);\n\n // 5. Scroll EN DERNIER — pilote les autres modules\n initScroll();\n}\n\n// ============================================================\n// SCROLL — connecte les steps narratifs à la visualisation\n// ============================================================\nfunction initScroll() {\n scrollama()\n .setup({ step: '.step', offset: 0.6 })\n .onStepEnter(({ index }) => {\n state.index = index;\n\n // ✏️ ATELIER Station 5 : connecte tes steps ici\n if (index === 0) {\n state.filtre = null;\n state.focus = null;\n }\n if (index === 1) {\n state.filtre = 'recherche';\n state.focus = null;\n }\n if (index === 2) {\n state.filtre = null;\n state.focus = 'act-002';\n }\n\n updateReseau();\n });\n}\n\ninit();\n","slug","MasterCayer-TAC-Atelier","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","f67da7d1fb2c4c49a352d35e7bf4d439","startCommitId","51b404567b4d45d2b20f754725c1fc3b","forkedFrom","forkedFromVisibility",1777916047000,1777980102000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]