25:["$","title",null,{"children":"Untitled | Wei Wei's Workspace | Observable"}] 49:T1b93,function Timeline(data) { // Chart dimensions and configuration const margin = ({ top: 10, right: 20, bottom: 50, left: 20 }); // Increase bottom margin const width = 1000; // Dynasty key years const dynastyKeyPoint = [25,220, 266, 316,420]; const WuDuration = [229,280]; const ShuDuration = [221,263]; // Bar fill color const barFillColor = "steelblue"; const hanBGColor = "#f7f4f9"; // Calculate max of the death year and min of the birth year const maxYear = Math.max(...data.map(d => d.Death_year)) + 20; const minYear = Math.min(...data.map(d => d.Birth_year)) - 20; // Compute the y position for each bar const yPos = computeBarYPosition(data, direction); // Calculate the maximum yPos value and the height of the chart const yPosMax = Math.max(...yPos); const yPosMin = Math.min(...yPos); const chartHeight = (yPosMax - yPosMin) * barHeight * 2; const height = chartHeight + margin.top + margin.bottom; // Create X and Y scales const xScale = d3.scaleLinear().domain([minYear, maxYear]).range([margin.left, width - margin.right]); const yScale = d3.scalePoint().domain(d3.range(yPosMin, yPosMax + 1)).range([height - margin.bottom, margin.top]).padding(1.5); // Create the chart const svg = d3.select(document.createElementNS("http://www.w3.org/2000/svg", "svg")) .attr("width", width) .attr("height", height); const centuryStart = Math.ceil(minYear / 100) * 100; const centuries = d3.range(centuryStart, maxYear, 100); // Draw vertical gridlines at every century mark const linesLayer = svg.append("g").attr("class", "lines-layer"); // Create the tooltip container. const tooltip = svg.append("g"); // Create bars const background = svg.append("g") createBG(background,linesLayer,chartHeight,xScale, margin); linesLayer.append("g") .selectAll("line") .data(centuries) .join("line") .attr("x1", d => xScale(d)) .attr("x2", d => xScale(d)) .attr("y1", margin.bottom) .attr("y2", chartHeight) .style("stroke", "rgba(0,0,0,0.2)") .style("stroke-dasharray", "2,2"); // Draw x-axis with labels every 20 years svg.append("g") .attr("transform", `translate(0,${chartHeight})`) .call(d3.axisBottom(xScale) .tickValues(d3.range(Math.floor(minYear / 20) * 20, maxYear, 20)) .tickFormat(d3.format(".0f")) // Add this line to change the tick format .tickSizeOuter(0)); // Create bars and labels const bars = svg.append("g") .selectAll("g") .data(data) .join("g"); // Create bars bars.append("rect") .attr("x", d => xScale(d.Birth_year)) .attr("width", d => xScale(d.Death_year) - xScale(d.Birth_year)) .attr("y", (d, i) => yScale(yPos[i])) .attr("height", barHeight) .attr("fill", barFillColor); // Create labels displaying only name bars.append("text") .text(d => d.Name_cn) .attr("x", d => xScale(d.Birth_year) + 4) .attr("y", (d, i) => yScale(yPos[i]) + barHeight / 2) .attr("alignment-baseline", "central") .attr("font-size", 1.2*barHeight) .attr("fill", "white") .attr("white-space", "nowrap") // .attr("overflow", "hidden") .attr("text-overflow", "ellipsis"); // Mouseover and mouseout events for scrolling labels and showing dates on the timeline bars.on("mouseover", function (event, index) { const bar = d3.select(this); const d = data[index]; tooltip.style("display", null); tooltip.attr("transform", `translate(${xScale(d.Birth_year)},${yScale(yPos[index]) + barHeight})`); const path = tooltip.selectAll("path") .data([,]) .join("path") .attr("fill", "white") .attr("stroke", "black"); const text = tooltip.selectAll("text") .data([,]) // Assuming lines are separated by '。' .join("text") .call(text => text .selectAll("tspan") .data((d.Name_cn+', 字'+ d.Zi +'。'+d.Note).split('。')) .join("tspan") .attr("x", 0) .attr("y", (_, i) => `${i * 1.1}em`) .attr("font-weight", (_, i) => i ? null : "bold") .text(d => d) ); const {x, y, width: w, height: h} = text.node().getBBox(); text.attr("transform", `translate(${-w / 2},${15 - y})`); path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`); tooltip.node().parentNode.appendChild(tooltip.node()); // Show vertical lines and dates along the timeline const lineGroup = svg.append("g") .attr("class", "timeline-hover") lineGroup.append("line") .attr("x1", xScale(d.Birth_year)) .attr("x2", xScale(d.Birth_year)) .attr("y1", yScale(yPos[index]) + barHeight) // Start from the bottom of the bar .attr("y2", chartHeight) .style("stroke", "rgba(225,0,0,0.3)"); lineGroup.append("line") .attr("x1", xScale(d.Death_year)) .attr("x2", xScale(d.Death_year)) .attr("y1", yScale(yPos[index]) + barHeight) // Start from the bottom of the bar .attr("y2", chartHeight) .style("stroke", "rgba(225,0,0,0.3)"); lineGroup.append("text") .text(d.Birth_year) .attr("x", xScale(d.Birth_year)) .attr("y", chartHeight + 30) .attr("text-anchor", "middle") .attr("fill", "red"); // Display birth date in red lineGroup.append("text") .text(d.Death_year) .attr("x", xScale(d.Death_year)) .attr("y", chartHeight + 30) .attr("text-anchor", "middle") .attr("fill", "red"); // Display death date in red // Scroll label if necessary const label = bar.select("text"); const labelWidth = label.node().getComputedTextLength(); const barWidth = xScale(d.Death_year) - xScale(d.Birth_year); if (labelWidth > barWidth - 8) { const scrollAmount = labelWidth - barWidth + 12; // Leave some padding for visual clarity label.interrupt() // Stop any active transition .transition() .duration(2000) .ease(d3.easeQuadInOut) .attr("x", d => xScale(d.Birth_year) + 4 - scrollAmount) .attr("clip-path", 'polygon(0,0,${barWidth},0,${barWidth},${barHeight},0,${barHeight})'); } }) .on("mouseout", function (event, index) { // Hide vertical lines and dates along the timeline svg.selectAll(".timeline-hover").remove(); const d = data[index]; // Set the bar color back to the original d3.select(this).select("rect").attr("fill", barFillColor); // Hide tip tooltip.style("display", "none"); // Reset the label position to original const label = d3.select(this).select("text"); const currentXPosition = parseFloat(label.attr("x")); const originalXPosition = xScale(d.Birth_year) + 4; if (currentXPosition !== originalXPosition) { label.interrupt() // Stop any active transition .transition() .duration(2000) .ease(d3.easeQuadInOut) .attr("x", originalXPosition); } }); // Return the SVG node as a value return svg.node(); }4a:T4b2,function computeBarYPosition(data, direction = "center") { function xOverlaps(a, b) { return a.Birth_year < b.Death_year + 1 && a.Death_year + 1 > b.Birth_year; } const yPos = []; const lastBars = {}; let minRow = 0; let maxRow = 0; data.sort((a, b) => a.Birth_year - b.Birth_year); data.forEach((d, i) => { if (i === 0) { yPos[i] = 0; lastBars[0] = d; return; } let optimalRow; let minDeathYear = Infinity; for (const row of Object.keys(lastBars).map(Number)) { if (!xOverlaps(lastBars[row], d) && lastBars[row]?.Death_year < minDeathYear) { optimalRow = row; minDeathYear = lastBars[row]?.Death_year; } } if (optimalRow === undefined) { if (direction === "top") { optimalRow = maxRow + 1; } else if (direction === "bottom") { optimalRow = minRow - 1; } else { optimalRow = Math.abs(minRow - 1) < maxRow + 1 ? minRow - 1 : maxRow + 1; } } yPos[i] = optimalRow; lastBars[optimalRow] = d; if (optimalRow < minRow) { minRow = optimalRow; } if (optimalRow > maxRow) { maxRow = optimalRow; } }); return yPos; }4b:T596,function createBG(bg,linesLayer,chartHeight,xScale, margin){ // Dynasty key years const dynastyKeyPoint = [25,220, 266, 316,420]; const hanBGColor = "#e7e1ef"; const weiBGColor = "#fde0dd"; const westJinBGColor = "#f7fcb9"; const eastJinBGColor = "#edf8b1"; bg.append("rect") .attr("x", xScale(dynastyKeyPoint[0])) .attr("width", xScale(dynastyKeyPoint[1])-xScale(dynastyKeyPoint[0])) .attr("y", 0) .attr("height", chartHeight) .attr("fill", hanBGColor); bg.append("rect") .attr("x", xScale(dynastyKeyPoint[1])) .attr("width", xScale(dynastyKeyPoint[2])-xScale(dynastyKeyPoint[1])) .attr("y", 0) .attr("height", chartHeight) .attr("fill", weiBGColor); bg.append("rect") .attr("x", xScale(dynastyKeyPoint[2])) .attr("width", xScale(dynastyKeyPoint[3])-xScale(dynastyKeyPoint[2])) .attr("y", 0) .attr("height", chartHeight) .attr("fill", westJinBGColor); bg.append("rect") .attr("x", xScale(dynastyKeyPoint[3])) .attr("width", xScale(dynastyKeyPoint[4])-xScale(dynastyKeyPoint[3])) .attr("y", 0) .attr("height", chartHeight) .attr("fill", eastJinBGColor); linesLayer.append("g") .selectAll("line") .data(dynastyKeyPoint) .join("line") .attr("x1", d => xScale(d)) .attr("x2", d => xScale(d)) .attr("y1", margin.bottom) .attr("y2", chartHeight) .style("stroke", "rgba(0,0,1,1)"); }4c:[{"id":"3f7ede65cadd073cb9dec44f09b226eaad28f02cd257e9bf1660888ae423219c2091c21d540cc46f09c7c682a46510ccf7c4e368bc34343f5fadccb0b5c08896","href":"https://static.observableusercontent.com/files/3f7ede65cadd073cb9dec44f09b226eaad28f02cd257e9bf1660888ae423219c2091c21d540cc46f09c7c682a46510ccf7c4e368bc34343f5fadccb0b5c08896","name":"lifespanData@1.csv","type":"text/csv","lastModified":1696723196856.954,"size":25174},{"id":"c2cfa207130e0d5aba9c2bd675009a162d57084968c98d6e4fa0c134ccc38a941140e1213498392033e70a577b062eb445c32801d446878520b3130985453273","href":"https://static.observableusercontent.com/files/c2cfa207130e0d5aba9c2bd675009a162d57084968c98d6e4fa0c134ccc38a941140e1213498392033e70a577b062eb445c32801d446878520b3130985453273","name":"family_tree@18.json","type":"application/json","lastModified":1698899307077.594,"size":386},{"id":"4f69ae0e2bde597ef3341da963799b3251dfe0fe6210330c81deea7a27c91b31026dfdda43535bb1fbff8b3578e7ca5022167acd3400f81a4e5d42d25b2de4f8","href":"https://static.observableusercontent.com/files/4f69ae0e2bde597ef3341da963799b3251dfe0fe6210330c81deea7a27c91b31026dfdda43535bb1fbff8b3578e7ca5022167acd3400f81a4e5d42d25b2de4f8","name":"sanguoJson.json","type":"application/json","lastModified":1698902177205.797,"size":497497},{"id":"0e9078ce0e0982c23e9e0e5038c8167e9d044f68235a287c72ea9d9432bb5e0f8ea11988b4ebefdef6a36639c03d447cc034f08298af82607591d10273041dcc","href":"https://static.observableusercontent.com/files/0e9078ce0e0982c23e9e0e5038c8167e9d044f68235a287c72ea9d9432bb5e0f8ea11988b4ebefdef6a36639c03d447cc034f08298af82607591d10273041dcc","name":"family_tree@19.json","type":"application/json","lastModified":1698904769050.473,"size":1142},{"id":"fcc0015cbe24eea265833239de543af33607f288cc9959f9ce4d0e2456b25dbaae5ff62a355704d879441905518bdbbeef0d13496346f63bfed61b07decbd0d3","href":"https://static.observableusercontent.com/files/fcc0015cbe24eea265833239de543af33607f288cc9959f9ce4d0e2456b25dbaae5ff62a355704d879441905518bdbbeef0d13496346f63bfed61b07decbd0d3","name":"civilization timelines - civilization timelines.csv","type":"text/csv","lastModified":1694734538858.851,"size":3382},{"id":"b0395f660cd022630043ae3e84eba4998b442b3ddc36c1293efcf1a7796b8f27e1ea2f90b7402d7a4a7e6a96460b695ba6f8f62456be082defa40f2948ce9163","href":"https://static.observableusercontent.com/files/b0395f660cd022630043ae3e84eba4998b442b3ddc36c1293efcf1a7796b8f27e1ea2f90b7402d7a4a7e6a96460b695ba6f8f62456be082defa40f2948ce9163","name":"sanguoData.csv","type":"text/csv","lastModified":1694735465021.445,"size":121320}] 29:{"id":"c054af09c02714b8","slug":null,"title":"","thumbnail":"dc1906c2ae0acd49c4245b234008cdd31b7459c4dd69068c187311b820127242","access_level":"public","create_time":"$D2023-09-14T23:35:38.858Z","update_time":"$D2024-08-27T17:35:19.147Z","view_time":null,"first_public_time":"$D2023-09-20T18:17:49.393Z","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":"7393f9188fa4f5e0","login":"wei-wei-ws","name":"Wei Wei's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/7616ba9f686ae6c144802dfd07d8fbcf0809e53deb13641fd23ab46e03677e29","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1225,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1764619e79aa864e","login":"wei-wei","name":"WW","avatar_url":"https://avatars-next.observableusercontent.com/26578b5cef893c8782bc63f2293f1e5523fb2093676b5a137d7b6745629c8dc7","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"1764619e79aa864e","login":"wei-wei","name":"WW","avatar_url":"https://avatars-next.observableusercontent.com/26578b5cef893c8782bc63f2293f1e5523fb2093676b5a137d7b6745629c8dc7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"","cells":[{"id":848,"value":"## following added by Wei","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":864,"value":"Timeline(lanesData(lifespan));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"viewof barHeight = Inputs.range([1, 20], { step: 1, label: 'Bar Height', value: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"viewof direction = Inputs.select([\"center\", \"top\", \"bottom\"], {label: \"Select one\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":855,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":981,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"createNote = 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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"getNoteText = function(d) {\nreturn `\n${d.Note}\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"tip = d3Tip()\n .attr('class', 'tip')\n .offset([-10, 0])\n .html(function(d) {\n return `${d.Note}`\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"lanesData = function(data) {\n const lanesData = []\n let stack = [];\n data.slice().forEach(e => {\n const lane = stack.findIndex(\n s => s.Death_year <= e.Birth_year && s.Birth_year < e.Birth_year\n );\n const yIndex = lane === -1 ? stack.length : lane\n lanesData.push({\n ...e,\n yIndex\n })\n stack[yIndex] = e;\n })\n return lanesData\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"sanguo_wei = await FileAttachment(\"lifespanData@1.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"sanguo_wei","database":"$undefined"},{"id":1046,"value":"lifespan = await FileAttachment(\"lifespanData@1.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"lifespan","database":"$undefined"},{"id":1062,"value":"familytreedata = FileAttachment(\"family_tree@19.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"sanguodict = FileAttachment(\"sanguoJson.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"Plot.plot({\n axis: null,\n margin: 10,\n marginLeft: 40,\n marginRight: 160,\n width: 540,\n height: 400,\n marks: [\n Plot.tree(d3.hierarchy(familytreedata).leaves(), {\n path: (node) => node.ancestors().reverse().map(({ data: { value } }) => sanguodict[value][0]).join(\"|\"),\n delimiter: \"|\",\n //channels: {name: data[1]},\n tip: true\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1193,"value":" Plot.tree(d3.hierarchy(familytreedata).leaves(), {\n path: (node) => node.ancestors().reverse().map(({ data: { value } }) => sanguodict[value][0]).join(\"|\"),\n delimiter: \"|\",\n //channels: {name: data[1]},\n tip: true\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"html`CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"d3Tip = require('d3-tip')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null