2b:null 2c:["$","title",null,{"children":"Automated Textual Collation of Sutta with CollateX | Cittadhammo | Observable"}] 31:T1f69,// Cell 4: Create Subway Chart chart = { const { width, margin } = subwayConfig; const { stations, lines } = subwayData; // Calculate dynamic height based on number of stations const dynamicHeight = Math.max(400, stations.length * subwayConfig.stationSpacing + margin.top + margin.bottom + 100); // Create SVG const svg = d3.create("svg") .attr("width", width) .attr("height", dynamicHeight) .attr("viewBox", [0, 0, width, dynamicHeight]) .style("font-family", "Arial, sans-serif"); // Create main group with margins const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const chartWidth = width - margin.left - margin.right; const chartHeight = dynamicHeight - margin.top - margin.bottom; // Draw horizontal connection bars for main stations at the same level const connectionGroup = g.append("g").attr("class", "connection-bars"); // Only process main stations for connection bars const mainStations = stations.filter(s => s.isMainStation); mainStations.forEach(station => { const stationCount = station.suttas.length; const isFullConnection = stationCount === lines.length; // Only draw bar if there are 2 or more stations on the same level if (stationCount >= 2) { // Get x positions of lines that have stations at this level const connectedLines = lines.filter(line => station.suttas.includes(line.name)); const xPositions = connectedLines.map(line => line.x); const firstStationX = Math.min(...xPositions); const lastStationX = Math.max(...xPositions); // Draw horizontal bar connecting stations at this level connectionGroup.append("line") .attr("x1", firstStationX) .attr("y1", station.y) .attr("x2", lastStationX) .attr("y2", station.y) .attr("stroke", isFullConnection ? "black" : "#ddd") .attr("stroke-width", subwayConfig.stationRadius * 2) .attr("opacity", isFullConnection ? 0.8 : 0.5); } }); // Draw metro lines (vertical lines for each sutta) const lineGroup = g.append("g").attr("class", "metro-lines"); const firstStationY = Math.min(...stations.map(s => s.y)); const titleGap = 30; const lastStationY = Math.max(...stations.map(s => s.y)); lines.forEach(line => { // Get the last station Y position for this specific line const lineLastStationY = Math.max(...line.stations.map(s => s.y)); const lineFirstStationY = Math.min(...line.stations.map(s => s.y)); // Draw the main line (from first station to this line's last station) lineGroup.append("line") .attr("x1", line.x) .attr("y1", lineFirstStationY) .attr("x2", line.x) .attr("y2", lineLastStationY) // Each line ends at its own last station .attr("stroke", line.color) .attr("stroke-width", subwayConfig.lineWidth) .attr("opacity", 0.8); // Add line label at top (tilted 45 degrees, with gap from first station) lineGroup.append("text") .attr("x", line.x + 15) .attr("y", firstStationY - titleGap+8) .attr("text-anchor", "middle") .attr("transform", `rotate(-45, ${line.x + 10}, ${firstStationY - titleGap})`) .style("font-size", "12px") .style("font-weight", "bold") .style("fill", line.color) .text(line.name); // Add line label at bottom (tilted 45 degrees, with gap from this line's last station) lineGroup.append("text") .attr("x", line.x - 10) .attr("y", lastStationY + titleGap) .attr("text-anchor", "middle") .attr("transform", `rotate(-45, ${line.x - 10}, ${lastStationY + titleGap})`) .style("font-size", "12px") .style("font-weight", "bold") .style("fill", line.color) .text(line.name); }); // Draw stations and ghost stations const stationGroup = g.append("g").attr("class", "stations"); // Calculate text column position (to the right of all metro lines) const textColumnX = Math.max(...lines.map(line => line.x)) + subwayConfig.lineSpacing; stations.forEach(station => { // Only draw station circles for main stations (not ghost stations) if (station.isMainStation) { station.suttas.forEach(suttaName => { const line = lines.find(l => l.name === suttaName); if (line) { stationGroup.append("circle") .attr("cx", line.x) .attr("cy", station.y) .attr("r", subwayConfig.stationRadius) .attr("fill", line.color) .attr("stroke", "white") .attr("stroke-width", 2) .style("cursor", "pointer") .append("title") .text(`${suttaName}: ${station.fullText}`); } }); } // Draw text for all stations (both main and ghost) // Get color from first matching sutta line (from left) or from parent station for ghost stations let stationColor = "#333"; // default color if (station.isMainStation && station.suttas.length > 0) { const firstSutta = station.suttas[0]; // suttas array is already ordered by line position const matchingLine = lines.find(line => line.name === firstSutta); if (matchingLine) { stationColor = matchingLine.color; } } else if (station.isGhostStation && station.parentStation) { // Ghost stations inherit color from their parent main station const parentFirstSutta = station.parentStation.suttas[0]; const matchingLine = lines.find(line => line.name === parentFirstSutta); if (matchingLine) { stationColor = matchingLine.color; } } stationGroup.append("text") .attr("x", textColumnX + (station.isGhostStation ? 15 : 0)) // Indent ghost stations .attr("y", station.y + 4) .attr("text-anchor", "start") .style("font-family", "Arial, sans-serif") .style("font-size", station.isGhostStation ? "11.5px" : "11.5px") // Smaller font for ghost stations .style("font-weight", "normal") // .style("fill", stationColor) // Both main and ghost stations use sutta colors .style("cursor", "help") .text(station.text) .append("title") .text(station.fullText || station.text); }); // Add legend with sutta information const legend = g.append("g") .attr("class", "legend") .attr("transform", `translate(${450}, 15)`); legend.append("text") .attr("x", 0) .attr("y", 0) .style("font-size", "16px") .style("font-weight", "bold") .style("fill", "#333") .text("Sutta Lines"); lines.forEach((line, i) => { const legendItem = legend.append("g") .attr("transform", `translate(0, ${30 + i * 40})`); // Find corresponding witness data const witness = witnesses.find(w => w.id === line.name); legendItem.append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", 25) .attr("y2", 0) .attr("stroke", line.color) .attr("stroke-width", subwayConfig.lineWidth); legendItem.append("circle") .attr("cx", 12.5) .attr("cy", 0) .attr("r", subwayConfig.stationRadius) .attr("fill", line.color) .attr("stroke", "white") .attr("stroke-width", 2); // Sutta ID and Title on same line legendItem.append("text") .attr("x", 35) .attr("y", -2) .style("font-size", "14px") .style("font-weight", "bold") .style("fill", line.color) .text(line.name + (witness && witness.title ? ` - ${witness.title}` : "")); // Statistics on second line (stations, words, segments) const statsText = [ `${line.stations.length} stations`, witness ? `${witness.wordCount} words` : null, witness ? `${witness.segments} segments` : null ].filter(Boolean).join(" | "); legendItem.append("text") .attr("x", 35) .attr("y", 12) .style("font-size", "11px") .style("fill", "#666") .text(statsText); }); return svg.node(); }32:T880,// Cell 3: Process Data for Subway Chart subwayData = { const { data, suttaNames } = alignmentResult; // Function to break text into lines at word boundaries function breakTextIntoLines(text, maxLineLength) { const words = text.split(' '); const lines = []; let currentLine = ''; words.forEach(word => { if ((currentLine + word).length <= maxLineLength) { currentLine += (currentLine ? ' ' : '') + word; } else { if (currentLine) lines.push(currentLine); currentLine = word; } }); if (currentLine) lines.push(currentLine); return lines; } // Create expanded stations array with ghost stations for line breaks const expandedStations = []; let yPosition = 0; data.forEach((row, originalIndex) => { const textLines = breakTextIntoLines(row.text, subwayConfig.lineBreakLength); const suttas = suttaNames.filter(sutta => row[sutta] === 'x'); textLines.forEach((line, lineIndex) => { const isMainStation = lineIndex === 0; // Only first line is a real station const isGhostStation = lineIndex > 0; // Subsequent lines are ghost stations expandedStations.push({ id: `${originalIndex}-${lineIndex}`, originalIndex: originalIndex, text: line, fullText: row.text, // Keep full original text for tooltips y: yPosition, isMainStation: isMainStation, isGhostStation: isGhostStation, suttas: isMainStation ? suttas : [], // Ghost stations have no sutta connections parentStation: isGhostStation ? expandedStations.find(s => s.originalIndex === originalIndex && s.isMainStation) : null }); yPosition += subwayConfig.stationSpacing; }); }); // Create lines (suttas) - only connect to main stations const lines = suttaNames.map((sutta, index) => ({ name: sutta, color: subwayConfig.colors[index % subwayConfig.colors.length], x: index * subwayConfig.lineSpacing, stations: expandedStations.filter(station => station.isMainStation && station.suttas.includes(sutta)) })); return { stations: expandedStations, lines }; }33:T10a5,// Cell 6: Fetch sutta texts from SuttaCentral suttaTexts = { if (suttaIds.length === 0) return {}; const results = {}; for (const suttaId of suttaIds) { try { // First, get sutta metadata const metaResponse = await fetch(`https://suttacentral.net/api/suttas/${suttaId}/${selectedLanguage}`); if (!metaResponse.ok) { results[suttaId] = { id: suttaId, title: `${suttaId} (not found)`, author: 'N/A', text: '', wordCount: 0, error: `Metadata not found: HTTP ${metaResponse.status}` }; continue; } const metaData = await metaResponse.json(); const author = getAuthorForLanguage(metaData, selectedLanguage); // Get the actual text content using the Bilara API const textUrl = `https://suttacentral.net/api/bilarasuttas/${suttaId}/${author}`; const textResponse = await fetch(textUrl); if (textResponse.ok) { const textData = await textResponse.json(); // Extract text from the segmented data let fullText = ''; if (textData) { // Use translation_text for translations, root_text for Pali const textSource = selectedLanguage === "pli" ? textData.root_text : textData.translation_text; if (textSource && typeof textSource === 'object') { // Use keys_order to maintain proper sequence if available const segments = textData.keys_order || Object.keys(textSource); const textValues = segments .map(key => textSource[key]) .filter(value => value && typeof value === 'string' && value.trim().length > 0); fullText = textValues.join(' ').replace(/\s+/g, ' ').trim(); } } // Fallback: try the HTML endpoint if Bilara doesn't work if (!fullText) { try { const htmlResponse = await fetch(`https://suttacentral.net/api/suttas/${suttaId}/${selectedLanguage}/${author}`); if (htmlResponse.ok) { const htmlData = await htmlResponse.json(); if (htmlData.html) { const parser = new DOMParser(); const doc = parser.parseFromString(htmlData.html, 'text/html'); doc.querySelectorAll('script, style, nav, .navigation').forEach(el => el.remove()); fullText = (doc.body.textContent || doc.body.innerText || '').replace(/\s+/g, ' ').trim(); } } } catch (htmlError) { console.warn(`HTML fallback failed for ${suttaId}:`, htmlError); } } const title = selectedLanguage === "pli" ? (metaData.root_text?.title || metaData.suttaplex?.original_title || `Sutta ${suttaId}`) : (metaData.translation?.title || metaData.suttaplex?.translated_title || `Sutta ${suttaId}`); results[suttaId] = { id: suttaId, title: title, author: author, language: selectedLanguage, text: fullText, wordCount: fullText ? fullText.split(/\s+/).length : 0, segments: textData?.keys_order?.length || Object.keys(textData?.root_text || textData?.translation_text || {}).length, apiResponse: textData ? 'success' : 'no_data' }; } else { // If Bilara API fails, try alternative endpoints results[suttaId] = { id: suttaId, title: selectedLanguage === "pli" ? (metaData.root_text?.title || `Sutta ${suttaId}`) : (metaData.translation?.title || `Sutta ${suttaId}`), author: author, language: selectedLanguage, text: '', wordCount: 0, error: `Text not available: HTTP ${textResponse.status}` }; } } catch (error) { console.error(`Error fetching ${suttaId}:`, error); results[suttaId] = { id: suttaId, title: `${suttaId} (error)`, author: 'N/A', language: selectedLanguage, text: '', wordCount: 0, error: error.message }; } } return results; }34:T55d, // Cell 3: HTML Table Generator function createAlignmentTable(chartResult) { const { data, suttaNames } = chartResult; return html` ${suttaNames.map(sutta => html`` )} ${data.map(row => html` ${suttaNames.map(sutta => { const hasX = row[sutta] === 'x'; return html``; })} `)}

${sutta}	Text Content
${row[sutta]}	${row.text}

`; }35:T51a,// Observable cell: fetch collation from API and parse table collationResult = (async () => { // Use the existing `witnesses` variable in your notebook if (!witnesses || witnesses.length < 2) { throw new Error("Please define at least 2 witnesses in the `witnesses` cell"); } // Fetch collation from your PythonAnywhere API const response = await fetch("https://cittadhammo.pythonanywhere.com/collate", { method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify({witnesses}) }); if (!response.ok) throw new Error(`API response failed with status: ${response.status}`); const data = await response.json(); // Parse ASCII table into array of rows const parseAsciiTable = ascii => { const lines = ascii.split("\n").filter(line => line.startsWith("|")); return lines.map(line => line .slice(1, -1) // remove leading and trailing '|' .split("|") // split columns .map(cell => cell.trim()) // trim spaces ); }; // Convert into object: { W1: ["Alpha","beta","gamma"], ... } const parsedTable = {}; parseAsciiTable(data.collation_result).forEach(row => { const [id, ...tokens] = row; parsedTable[id] = tokens; }); return parsedTable; // value of this cell })(); 36:T60e,// Cell 1: Data Processing Function function createAlignmentChart(tableRows) { // Extract sutta names (excluding 'index') const suttaNames = Object.keys(tableRows[0]).filter(key => key !== 'index'); // Group rows by their text content const textGroups = new Map(); tableRows.forEach(row => { // Get all text values for this row (excluding index) const textValues = suttaNames.map(sutta => row[sutta]); // Create entries for each unique text value textValues.forEach((text, suttaIndex) => { const suttaName = suttaNames[suttaIndex]; if (!textGroups.has(text)) { textGroups.set(text, { text: text, suttas: new Set(), firstIndex: row.index }); } textGroups.get(text).suttas.add(suttaName); // Keep the earliest index for sorting if (row.index < textGroups.get(text).firstIndex) { textGroups.get(text).firstIndex = row.index; } }); }); // Convert to chart data format const chartData = Array.from(textGroups.entries()).map(([text, data]) => { const row = { text: text, originalIndex: data.firstIndex }; // Add columns for each sutta (x if present, empty if not) suttaNames.forEach(sutta => { row[sutta] = data.suttas.has(sutta) ? 'x' : ''; }); return row; }); // Sort by original index to maintain order chartData.sort((a, b) => a.originalIndex - b.originalIndex); return { data: chartData, suttaNames: suttaNames }; }37:T482,// Cell 5: HTML Legend for Sutta Lines suttaLegend = { const { lines } = subwayData; return html`

Sutta Lines (${lines.length})

${lines.map(line => html`

${line.name}
${line.stations.length} stations

`)}

`; }38:T183b,// // Cell 4: Create Subway Chart // subwayChart1 = { // const { width, margin } = subwayConfig; // const { stations, lines } = subwayData; // // Calculate dynamic height based on number of stations // const dynamicHeight = Math.max(400, stations.length * subwayConfig.stationSpacing + margin.top + margin.bottom + 100); // // Create SVG // const svg = d3.create("svg") // .attr("width", width) // .attr("height", dynamicHeight) // .attr("viewBox", [0, 0, width, dynamicHeight]) // .style("font-family", "Arial, sans-serif"); // // Create main group with margins // const g = svg.append("g") // .attr("transform", `translate(${margin.left}, ${margin.top})`); // const chartWidth = width - margin.left - margin.right; // const chartHeight = dynamicHeight - margin.top - margin.bottom; // // Draw metro lines (vertical lines for each sutta) // const lineGroup = g.append("g").attr("class", "metro-lines"); // const firstStationY = Math.min(...stations.map(s => s.y)); // const lastStationY = Math.max(...stations.map(s => s.y)); // const titleGap = 30; // lines.forEach(line => { // // Draw the main line (from first station to last station) // lineGroup.append("line") // .attr("x1", line.x) // .attr("y1", firstStationY) // .attr("x2", line.x) // .attr("y2", lastStationY) // .attr("stroke", line.color) // .attr("stroke-width", subwayConfig.lineWidth) // .attr("opacity", 0.8); // // Add line label at top (tilted 45 degrees, with gap from first station) // lineGroup.append("text") // .attr("x", line.x + 10) // .attr("y", firstStationY - titleGap) // .attr("text-anchor", "middle") // .attr("transform", `rotate(-45, ${line.x + 10}, ${firstStationY - titleGap})`) // .style("font-size", "12px") // .style("font-weight", "bold") // .style("fill", line.color) // .text(line.name); // // Add line label at bottom (tilted 45 degrees, with gap from last station) // lineGroup.append("text") // .attr("x", line.x - 10) // .attr("y", lastStationY + titleGap) // .attr("text-anchor", "middle") // .attr("transform", `rotate(-45, ${line.x - 10}, ${lastStationY + titleGap})`) // .style("font-size", "12px") // .style("font-weight", "bold") // .style("fill", line.color) // .text(line.name); // }); // // Draw horizontal connection bars for stations at the same level // const connectionGroup = g.append("g").attr("class", "connection-bars"); // stations.forEach(station => { // const stationCount = station.suttas.length; // const isFullConnection = stationCount === lines.length; // // Only draw bar if there are 2 or more stations on the same level // if (stationCount >= 2) { // // Get x positions of lines that have stations at this level // const connectedLines = lines.filter(line => station.suttas.includes(line.name)); // const xPositions = connectedLines.map(line => line.x); // const firstStationX = Math.min(...xPositions); // const lastStationX = Math.max(...xPositions); // // Draw horizontal bar connecting stations at this level // connectionGroup.append("line") // .attr("x1", firstStationX) // .attr("y1", station.y) // .attr("x2", lastStationX) // .attr("y2", station.y) // .attr("stroke", isFullConnection ? "black" : "#ddd") // .attr("stroke-width", subwayConfig.stationRadius * 2) // .attr("opacity", isFullConnection ? 0.8 : 0.5); // } // }); // // Draw stations // const stationGroup = g.append("g").attr("class", "stations"); // // Calculate text column position (to the right of all metro lines) // const textColumnX = Math.max(...lines.map(line => line.x)) + subwayConfig.lineSpacing; // stations.forEach(station => { // // Station circles on each line that contains this text // station.suttas.forEach(suttaName => { // const line = lines.find(l => l.name === suttaName); // if (line) { // stationGroup.append("circle") // .attr("cx", line.x) // .attr("cy", station.y) // .attr("r", subwayConfig.stationRadius) // .attr("fill", line.color) // .attr("stroke", "white") // .attr("stroke-width", 2) // .style("cursor", "pointer") // .append("title") // .text(`${suttaName}: ${station.text}`); // } // }); // // Station label (positioned to the right of all metro lines) // stationGroup.append("text") // .attr("x", textColumnX) // .attr("y", station.y + 4) // .attr("text-anchor", "start") // .style("font-size", "11px") // .style("fill", "#333") // .text(station.text) // .style("cursor", "help") // .append("title") // .text(station.text); // }); // // Add legend // const legend = g.append("g") // .attr("class", "legend") // .attr("transform", `translate(${chartWidth + 20}, 50)`); // legend.append("text") // .attr("x", 0) // .attr("y", 0) // .style("font-size", "14px") // .style("font-weight", "bold") // .style("fill", "#333") // .text("Sutta Lines"); // lines.forEach((line, i) => { // const legendItem = legend.append("g") // .attr("transform", `translate(0, ${20 + i * 25})`); // legendItem.append("line") // .attr("x1", 0) // .attr("y1", 0) // .attr("x2", 20) // .attr("y2", 0) // .attr("stroke", line.color) // .attr("stroke-width", subwayConfig.lineWidth); // legendItem.append("circle") // .attr("cx", 10) // .attr("cy", 0) // .attr("r", subwayConfig.stationRadius) // .attr("fill", line.color) // .attr("stroke", "white") // .attr("stroke-width", 2); // legendItem.append("text") // .attr("x", 30) // .attr("y", 4) // .style("font-size", "12px") // .style("fill", "#333") // .text(`${line.name} (${line.stations.length} stations)`); // }); // return svg.node(); // }39:T41c,// Cell 3: Process Data for Subway Chart subwayData2 = { const { data, suttaNames } = alignmentResult; // Function to truncate text with ellipsis in the middle function truncateMiddle(text, maxLength) { if (text.length <= maxLength) return text; const halfLength = Math.floor((maxLength - 3) / 2); return text.substring(0, halfLength) + " (...) " + text.substring(text.length - halfLength); } // Create stations (unique texts) const stations = data.map((row, index) => ({ id: index, text: row.text, displayText: truncateMiddle(row.text, subwayConfig2.maxStationNameLength), y: index * subwayConfig2.stationSpacing, suttas: suttaNames.filter(sutta => row[sutta] === 'x') })); // Create lines (suttas) const lines = suttaNames.map((sutta, index) => ({ name: sutta, color: subwayConfig2.colors[index % subwayConfig2.colors.length], x: index * subwayConfig2.lineSpacing, stations: stations.filter(station => station.suttas.includes(sutta)) })); return { stations, lines }; }3a:T18aa,// // Cell 4: Create Subway Chart // subwayChart2 = { // const { width, margin } = subwayConfig2; // const { stations, lines } = subwayData2; // // Calculate dynamic height based on number of stations // const dynamicHeight = Math.max(400, stations.length * subwayConfig2.stationSpacing + margin.top + margin.bottom + 100); // // Create SVG // const svg = d3.create("svg") // .attr("width", width) // .attr("height", dynamicHeight) // .attr("viewBox", [0, 0, width, dynamicHeight]) // .style("font-family", "Arial, sans-serif"); // // Create main group with margins // const g = svg.append("g") // .attr("transform", `translate(${margin.left}, ${margin.top})`); // const chartWidth = width - margin.left - margin.right; // const chartHeight = dynamicHeight - margin.top - margin.bottom; // // Draw metro lines (vertical lines for each sutta) // const lineGroup = g.append("g").attr("class", "metro-lines"); // const firstStationY = Math.min(...stations.map(s => s.y)); // const lastStationY = Math.max(...stations.map(s => s.y)); // const titleGap = 30; // lines.forEach(line => { // // Draw the main line (from first station to last station) // lineGroup.append("line") // .attr("x1", line.x) // .attr("y1", firstStationY) // .attr("x2", line.x) // .attr("y2", lastStationY) // .attr("stroke", line.color) // .attr("stroke-width", subwayConfig2.lineWidth) // .attr("opacity", 0.8); // // Add line label at top (tilted 45 degrees, with gap from first station) // lineGroup.append("text") // .attr("x", line.x + 10) // .attr("y", firstStationY - titleGap) // .attr("text-anchor", "middle") // .attr("transform", `rotate(-45, ${line.x + 10}, ${firstStationY - titleGap})`) // .style("font-size", "12px") // .style("font-weight", "bold") // .style("fill", line.color) // .text(line.name); // // Add line label at bottom (tilted 45 degrees, with gap from last station) // lineGroup.append("text") // .attr("x", line.x - 10) // .attr("y", lastStationY + titleGap) // .attr("text-anchor", "middle") // .attr("transform", `rotate(-45, ${line.x - 10}, ${lastStationY + titleGap})`) // .style("font-size", "12px") // .style("font-weight", "bold") // .style("fill", line.color) // .text(line.name); // }); // // Draw horizontal connection bars for stations at the same level // const connectionGroup = g.append("g").attr("class", "connection-bars"); // stations.forEach(station => { // const stationCount = station.suttas.length; // const isFullConnection = stationCount === lines.length; // // Only draw bar if there are 2 or more stations on the same level // if (stationCount >= 2) { // // Get x positions of lines that have stations at this level // const connectedLines = lines.filter(line => station.suttas.includes(line.name)); // const xPositions = connectedLines.map(line => line.x); // const firstStationX = Math.min(...xPositions); // const lastStationX = Math.max(...xPositions); // // Draw horizontal bar connecting stations at this level // connectionGroup.append("line") // .attr("x1", firstStationX) // .attr("y1", station.y) // .attr("x2", lastStationX) // .attr("y2", station.y) // .attr("stroke", isFullConnection ? "black" : "#ddd") // .attr("stroke-width", subwayConfig2.stationRadius * 2) // .attr("opacity", isFullConnection ? 0.8 : 0.5); // } // }); // // Draw stations // const stationGroup = g.append("g").attr("class", "stations"); // // Calculate text column position (to the right of all metro lines) // const textColumnX = Math.max(...lines.map(line => line.x)) + subwayConfig2.lineSpacing; // stations.forEach(station => { // // Station circles on each line that contains this text // station.suttas.forEach(suttaName => { // const line = lines.find(l => l.name === suttaName); // if (line) { // stationGroup.append("circle") // .attr("cx", line.x) // .attr("cy", station.y) // .attr("r", subwayConfig2.stationRadius) // .attr("fill", line.color) // .attr("stroke", "white") // .attr("stroke-width", 2) // .style("cursor", "pointer") // .append("title") // .text(`${suttaName}: ${station.text}`); // } // }); // // Station label (positioned to the right of all metro lines) // stationGroup.append("text") // .attr("x", textColumnX) // .attr("y", station.y + 4) // .attr("text-anchor", "start") // .style("font-family", "Arial, sans-serif") // .style("font-size", "12px") // .style("font-weight", "normal") // .style("fill", "#333") // .style("cursor", "help") // .text(station.displayText) // .append("title") // .text(station.text); // }); // // Add legend // const legend = g.append("g") // .attr("class", "legend") // .attr("transform", `translate(${chartWidth - 400}, 50)`); // legend.append("text") // .attr("x", 0) // .attr("y", 0) // .style("font-size", "14px") // .style("font-weight", "bold") // .style("fill", "#333") // .text("Sutta Lines"); // lines.forEach((line, i) => { // const legendItem = legend.append("g") // .attr("transform", `translate(0, ${20 + i * 25})`); // legendItem.append("line") // .attr("x1", 0) // .attr("y1", 0) // .attr("x2", 20) // .attr("y2", 0) // .attr("stroke", line.color) // .attr("stroke-width", subwayConfig2.lineWidth); // legendItem.append("circle") // .attr("cx", 10) // .attr("cy", 0) // .attr("r", subwayConfig2.stationRadius) // .attr("fill", line.color) // .attr("stroke", "white") // .attr("stroke-width", 2); // legendItem.append("text") // .attr("x", 30) // .attr("y", 4) // .style("font-size", "12px") // .style("fill", "#333") // .text(`${line.name} (${line.stations.length} stations)`); // }); // return svg.node(); // } 3b:T1381,// // Cell 4: Create Subway Chart // subwayChart0 = { // const { width, margin } = subwayConfig; // const { stations, lines } = subwayData; // // Calculate dynamic height based on number of stations // const dynamicHeight = Math.max(400, stations.length * subwayConfig.stationSpacing + margin.top + margin.bottom + 100); // // Create SVG // const svg = d3.create("svg") // .attr("width", width) // .attr("height", dynamicHeight) // .attr("viewBox", [0, 0, width, dynamicHeight]) // .style("font-family", "Arial, sans-serif"); // // Create main group with margins // const g = svg.append("g") // .attr("transform", `translate(${margin.left}, ${margin.top})`); // const chartWidth = width - margin.left - margin.right; // const chartHeight = dynamicHeight - margin.top - margin.bottom; // // Draw metro lines (vertical lines for each sutta) // const lineGroup = g.append("g").attr("class", "metro-lines"); // const firstStationY = Math.min(...stations.map(s => s.y)); // const lastStationY = Math.max(...stations.map(s => s.y)); // const titleGap = 30; // lines.forEach(line => { // // Draw the main line (from first station to last station) // lineGroup.append("line") // .attr("x1", line.x) // .attr("y1", firstStationY) // .attr("x2", line.x) // .attr("y2", lastStationY) // .attr("stroke", line.color) // .attr("stroke-width", subwayConfig.lineWidth) // .attr("opacity", 0.8); // // Add line label at top (tilted 45 degrees, with gap from first station) // lineGroup.append("text") // .attr("x", line.x + 10) // .attr("y", firstStationY - titleGap) // .attr("text-anchor", "middle") // .attr("transform", `rotate(-45, ${line.x + 10}, ${firstStationY - titleGap})`) // .style("font-size", "12px") // .style("font-weight", "bold") // .style("fill", line.color) // .text(line.name); // // Add line label at bottom (tilted 45 degrees, with gap from last station) // lineGroup.append("text") // .attr("x", line.x - 10) // .attr("y", lastStationY + titleGap) // .attr("text-anchor", "middle") // .attr("transform", `rotate(-45, ${line.x - 10}, ${lastStationY + titleGap})`) // .style("font-size", "12px") // .style("font-weight", "bold") // .style("fill", line.color) // .text(line.name); // }); // // Draw stations // const stationGroup = g.append("g").attr("class", "stations"); // // Calculate text column position (to the right of all metro lines) // const textColumnX = Math.max(...lines.map(line => line.x)) + subwayConfig.lineSpacing; // stations.forEach(station => { // // Station circles on each line that contains this text // station.suttas.forEach(suttaName => { // const line = lines.find(l => l.name === suttaName); // if (line) { // stationGroup.append("circle") // .attr("cx", line.x) // .attr("cy", station.y) // .attr("r", subwayConfig.stationRadius) // .attr("fill", line.color) // .attr("stroke", "white") // .attr("stroke-width", 2) // .style("cursor", "pointer") // .append("title") // .text(`${suttaName}: ${station.text}`); // } // }); // // Station label (positioned to the right of all metro lines) // stationGroup.append("text") // .attr("x", textColumnX) // .attr("y", station.y + 4) // .attr("text-anchor", "start") // .style("font-size", "11px") // .style("fill", "#333") // .text(station.text) // .style("cursor", "help") // .append("title") // .text(station.text); // }); // // Add legend // const legend = g.append("g") // .attr("class", "legend") // .attr("transform", `translate(${chartWidth + 20}, 50)`); // legend.append("text") // .attr("x", 0) // .attr("y", 0) // .style("font-size", "14px") // .style("font-weight", "bold") // .style("fill", "#333") // .text("Sutta Lines"); // lines.forEach((line, i) => { // const legendItem = legend.append("g") // .attr("transform", `translate(0, ${20 + i * 25})`); // legendItem.append("line") // .attr("x1", 0) // .attr("y1", 0) // .attr("x2", 20) // .attr("y2", 0) // .attr("stroke", line.color) // .attr("stroke-width", subwayConfig.lineWidth); // legendItem.append("circle") // .attr("cx", 10) // .attr("cy", 0) // .attr("r", subwayConfig.stationRadius) // .attr("fill", line.color) // .attr("stroke", "white") // .attr("stroke-width", 2); // legendItem.append("text") // .attr("x", 30) // .attr("y", 4) // .style("font-size", "12px") // .style("fill", "#333") // .text(`${line.name} (${line.stations.length} stations)`); // }); // return svg.node(); // }3c:[] 2f:{"id":"f299aa446dfe589a","slug":null,"title":"Automated Textual Collation of Sutta with CollateX","thumbnail":"296d0c3c060c934ff1bcc72167cf335a5d7977c4688a0a6a6f586ee0542991a3","access_level":"public","create_time":"$D2025-09-27T13:08:02.460Z","update_time":"$D2025-10-03T06:25:36.887Z","view_time":null,"first_public_time":"$D2025-09-28T12:07:49.041Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d277e65fbd31f04d","login":"cittadhammo","name":"Cittadhammo","avatar_url":"https://avatars-next.observableusercontent.com/e3cb3f2eef03b628da9dd1e938902c82ffb474c2adb36b34ce7ffd562d9f2158","tier":"starter_2024"},"version":462,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7722371e7ecac8bd","login":"cittadhammo","name":"Cittadhammo","avatar_url":"https://avatars-next.observableusercontent.com/e3cb3f2eef03b628da9dd1e938902c82ffb474c2adb36b34ce7ffd562d9f2158","tier":null}],"members":[{"type":"individual","id":"7722371e7ecac8bd","login":"cittadhammo","name":"Cittadhammo","avatar_url":"https://avatars-next.observableusercontent.com/e3cb3f2eef03b628da9dd1e938902c82ffb474c2adb36b34ce7ffd562d9f2158","tier":null,"role":"editor"},{"type":"team","id":"d277e65fbd31f04d","login":"cittadhammo","name":"Cittadhammo","avatar_url":"https://avatars-next.observableusercontent.com/e3cb3f2eef03b628da9dd1e938902c82ffb474c2adb36b34ce7ffd562d9f2158","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Automated Textual Collation of Sutta with CollateX","cells":[{"id":0,"value":"# Automated Textual Collation of Sutta with CollateX\n\nThis notebook use a free python API, so it is a bit slow to update ;-) ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"// Cell 3: Input form for sutta IDs\nviewof suttaInput = Inputs.textarea({\n label: \"Enter Sutta IDs (one per line or space-separated)\",\n placeholder: \"sn45.1\\nsn45.2\",\n rows: 4,\n width: 400,\n value: \"sn12.52\\nsn12.53\\nsn12.54\\nsn12.55\\nsn12.56\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"// Cell 2: Language selection\nviewof selectedLanguage = Inputs.select(\n [\"en\", \"pli\"], \n {\n label: \"Select language\",\n format: x => x === \"en\" ? \"English\" : \"Pāli\",\n value: \"pli\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"DOM.download(() => serialize(chart), undefined, \"Save as SVG\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"viewof PNGprecision = Inputs.range([2, 4], {label: \"Amount\", step: 1, value: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"DOM.download(() => rasterizeWhite(chart), undefined, \"Save as PNG\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"// Cell 2: Subway Chart Configuration\nsubwayConfig = ({\n width: 900,\n height: 800,\n margin: { top: 100, right: 150, bottom: 30, left: 90 },\n stationRadius: 5.2,\n lineWidth: 5,\n stationSpacing: 17,\n lineSpacing: 22,\n colors: d3.schemeCategory10,\n //maxStationNameLength: 1000,\n lineBreakLength: 60\n\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"// Cell 2: Process Your Data\nalignmentResult = createAlignmentChart(tableRows)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"witnesses = transformToWitnesses(suttaTexts)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"// Cell 4: Parse sutta IDs\nsuttaIds = {\n const input = suttaInput.trim();\n if (!input) return [];\n \n // Split by newlines or spaces and clean up\n return input\n .split(/[\\n\\s]+/)\n .map(id => id.trim().toLowerCase())\n .filter(id => id.length > 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"// Cell 5: Helper function to get author for language\nfunction getAuthorForLanguage(suttaData, language) {\n if (language === \"pli\") {\n return suttaData.root_text?.author_uid || \"ms\";\n } else {\n // For English, try to get Sujato first, then any English translation\n const englishTranslations = suttaData.suttaplex?.translations?.filter(t => t.lang === \"en\") || [];\n const sujato = englishTranslations.find(t => t.author_uid === \"sujato\");\n if (sujato) return \"sujato\";\n \n const segmented = englishTranslations.find(t => t.segmented);\n if (segmented) return segmented.author_uid;\n \n return englishTranslations[0]?.author_uid || \"sujato\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"function transformToWitnesses(inputObj) {\n return Object.values(inputObj).map((entry, index) => ({\n id: entry.id,\n text: entry.text,\n title: entry.title,\n wordCount: entry.wordCount,\n segments: entry.segments\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"// Get the maximum array length\nmaxLength = Math.max(...Object.values(collationResult).map(arr => arr.length))\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"// Build rows: each row is an object with index and values for each column\ntableRows = Array.from({length: maxLength}, (_, i) => {\n const row = { index: i }\n for (const key of Object.keys(collationResult)) {\n row[key] = collationResult[key][i] ?? \"\" // use empty string if no value\n }\n return row\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"function rasterizeWhite(svg) {\n let resolve, reject;\n const promise = new Promise((y, n) => ((resolve = y), (reject = n)));\n const image = new Image();\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(\n rect.width * PNGprecision,\n rect.height * PNGprecision\n );\n context.fillStyle = \"white\";\n context.fillRect(\n 0,\n 0,\n rect.width * PNGprecision,\n rect.height * PNGprecision\n );\n context.drawImage(\n image,\n 0,\n 0,\n rect.width * PNGprecision,\n rect.height * PNGprecision\n );\n context.canvas.toBlob(resolve, \"image/png\", 1);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"# Python in Notebook","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":399,"value":"## Draft below this...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"// Cell 7: Display fetched suttas summary\nhtml`

Fetched Suttas (${Object.keys(suttaTexts).length}) - Language: ${selectedLanguage === \"en\" ? \"English\" : \"Pāli\"}

\n ${Object.values(suttaTexts).map(sutta => html`\n

\n ${sutta.title} (${sutta.id})\n
Author: ${sutta.author} | Language: ${sutta.language}\n
Words: ${sutta.wordCount}${sutta.segments ? ` | Segments: ${sutta.segments}` : ''}\n ${sutta.error ? html`
Error: ${sutta.error}` : ''}\n ${sutta.text ? html`
${sutta.text.substring(0, 300)}${sutta.text.length > 300 ? '...' : ''}` : ''}\n

\n `)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"## Crop Text with (...)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":217,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"// Cell 2: Subway Chart Configuration\nsubwayConfig2 = ({\n width: 1200,\n height: 800,\n margin: { top: 60, right: 150, bottom: 60, left: 200 },\n stationRadius: 5.5,\n lineWidth: 5,\n stationSpacing: 17,\n lineSpacing: 22,\n colors: d3.schemeCategory10,\n maxStationNameLength: 80\n\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"// Cell 2: Subway Chart Configuration\nsubwayConfig0 = ({\n width: 1200,\n //height: 800,\n margin: { top: 60, right: 150, bottom: 60, left: 200 },\n stationRadius: 6,\n lineWidth: 5,\n stationSpacing: 15,\n lineSpacing: 20,\n colors: d3.schemeCategory10,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"// Cell 3: Process Data for Subway Chart\nsubwayData0 = {\n const { data, suttaNames } = alignmentResult;\n \n // Create stations (unique texts)\n const stations = data.map((row, index) => ({\n id: index,\n text: row.text,\n shortText: row.text.length > 30 ? row.text.substring(0, 30) + \"...\" : row.text,\n y: index * subwayConfig.stationSpacing,\n suttas: suttaNames.filter(sutta => row[sutta] === 'x')\n }));\n \n // Create lines (suttas)\n const lines = suttaNames.map((sutta, index) => ({\n name: sutta,\n color: subwayConfig.colors[index % subwayConfig.colors.length],\n x: index * subwayConfig.lineSpacing,\n stations: stations.filter(station => station.suttas.includes(sutta))\n }));\n \n return { stations, lines };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"// Cell 4: Display the Chart\n// chart0 = createAlignmentTable(alignmentResult)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 30:"$2f:body"