2b:null 2c:["$","title",null,{"children":"Time line | lengfengif | Observable"}] 31:T44c,function label(node){ let svg = d3.select(node); let lable_color_number =[0,0,0,0]; for(let o =0; o < data.length ; o++){ switch(data[o].tag_color) { case lable_color[0]: lable_color_number[0] += 1; break case lable_color[1]: lable_color_number[1] += 1; break case lable_color[2]: lable_color_number[2] += 1; break case lable_color[3]: lable_color_number[3] += 1; break } } for(let i =0; i < lable_text.length ; i++){ svg .append('rect') .attr('x',(8 + 80 * i)) .attr('y',8) .attr('rx',4) .attr('height',20) .attr('width',74) .attr('fill',lable_color[i]) svg .append('text') .text(lable_text[i] + '/'+lable_color_number[i]) .attr('fill', 'white') .attr('x', (45 + 80 * i)) .attr('y', 23) .attr('font-size', 13) .attr('font-weight','bold') .attr("text-anchor", "middle"); } return node }32:T844,function textBox(node){ const svg = d3.select(node); var i = 0; var size = 0; var count = 0; function draw (i) { switch(classify){ case "all": size = Text(data[i].content,23).length * 23 + 55; if (data[i].tag_color == "red") { function returnrightshowbox(){ return rightShowbox(data[i].date,data[i].title,data[i].content,data[i].tag_color,size); } svg .append(returnrightshowbox) .attr('x',width / 2 + 20) .attr('y', count + between); } else { function returnleftshowbox(){ return leftShowbox(data[i].date,data[i].title,data[i].content,data[i].tag_color,size); } svg .append(returnleftshowbox) .attr('x',width / 2 - item_width - 50) .attr('y', count + between) } svg .append('circle') .attr('cx',width / 2) .attr('cy',count + between + 0.4 * size + 70) .attr('r',8) .attr('fill',data[i].tag_color) .attr('stroke','white') .attr('stroke-width',5); break; case "green": case "red": case "blue": case "orange": size = Text(data[i].content,23).length * 22 + 55; if (!(i%2 == 0)) { function returnrightshowbox(){ return rightShowbox(data[i].date,data[i].title,data[i].content,data[i].tag_color,size); } svg .append(returnrightshowbox) .attr('x',width / 2 + 20) .attr('y', count + between); } else { function returnleftshowbox(){ return leftShowbox(data[i].date,data[i].title,data[i].content,data[i].tag_color,size); } svg .append(returnleftshowbox) .attr('x',width / 2 - item_width - 50) .attr('y', count + between) } svg .append('circle') .attr('cx',width / 2) .attr('cy',count + between + 0.4 * size + 70) .attr('r',8) .attr('fill',data[i].tag_color) .attr('stroke','white') .attr('stroke-width',5); } } for (;i <=data.length -1 ; i++){ draw (i); count = count + size + between; } return node; }33:T741,function rightShowbox (date,title,content,tag_color,size) { var item_height = size ; var item_x = 10; var item_y = 70; function rightRoundedRect(x, y, width, height, radius) { return "M" + x + "," + y + "h" + (width - radius) + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius + "v" + (height - 2 * radius) + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius + "h" + (radius - width) + "z"; } function triangle(x,y,h) { return "M" + x + "," + (y + h / 3) + "v20,l-10,-10,z"; } const node = DOM.svg(); const svg = d3.select(node); svg .append('rect') .attr('x',item_x) .attr('y',item_y) .attr('rx',6) .attr('width',item_width + 10) .attr('height',item_height) .attr('fill','white'); svg .append('path') .attr('d', rightRoundedRect(item_x + item_width,item_y,15,item_height,8)) .attr('fill',tag_color); svg .append('path') .attr('d',triangle(item_x,item_y,item_height)) .attr('fill','white'); svg .append('text') .text(title) .attr('x', item_x + (item_width/2)) .attr('y', item_y + 35) .attr('text-anchor','middle') .attr("font-family", "'heiti', sans-serif") .attr("font-size", 18) .attr('font-weight','bold') .attr("fill", "black"); svg .selectAll("text1") .data(Text(content,23)) .join("text") .attr("x",item_x + 24) .attr("y", (d,i) => i * 22 + item_y + 65) .text(d => d) .attr('fill','black'); svg .append('text') .text(date) .attr('x', item_x + 16) .attr('y', item_y + 15) .attr("font-family", "'heiti',sans-serif") .attr('font-weight','bold') .attr("font-size", 14) .attr("fill", "black"); return node; }34:T73f,function leftShowbox (date,title,content,tag_color,size) { var item_height = size ; var item_x = 10; var item_y = 70; function leftRoundedRect(x, y, width, height, radius) { return "M" + x + "," + y + "a" + radius + "," + radius + " 0 0 0 " + -radius + "," + radius + "v" + (height -2 * radius) + "a" + radius + "," + radius + " 0 0 0 " + radius + "," + radius + "h" + width + "v" + -height + "," + "z"; } function triangle(x,y,h) { return "M" + x + "," + (y + h / 3) + "v20,l10,-10,z"; } const node = DOM.svg(); const svg = d3.select(node); svg .append('rect') .attr('x',item_x) .attr('y',item_y) .attr('rx',6) .attr('width',item_width + 10) .attr('height',item_height) .attr('fill','white'); svg .append('path') .attr('d', leftRoundedRect(item_x,item_y,7,item_height,8)) .attr('fill',tag_color); svg .append('path') .attr('d',triangle(item_x + 10 + item_width,item_y,item_height)) .attr('fill','white'); svg .append('text') .text(title) .attr('x', item_x + (item_width/2)) .attr('y', item_y + 35) .attr('text-anchor','middle') .attr("font-family", "'heiti', sans-serif") .attr("font-size", 18) .attr('font-weight','bold') .attr("fill", "black"); svg .selectAll("text1") .data(Text(content,23)) .join("text") .attr("x",item_x + 24) .attr("y", (d,i) => i * 22 + item_y + 65) .text(d => d) .attr('fill','black'); svg .append('text') .text(date) .attr('x', item_x + item_width - 26) .attr('y', item_y + 15) .attr("font-family", "'heiti',sans-serif") .attr('font-weight','bold') .attr("font-size", 14) .attr("fill", "black"); return node; }35:[] 2f:{"id":"dc0a610e66f2027d","slug":"time-line","title":"Time line","thumbnail":"120fb9d8f13779874ac7f0ae4c51fd37662f42c66717af720be0c9b684cf3492","access_level":"public","create_time":"$D2021-01-27T10:03:20.890Z","update_time":"$D2023-04-30T02:16:27.365Z","view_time":null,"first_public_time":"$D2021-02-08T02:43:15.327Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0a00b6ddf6fe5a3b","login":"lengfengif","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0418fe23df4fa517be8cbd4545a258e4f52509fbd803fb3f075c54dcd5301c51","tier":"starter_2024"},"version":1640,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ffeee835b9841b14","login":"lengfengif","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0418fe23df4fa517be8cbd4545a258e4f52509fbd803fb3f075c54dcd5301c51","tier":null}],"members":[{"type":"individual","id":"ffeee835b9841b14","login":"lengfengif","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0418fe23df4fa517be8cbd4545a258e4f52509fbd803fb3f075c54dcd5301c51","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Time line","cells":[{"id":0,"value":"md`# Time line`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1318,"value":"viewof classify = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"{\n \n const node = DOM.svg(width,height);\n \n backGround(node);\n \n backLine(node);\n \n label(node);\n \n textBox(node);\n \n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1489,"value":"function backGround(node){\n \n let svg = d3.select(node);\n \n svg\n .append('rect')\n .attr('x',0)\n .attr('y',0)\n .attr('width',width)\n .attr('height',height)\n .attr('fill',backgroundColor);\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1494,"value":"function backLine(node){\n \n let svg = d3.select(node);\n \n let myDate = new Date();\n\nfunction returnline() {\n return 'M' + (width/2) + ',' + 50\n + 'v' + height + ',' + 'z'\n }\n\n svg\n .append('path')\n .attr('d',returnline)\n .attr('stroke','white')\n .attr('stroke-width',5); \n \n svg\n .append('circle')\n .attr('cx',width/2)\n .attr('cy',50)\n .attr('r',25)\n .attr('fill',backgroundColor)\n .attr('stroke','white')\n .attr('stroke-width',5)\n \n svg\n .append('text')\n .text(myDate.getUTCFullYear())\n .attr('x', width/2 - 16)\n .attr('y', 50 + 5)\n .attr(\"font-family\", \"'heiti',sans-serif\")\n .attr('font-weight','bold')\n .attr(\"font-size\", 14)\n .attr(\"fill\", \"black\");\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1498,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1202,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":602,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1502,"value":"function Text(content, chars) {\n\n let temp = Array.from(content);\n let paragraph =[];\n let j=0;\n let offset = 0,start = 0;\n paragraph[0]=\"\";\n \n var pattern = new RegExp(\"[A-Za-z0-9. ]+\"); //filter\n\n for (var i = 0; i < temp.length; i++ ){\n \n if(pattern.test(temp[i])){\n offset += 1; \n };\n if ( i == start + chars + Math.floor(offset /2)){\n \n start = i;\n offset = 0;\n j++;\n paragraph[j] =\"\";\n }\n paragraph[j] += temp[i];\n }\n\n return paragraph\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1506,"value":"newData = { return d3.json(url) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":724,"value":"data = {\nlet tempData = []\nfor(let i = 0; i < newData.length; i++){\nif(newData[i].tag_color == classify || \"all\" == classify ){ tempData.push(newData[i])}\n}\n return tempData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"md `# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1469,"value":"lable_color =['red','blue','orange','green'];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1466,"value":"lable_text =['反腐','重磅发言','大事件','政策新规'];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":643,"value":"between = 20;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1102,"value":"backgroundColor = \"#eee\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":674,"value":"item_width = 420;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"width =960;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1579,"value":"url =\"https://yuque-parse.vercel.app/api/table/parse\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1533,"value":"function heightnumber(){\nlet num=0;\n for(let i = 0; i < data.length ; i++){\n num += Text(data[i].content,23).length * 23 + 55;\n}\nreturn num\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"height = between * (data.length) + heightnumber() + 90;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"d3 = require (\"d3@5\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"