2f:T1386,t = { const width = 1200; const height = 500; // Increased height to accommodate top and bottom layers const margin = { top: 50, right: 50, bottom: 50, left: 50 }; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("cursor", "grab"); const tooltip = d3.select("body").selectAll(".tooltip").data([null]) .join("div") .attr("class", "tooltip") .style("opacity", 0) .style("position", "absolute") .style("background", "white") .style("border", "1px solid #ccc") .style("padding", "8px") .style("pointer-events", "none") .style("border-radius", "4px") .style("z-index", 10); const parseDate = d3.timeParse("%Y"); const sortedData = [...data].sort((a, b) => parseDate(a.date) - parseDate(b.date)); // Track years to decide direction (above/below) const yearCounts = {}; sortedData.forEach(d => { d.dateParsed = parseDate(d.date); const year = d.date; yearCounts[year] = (yearCounts[year] || 0) + 1; // If it's the 2nd, 3rd, etc. event in that year, go below (direction = 1) d.direction = yearCounts[year] > 1 ? 1 : -1; }); const x = d3.scaleTime() .domain(d3.extent(sortedData, d => d.dateParsed)) .range([margin.left, width - margin.right]); svg.append("defs").append("clipPath") .attr("id", "clip") .append("rect") .attr("x", margin.left) .attr("y", 0) .attr("width", width - margin.left - margin.right) .attr("height", height); const chartArea = svg.append("g").attr("clip-path", "url(#clip)"); const axisG = svg.append("g").attr("transform", `translate(0,${height/2})`); const contentG = chartArea.append("g"); const labelWidth = 120; const labelHeight = 40; const offsetStep = 50; const maxLayers = 3; function update(newX) { axisG.call(d3.axisBottom(newX).ticks(10)); let lastX = { "-1": -Infinity, "1": -Infinity }; let currentLayers = { "-1": 0, "1": 0 }; sortedData.forEach(d => { const currentX = newX(d.dateParsed); const dir = d.direction; // -1 (up) or 1 (down) if (currentX < lastX[dir] + labelWidth) { currentLayers[dir] = (currentLayers[dir] + 1) % maxLayers; } else { currentLayers[dir] = 0; } d.currentOffsetY = currentLayers[dir] * offsetStep; lastX[dir] = currentX; }); // 2. Connector Lines contentG.selectAll(".connector") .data(sortedData) .join("line") .attr("class", "connector") .attr("x1", d => newX(d.dateParsed)) .attr("x2", d => newX(d.dateParsed)) .attr("y1", d => height/2 + (d.direction * 5)) .attr("y2", d => height/2 + (d.direction * (20 + d.currentOffsetY))) .attr("stroke", "#bbb") .attr("stroke-dasharray", "2,2"); // 3. HTML LABELS contentG.selectAll(".label-container") .data(sortedData) .join("foreignObject") .attr("class", "label-container") .attr("x", d => newX(d.dateParsed) - labelWidth / 2) // If direction is 1 (down), we add the offset. If -1 (up), we subtract it. .attr("y", d => { const base = height/2; const spacing = 25; return d.direction === 1 ? base + spacing + d.currentOffsetY : base - spacing - labelHeight - d.currentOffsetY; }) .attr("width", labelWidth) .attr("height", labelHeight) .html(d => `

${d.label}

`); // 1. Dots (Now move up or down slightly based on direction) contentG.selectAll(".dot") .data(sortedData) .join("circle") .attr("class", "dot") .attr("cx", d => newX(d.dateParsed)) .attr("cy", d => height/2 + (d.direction * 10)) // Offset dots slightly from the line .attr("r", 6) .attr("fill", d => d.direction === 1 ? "#e67e22" : "steelblue") // Different color for "same year" events .on("mouseover", (event, d) => { tooltip.transition().duration(200).style("opacity", 1); tooltip.html(`${d.label}
${d.detail}`); }) .on("mousemove", (event) => { tooltip.style("left", (event.pageX + 15) + "px").style("top", (event.pageY - 28) + "px"); }) .on("mouseout", () => tooltip.transition().duration(300).style("opacity", 0)); } const zoom = d3.zoom() .scaleExtent([0.5, 20]) .on("zoom", (event) => { const newX = event.transform.rescaleX(x); update(newX); }); svg.call(zoom); update(x); return svg.node(); }30:T6c3,data =[ { date: "1950", label: "Scoperte petrolifere in Basilicata", detail: "Inizio delle ricerche minerarie nella regione" }, { date: "1957", label: "Legge n. 6", detail: "Prima normativa nazionale sulla disciplina delle royalties" }, { date: "1961", label: "Produzione campo Pisticci", detail: "Il giacimento di Pisticci entra ufficialmente in produzione" }, { date: "1968", label: "Barre Elk River", detail: "Arrivo di materiale nucleare dagli USA presso il sito ITREC di Rotondella" }, { date: "1989", label: "Scoperta Tempa Rossa", detail: "Individuato il giacimento di Corleto Perticara" }, { date: "1997", label: "Fondazione ARPAB", detail: "Nasce l'Agenzia Regionale per la Protezione dell'Ambiente della Basilicata" }, { date: "2001", label: "Avvio COVA e Costa Molina 2", detail: "Il Centro Olio Val d'Agri entra in produzione e viene autorizzata la re-iniezione nel pozzo Costa Molina 2" }, { date: "2010", label: "Crisi Pertusillo", detail: "Prime evidenze di idrocarburi e moria di pesci nell'invaso" }, { date: "2013", label: "Caso Griffa e Larossa", detail: "Suicidio dell'ing. Griffa e affioramento di acque nere a Contrada Larossa" }, { date: "2013", label: "Studio VIS", detail: "Pubblicazione dello studio di Impatto Sanitario del CNR di Pisa" }, { date: "2016", label: "Petrolgate Lucano", detail: "Sequestro del COVA, del pozzo Costa Molina 2 e di Tecnoparco" }, { date: "2017", label: "Relazione Commissione Inchiesta", detail: "Pubblicata la relazione parlamentare sulle attività illecite connesse al ciclo dei rifiuti" }, { date: "2019", label: "Diossine e Scadenza Eni", detail: "Pubblicati studi sulle diossine nel latte materno; scadenza della concessione Eni Val d'Agri." } ]31:[] 2d:{"title":"Timeline","cells":[{"id":0,"value":"# Timeline","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"### Eventi sull'attività petrolifera e incidenti ambientali in Basilicata.\n\n\nTrascina e usa la rotella per navigare e ingrandire. \nPassa il mous sopra i punti per ulteriori informazioni.","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":6,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}