jules/nav-carte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(media): transposition 1:1 Bonpote V2 + Voronoi blur + grisage (Phase 8.D)

Browse Source 
- Positions x_hint/y_hint repos depuis OCR vision Sonnet sur PDF Bonpote V2
- Couleurs ecoles pastel Bonpote-aligned (10 clusters)
- Labels Bonpote V2 longs : Ecologies libertaires + Ecologies anti-industrielles
  (ids JSON eco-anarchisme/technocritique inchanges, compat code)
- CSS .voronoi-bg filter:blur(10px) + labels separes sur calque non-blurre
- Grisage auteurs ingere:false : #bbb opacity 0.35 non-cliquables
- Tooltip non-ingeres : "Present dans Bonpote, pas encore ingere dans le RAG ATIS."
- D3 sim ajustee pour 171 auteurs : linkDistance 85, charge -30, forceXY 0.15
- corpusCount = auteurs ingeres uniquement (32, pas 171 total)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jules Neny
2026-05-12 17:57:30 +02:00
parent fdd9d02859
commit 89608d894c
3 changed files with 83 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
components/CartePensees.vue
View File

@@ -14,7 +14,7 @@
<script setup lang="ts">
interface EcoleData { id: string; label: string; description: string; color: string; x_hint: number; y_hint: number }
interface LivreRag { slug: string; titre: string; annee: number; couches: string[] }
interface AuteurData { id: string; nom: string; dates: string; ecoles: string[]; ecole_principale: string; livres_rag: LivreRag[]; theses_cles: string[]; bio_courte: string }
interface AuteurData { id: string; nom: string; dates: string; ecoles: string[]; ecole_principale: string; ingere: boolean; livres_rag: LivreRag[]; theses_cles: string[]; bio_courte: string; bio_courte_provisoire?: string }
interface PenseesData { ecoles: EcoleData[]; auteurs: AuteurData[] }
// Liens d'influence inter-ecoles (Phase 7 - matrice de filiation)
@@ -79,8 +79,11 @@ async function initGraph() {
const delaunay = Delaunay.from(points)
const voronoi = delaunay.voronoi([0, 0, W, H])
// Groupe Voronoi (fond, couche 1)
// Groupe Voronoi : separation Phase 8.D
// - gVoronoi : cells colorees, BLURRED via CSS .voronoi-bg
// - gVoronoiLabels : labels ecoles, NOT blurred (lisibilite 17px)
const gVoronoi = g.append('g').attr('class', 'voronoi-bg')
const gVoronoiLabels = g.append('g').attr('class', 'voronoi-labels')
ecolesArr.forEach((ecole, i) => {
const cellPath = voronoi.renderCell(i)
@@ -105,12 +108,12 @@ async function initGraph() {
})
.on('mouseleave', () => { if (tooltipRef.value) tooltipRef.value.style.opacity = '0' })
// Label ecole dans la cellule (centroid du polygone)
// Label ecole dans la cellule (centroid du polygone) - calque non-blurre
if (poly && poly.length > 0) {
const centroid = d3.polygonCentroid(poly as [number, number][])
if (centroid && !isNaN(centroid[0]) && !isNaN(centroid[1])) {
const words = ecole.label.split(' ')
const labelEl = gVoronoi.append('text')
const labelEl = gVoronoiLabels.append('text')
.attr('class', 'voronoi-cell-label')
.attr('x', centroid[0])
.attr('y', centroid[1])
@@ -171,7 +174,10 @@ async function initGraph() {
const ecole = ecoleMap.get(a.ecole_principale)
const jitter = () => (Math.random() - 0.5) * 80
return {
id: a.id, type: 'auteur', nom: a.nom, dates: a.dates, bio_courte: a.bio_courte,
id: a.id, type: 'auteur', nom: a.nom, dates: a.dates,
bio_courte: a.bio_courte,
bio_provisoire: a.bio_courte_provisoire ?? '',
ingere: a.ingere,
ecole_principale: a.ecole_principale,
color: ecole?.color ?? '#888', r: 11,
x: W * (ecole?.x_hint ?? 0.5) + jitter(),
@@ -198,25 +204,26 @@ async function initGraph() {
const allNodes = [...ecoleFixedNodes, ...auteurNodes]
if (simulation) simulation.stop()
// Phase 8.D : sim ajustee pour 171 auteurs (vs 28 v2.1, densite 6x)
simulation = d3.forceSimulation(allNodes)
.force('link', d3.forceLink(links).id((d: any) => d.id).distance(110).strength((d: any) => d.strength ?? 0.5))
.force('charge', d3.forceManyBody().strength(-45))
.force('link', d3.forceLink(links).id((d: any) => d.id).distance(85).strength((d: any) => d.strength ?? 0.5))
.force('charge', d3.forceManyBody().strength(-30))
.force('center', d3.forceCenter(W / 2, H / 2).strength(0.02))
.force('collision', d3.forceCollide().radius((d: any) => d.type === 'auteur' ? 14 : 0))
.force('collision', d3.forceCollide().radius((d: any) => d.type === 'auteur' ? 12 : 0))
.force('forceX', d3.forceX<any>((d: any) => {
if (d.type === 'auteur') {
const pos = ecolePositions.get(d.ecole_principale)
return pos ? pos.tx : W / 2
}
return W / 2
}).strength(0.12))
}).strength(0.15))
.force('forceY', d3.forceY<any>((d: any) => {
if (d.type === 'auteur') {
const pos = ecolePositions.get(d.ecole_principale)
return pos ? pos.ty : H / 2
}
return H / 2
}).strength(0.12))
}).strength(0.15))
// ---- LIENS APPARTENANCE (couche 4) ----
const gLinks = g.append('g').attr('class', 'links-appartenance')
@@ -234,18 +241,24 @@ async function initGraph() {
// ---- NODES AUTEURS (couche 5) ----
const gAuteurs = g.append('g').attr('class', 'auteurs')
d3NodeSel = gAuteurs.selectAll('g').data(auteurNodes).join('g')
.style('cursor', 'pointer')
.style('cursor', (d: any) => d.ingere ? 'pointer' : 'default')
.call(d3.drag<any, any>()
.on('start', (e: any, d: any) => { if (!e.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y })
.on('drag', (e: any, d: any) => { d.fx = e.x; d.fy = e.y })
.on('end', (e: any, d: any) => { if (!e.active) simulation.alphaTarget(0); d.fx = null; d.fy = null }))
.on('click', (e: any, d: any) => { e.stopPropagation(); emit('select-auteur', d.id) })
.on('click', (e: any, d: any) => {
if (!d.ingere) return
e.stopPropagation()
emit('select-auteur', d.id)
})
// Phase 8.D : grisage conditionnel auteurs non-ingeres (ingere:false)
d3NodeSel.append('circle')
.attr('r', (d: any) => d.r)
.attr('fill', (d: any) => d.color + 'cc')
.attr('stroke', (d: any) => d.color)
.attr('fill', (d: any) => d.ingere ? (d.color + 'cc') : '#bbbbbb')
.attr('stroke', (d: any) => d.ingere ? d.color : '#999999')
.attr('stroke-width', 1.5)
.attr('opacity', (d: any) => d.ingere ? 1 : 0.35)
// ---- LABELS AUTEURS (couche 6 - fix 7.1 : drop-shadow blanc) ----
d3NodeSel.append('text')
@@ -258,8 +271,14 @@ async function initGraph() {
d3NodeSel
.on('mouseenter', (e: any, d: any) => {
if (!tooltipRef.value) return
const bio = d.bio_courte.length > 90 ? d.bio_courte.slice(0, 87) + '...' : d.bio_courte
tooltipRef.value.innerHTML = `<strong>${d.nom}</strong> <span style="opacity:0.6;font-size:0.7rem;">${d.dates}</span><br><span style="opacity:0.75;font-size:0.72rem;">${bio}</span>`
let tooltipHtml = ''
if (d.ingere) {
const bio = d.bio_courte.length > 90 ? d.bio_courte.slice(0, 87) + '...' : d.bio_courte
tooltipHtml = `<strong>${d.nom}</strong> <span style="opacity:0.6;font-size:0.7rem;">${d.dates}</span><br><span style="opacity:0.75;font-size:0.72rem;">${bio}</span>`
} else {
tooltipHtml = `<strong>${d.nom}</strong> <span style="opacity:0.6;font-size:0.7rem;">${d.dates}</span><br><span style="opacity:0.65;font-size:0.72rem;font-style:italic;">Présent dans Bonpote, pas encore ingéré dans le RAG ATIS.</span>`
}
tooltipRef.value.innerHTML = tooltipHtml
tooltipRef.value.style.opacity = '1'
})
.on('mousemove', (e: any) => {
@@ -325,14 +344,23 @@ defineExpose({ triggerResize })
pointer-events: none;
}
/* ---- Voronoi cellules ---- */
/* ---- Voronoi cellules (Phase 8.D : blur 10px aquarelle Bonpote) ---- */
.voronoi-bg {
filter: blur(10px);
opacity: 0.65;
}
.voronoi-cell {
stroke: rgba(255,255,255,0.4);
stroke-width: 1.5px;
stroke: rgba(255, 255, 255, 0.3);
stroke-width: 1px;
cursor: default;
}
/* ---- Labels ecoles dans cellules Voronoi ---- */
/* ---- Labels ecoles : calque separe NON-blurre (Phase 8.D) ---- */
.voronoi-labels {
pointer-events: none;
}
.voronoi-cell-label {
fill: rgba(40,40,40,0.52);
font-size: 17px;