25:["$","title",null,{"children":"Education and Professional History | vatsal mehra | Observable"}] 49:T88c,chart = { let filteredData; filteredData = data.sort((a,b)=> a.start-b.start) filteredData.forEach(d=> d.color = d3.color(color(d.region))) let parent = this; if (!parent) { parent = document.createElement("div"); const svg = d3.select(DOM.svg(width, height)); svg.style('max-width', '100%') .style('height', 'auto'); const g = svg.append("g").attr("transform", (d,i)=>`translate(${margin.left} ${margin.top})`); const groups = g .selectAll("g") .data(filteredData) .enter() .append("g") .attr("class", "civ") const tooltip = d3.select(document.createElement("div")).call(createTooltip); const line = svg.append("line").attr("y1", margin.top-10).attr("y2", height-margin.bottom).attr("stroke", "rgba(0,0,0,0.2)").style("pointer-events","none"); groups.attr("transform", (d,i)=>`translate(0 ${y(i)})`) groups .each(getRect) .on("mouseover", function(d) { d3.select(this).select("rect").attr("fill", d.color.darker()) tooltip .style("opacity", 1) .html(getTooltipContent(d)) }) .on("mouseleave", function(d) { d3.select(this).select("rect").attr("fill", d.color) tooltip.style("opacity", 0) }) svg .append("g") .style("font-size","14px") .attr("transform", (d,i)=>`translate(${margin.left} ${margin.top-10})`) .call(axisTop) svg .append("g") .style("font-size","14px") .attr("transform", (d,i)=>`translate(${margin.left} ${height-margin.bottom})`) .call(axisBottom) svg.on("mousemove", function(d) { let [x,y] = d3.mouse(this); line.attr("transform", `translate(${x} 0)`); y +=20; if(x>width/2) x-= 100; tooltip .style("left", x + "px") .style("top", y + "px") }) parent.appendChild(svg.node()); parent.appendChild(tooltip.node()); parent.groups = groups; } else { const civs = d3.selectAll(".civ") civs.data(filteredData, d=>d.civilization) .transition() // .delay((d,i)=>i*10) .ease(d3.easeCubic) .attr("transform", (d,i)=>`translate(0 ${y(i)})`) } return parent }4a:[{"id":"fcc0015cbe24eea265833239de543af33607f288cc9959f9ce4d0e2456b25dbaae5ff62a355704d879441905518bdbbeef0d13496346f63bfed61b07decbd0d3","href":"https://static.observableusercontent.com/files/fcc0015cbe24eea265833239de543af33607f288cc9959f9ce4d0e2456b25dbaae5ff62a355704d879441905518bdbbeef0d13496346f63bfed61b07decbd0d3","name":"civilization timelines - civilization timelines.csv","type":"text/csv","lastModified":1683310770837.195,"size":3382},{"id":"2bd76afee04b811bc69e65f1d702223105f4b9d66323940f716ea0d1ea0abb537d81e5cb0a6ec9bfda1801671c589c415e56819600771ff7dfff1f0289980c11","href":"https://static.observableusercontent.com/files/2bd76afee04b811bc69e65f1d702223105f4b9d66323940f716ea0d1ea0abb537d81e5cb0a6ec9bfda1801671c589c415e56819600771ff7dfff1f0289980c11","name":"worldtimeline@1.json","type":"application/json","lastModified":1683311530558.396,"size":1111},{"id":"47eef96e83023e7fa0e7cfd51fa75c3437840637ead315907b241482361a2cc7a2b295a371d51c004db6a6f60eef5d9d21a2a50cd0964e5d01e150cf3232314d","href":"https://static.observableusercontent.com/files/47eef96e83023e7fa0e7cfd51fa75c3437840637ead315907b241482361a2cc7a2b295a371d51c004db6a6f60eef5d9d21a2a50cd0964e5d01e150cf3232314d","name":"worldtimeline@2.json","type":"application/json","lastModified":1683312503155.592,"size":2201},{"id":"75c72f9797319b67d4479382aa1d9b1569ca5d552b9cb23a03dcec844d91402cc6fcba2103687a127d274930303588c21e6a243deed4b9e6027f3c7cac97d69b","href":"https://static.observableusercontent.com/files/75c72f9797319b67d4479382aa1d9b1569ca5d552b9cb23a03dcec844d91402cc6fcba2103687a127d274930303588c21e6a243deed4b9e6027f3c7cac97d69b","name":"worldtimeline@3.json","type":"application/json","lastModified":1683359922824.375,"size":2279},{"id":"1b63cbb03527d6a70f48a1a8b32825337788db98b961cb2f8913f77312caad84b0b9bf3f5b7b8f41ce013d77e28ab8f59b172ddbd985da004a0cc862ae22ebf1","href":"https://static.observableusercontent.com/files/1b63cbb03527d6a70f48a1a8b32825337788db98b961cb2f8913f77312caad84b0b9bf3f5b7b8f41ce013d77e28ab8f59b172ddbd985da004a0cc862ae22ebf1","name":"worldtimeline@4.json","type":"application/json","lastModified":1684586049494.007,"size":2284},{"id":"4068bade64bc9f4b5cc0b89467960218fe7fa6cc06b52bea11d1ec579b8972e40b342502f56a0ea3be1ecbf25d651658a99d110f6a5dd14de118ee64a9360890","href":"https://static.observableusercontent.com/files/4068bade64bc9f4b5cc0b89467960218fe7fa6cc06b52bea11d1ec579b8972e40b342502f56a0ea3be1ecbf25d651658a99d110f6a5dd14de118ee64a9360890","name":"worldtimeline@5.json","type":"application/json","lastModified":1684586250718.051,"size":2293},{"id":"86d5a5ba57535c3fb403cd7d6be55e55a1df4348a9a02d99f0b4ca9a7a50a443f869a29148d02c80ecf85e9a1fb5e34c71f1d79391261b11bfc61010116fbab5","href":"https://static.observableusercontent.com/files/86d5a5ba57535c3fb403cd7d6be55e55a1df4348a9a02d99f0b4ca9a7a50a443f869a29148d02c80ecf85e9a1fb5e34c71f1d79391261b11bfc61010116fbab5","name":"worldtimeline.json","type":"application/json","lastModified":1683311089881.89,"size":417}] 29:{"id":"963368b9869f52d7","slug":null,"title":"Education and Professional History","thumbnail":"8c8895b0ac20f18a29753009143e7a48682e9911c238cd96942db94825ad8dcf","access_level":"public","create_time":"$D2023-05-05T18:19:30.837Z","update_time":"$D2023-05-20T12:37:55.371Z","view_time":null,"first_public_time":"$D2023-05-05T18:19:30.837Z","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":"c7585df67a939b30","login":"rdbcasillas","name":"vatsal mehra","avatar_url":"https://avatars-next.observableusercontent.com/dc6868750d1de761d4a0a98e6ec87ded5666bfc46a063a324a20eff06183d94b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":889,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"353b0c529a44d9bf","login":"rdbcasillas","name":"vatsal mehra","avatar_url":"https://avatars-next.observableusercontent.com/dc6868750d1de761d4a0a98e6ec87ded5666bfc46a063a324a20eff06183d94b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"353b0c529a44d9bf","login":"rdbcasillas","name":"vatsal mehra","avatar_url":"https://avatars-next.observableusercontent.com/dc6868750d1de761d4a0a98e6ec87ded5666bfc46a063a324a20eff06183d94b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Education and Professional History","cells":[{"id":0,"value":"md`# Education and Professional History \nData adapted from [Essential Humanities](http://www.essential-humanities.net/history-overview/world-history-timeline/)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"getTooltipContent = function(d) {\nreturn `${d.civilization}\n
\n${d.region}\n
\n${formatDateToCustomString(d.start)} - ${formatDateToCustomString(d.end)}\n
\n

Did this thing
Did that thing

\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"height = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"\n y= d3.scaleBand()\n .domain(d3.range(data.length))\n .range([0,height - margin.bottom - margin.top])\n .padding(0.2)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"x = d3.scaleLinear()\n .domain([d3.min(data, d => d.start), d3.max(data, d => d.end)])\n .range([0, width - margin.left - margin.right])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"margin = ({top: 30, right: 30, bottom: 30, left: 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"createTooltip = 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":308,"value":"getRect = function(d){\n const el = d3.select(this);\n const sx = x(d.start);\n const w = x(d.end) - x(d.start);\n const isLabelRight =(sx > width/2 ? sx+w < width : sx-w>0);\n\n el.style(\"cursor\", \"pointer\")\n\n el\n .append(\"rect\")\n .attr(\"x\", sx)\n .attr(\"height\", y.bandwidth())\n .attr(\"width\", w)\n .attr(\"fill\", d.color);\n\n el\n .append(\"text\")\n .text(d.civilization)\n .attr(\"x\",isLabelRight ? sx-5 : sx+w+5)\n .attr(\"y\", 10.5)\n .attr(\"fill\", \"black\")\n .style(\"text-anchor\", isLabelRight ? \"end\" : \"start\")\n .style(\"dominant-baseline\", \"hanging\");\n\n el\n .append(\"text\")\n .text(d.region)\n .attr(\"x\",isLabelRight ? sx-5 : sx+w+5)\n .attr(\"y\", 34.5)\n .attr(\"fill\", \"steelblue\")\n .style(\"font-size\", \"14px\")\n .style(\"text-anchor\", isLabelRight ? \"end\" : \"start\")\n .style(\"dominant-baseline\", \"hanging\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"dataByTimeline = d3.nest().key(d=>d.timeline).entries(data);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"dataByRegion = d3.nest().key(d=>d.region).entries(data);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"axisBottom = d3.axisBottom(x)\n .tickPadding(2)\n //.tickValues([\"Feb 1989\", \"May 2006\", \"Aug 2010\", \"Nov 2013\", \"Aug 2014\", \"May 2016\", \"Oct 2018\", \"Jan 2021\", \"May 2023\"])\n .tickFormat(formatDateToCustomString)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"formatDateToCustomString = (dateObj)=> {\n // Define an array of month abbreviations\n const monthNames = [\n \"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\",\n \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"\n ];\n\n // Get the month and year from the Date object\n const monthIndex = new Date(dateObj).getMonth();\n const year = new Date(dateObj).getFullYear();\n\n // Format the date as \"MMM YYYY\"\n const formattedDate = `${monthNames[monthIndex]} ${year}`;\n\n return formattedDate;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"axisTop = d3.axisTop(x)\n .tickPadding(2)\n .tickFormat(formatDateToCustomString)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"formatDate = d=> `${d}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"csv =d3.csvParse(await FileAttachment(\"civilization timelines - civilization timelines.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"data = worldtimeline5.map((d,i)=>{\nif (i === worldtimeline5.length-1) {\n return {\n ...d,\n start: new Date(d.start),\n end: new Date()\n}\n\n}\nelse {\nreturn {\n ...d,\n start: new Date(d.start),\n end: new Date(d.end)\n}\n}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"regions = d3.nest().key(d=>d.region).entries(data).map(d=>d.key)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"timelines = dataByTimeline.map(d=>d.key)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"color = d3.scaleOrdinal(d3.schemeSet2).domain(regions)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"import {checkbox, select} from \"@jashkenas/inputs\"","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":823,"value":"worldtimeline1 = FileAttachment(\"worldtimeline@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"data2 = worldtimeline4.map((d,i)=>{\nif (i === worldtimeline4.length-1) {\n return {\n ...d,\n start: new Date(d.start),\n end: new Date()\n}\n\n}\nelse {\nreturn {\n ...d,\n start: new Date(d.start),\n end: new Date(d.end)\n}\n}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"worldtimeline4 = FileAttachment(\"worldtimeline@4.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"worldtimeline5 = FileAttachment(\"worldtimeline@5.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null