25:["$","title",null,{"children":"2020 Timeline | Alexander Laderman | Observable"}] 49:T1e53,DiDoesDigital2020Timeline = { const markerDefaultColor = "#9880C2"; const markerSelectedColor = "#9880C2"; const markerFadedColor = "#E4DDEE"; const markerPersonalColor = "#5598E2"; const labelDefaultColor = "#331A5B"; const labelSelectedColor = "#331A5B"; const labelFadedColor = "#E4DDEE"; const labelPersonalColor = "#093B72"; const annotationDefaultColor = "#E4DDEE"; const annotationPersonalColor = "#CADFF7"; const svg = d3.select(DOM.svg(params.svg.width, params.svg.height)) .attr("title", "Timeline of Melbourne in 2020") .attr("id", "timeline"); const chartBackground = svg.append("rect") .attr("id", "chart-background") .attr("fill", "#fff") // fallback for CSS .attr("x", 0) .attr("y", 0) .attr("width", params.svg.width) .attr("height", params.svg.height); const chartTitle = svg.append("g") .attr("class", "chart-title") .append("text") .attr("id", "title-text") .attr("text-anchor", "start") .attr("x", width >= params.smallScreenSize ? 96 : params.event.offset) .attr("y", 24) .attr("dy", "2em") .style("font-weight", "700") .style("font-size", "clamp(1.2rem, 4vw, 2.5rem)") // minimum, preferred, maximum .text(title); const chartSubtitle = svg.append("g") .attr("class", "chart-subtitle") .append("text") .attr("text-anchor", "start") .attr("x", width >= params.smallScreenSize ? 96 : params.event.offset) .attr("y", 24) .attr("dy", "5.5em") .style("font-weight", "400") .style("font-size", "clamp(1rem, 2.5vw, 1.25rem)") // minimum, preferred, maximum .text(subtitle); const byline = svg.append("g") .attr("transform", `translate(${width >= params.smallScreenSize ? params.plot.x * 0.4 : params.event.offset}, ${params.svg.height - (params.margin.bottom / 2)})`) .append("text") .attr("id", "byline") .attr("x", 0) .attr("y", 0) .attr("dy", "0.5em") .text(''); const plot = svg.append("g") .attr("id", "plot") .attr("transform", `translate(${width >= params.smallScreenSize ? params.plot.x : params.smallScreenMargin.left}, ${params.plot.y})`); const gy = plot.append("g") .attr("id", "y-axis") .attr("class", "axis") .call(axis.y) .attr("aria-hidden", "true") .call(g => g.selectAll(".tick text").call(halo)); const annotations = plot.append("g") .attr("class", "annotations") .selectAll("g") .data(lockdownData) .join("g"); const annotationsLeftMargin = params.plot.x + 240 + 24; annotations.append("line") .attr("aria-hidden", "true") .attr("stroke", annotationDefaultColor) .attr("stroke-width", 3) .attr("x1", annotationsLeftMargin) .attr("x2", annotationsLeftMargin) .attr("y1", d => y(d.startDate)) .attr("y2", d => y(d.endDate)); annotations.append("text") .attr("x", annotationsLeftMargin + 24) .attr("y", d => y(d.startDate)) .attr("dy", "0.7em") .style("font-size", 16) .style("font-weight", 600) .text(d => width >= params.mediumScreenSize ? d.name : '') annotations.append("text") .attr("x", annotationsLeftMargin + 24) .attr("y", d => y(d.startDate)) .attr("dy", "2.0em") .style("font-size", 16) .style("font-weight", 400) .text(d => width >= params.mediumScreenSize ? d3.timeFormat("%e %b")(d.startDate) + " – " + d3.timeFormat("%e %b")(d.endDate) : '') // .text(d => d3.format("d")((d.endDate - d.startDate) / (1000*60*60*24)) + " days") const markers = plot.append("g") .attr("class", "markers") .selectAll("circle") .data(data) .join("circle") .attr("transform", d => `translate(0, ${y(d.date)})`) .attr("aria-hidden", "true") .attr("fill", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor) .attr("stroke", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor) // .attr("stroke-width", 1) .attr("cx", 0.5) .attr("cy", (params.marker.radius / 2) + 0.5) .attr("r", params.marker.radius); const dodgedYValues = dodge(data.map(d => y(d.date)), labelSeparation); // const dodgedYValues = data.map(d => y(d.date)); // for debugging alignment const eventLabels = plot.append("g") .attr("class", "eventLabels") .selectAll("text") .data(d => d3.zip( data, dodgedYValues, )) .join("text") .attr("class", "event-title") .style("font-weight", "400") .style("fill", ([d]) => d.sharedOrPersonal === "Shared" ? labelDefaultColor : labelPersonalColor) .attr("x", width >= params.smallScreenSize ? params.event.offset : params.smallScreenEvent.offset) .attr("y", ([, y]) => y) .attr("dy", "0.35em"); eventLabels.append("tspan") .text(([d]) => d.eventName); eventLabels.append("tspan") .text(([d]) => ` ${d.eventDescription} ${d3.timeFormat("%A, %e %B")(d.date)}`) .attr("x", width); // .text(([d]) => d.eventName); const tooltip = d3.create("div") .attr("class", "tooltip") .attr("aria-hidden", "true") .html(` `); const rangeY = dodgedYValues.map(x => x + params.plot.y); const rangeY0 = rangeY[0]; const fuzzyTextHeightAdjustment = 16 svg.on("touchend mouseout", function(event) { markers .attr("fill", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor) .attr("stroke", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor); eventLabels .style("opacity", 1); }); svg.on("touchmove mousemove", function(event) { const mouseY = d3.pointer(event,this)[1]; const nearestEventY = rangeY.reduce((a, b) => Math.abs(b - mouseY) < Math.abs(a - mouseY) ? b : a); const dodgedIndex = rangeY.indexOf(nearestEventY); const dataEvent = data[dodgedIndex]; if (mouseY >= rangeY0 - fuzzyTextHeightAdjustment) { eventLabels .filter((d, i) => i !== dodgedIndex) .style("opacity", 0.3); eventLabels .filter((d, i) => i === dodgedIndex) .style("opacity", 1); markers .filter((d, i) => i !== dodgedIndex) .attr("fill", markerFadedColor) .attr("stroke", markerFadedColor); markers .filter((d, i) => i === dodgedIndex) .attr("fill", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor) .attr("stroke", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor) .raise(); tooltip.style("opacity", 1); tooltip.style("transform", `translate(${(width >= params.smallScreenSize ? params.plot.x + 8 : 0)}px, calc(-100% + ${nearestEventY}px))`); tooltip.select("#date") .text(d3.timeFormat("%A, %e %B")(dataEvent.date)); tooltip.select("#name") .text(dataEvent.eventName); tooltip.select("#description") .text(dataEvent.eventDescription); } }); svg.on("touchend mouseleave", () => tooltip.style("opacity", 0)); return html`

${tooltip.node()} ${svg.node()}

`; // return svg.node(); // yield svg.node(); // d3.selectAll(".event-name div").attr('class', 'teft'); }4a:T465,render_data_table = (data, options = {}) => { let caption = ""; let ariaLabelledbyCaption = ""; if (options.caption) { caption = `${options.caption}`; ariaLabelledbyCaption = `aria-labelledby="caption"`; } let theadRowHeaderCells; if (options.columns) { theadRowHeaderCells = options.columns.map((d) => { return `${d}` }); } else { theadRowHeaderCells = Object.keys(data[0]).map((d, i) => { return `${d}` }); } let focusable = 'tabindex="0"'; if (options.focusable === false) { focusable = ''; } return html`

${caption} ${theadRowHeaderCells} ${data.map(row => { return html`${Object.values(row).map((col, index) => { return index === 0 ? ``: ``; })}`; })}

${d3.timeFormat("%A, %e %B")(col)}	${col}

`}4b:T4e5,// The dodge function takes an array of positions (e.g. X values along an X Axis) in floating point numbers // The dodge function optionally takes customisable separation, iteration, and error values. // The dodge function returns a similar array of positions, but slightly dodged from where they were in an attempt to separate them out. It restrains the result a little bit so that the elements don't explode all over the place and so they don't go out of bounds. function dodge(positions, separation = 10, maxiter = 10, maxerror = 1e-1) { positions = Array.from(positions); let n = positions.length; if (!positions.every(isFinite)) throw new Error("invalid position"); if (!(n > 1)) return positions; let index = d3.range(positions.length); for (let iter = 0; iter < maxiter; ++iter) { index.sort((i, j) => d3.ascending(positions[i], positions[j])); let error = 0; for (let i = 1; i < n; ++i) { let delta = positions[index[i]] - positions[index[i - 1]]; if (delta < separation) { delta = (separation - delta) / 2; error = Math.max(error, delta); positions[index[i - 1]] -= delta; positions[index[i]] += delta; } } if (error < maxerror) break; } return positions; }4c:T5bc,params = { let output = {}; output["smallScreenSize"] = 768; output["mediumScreenSize"] = 940; output["svg"] = { "width": width, "height": data.length * 48 // Roughly relative to number of data points but doesn't factor in the full timeline scale such as clustering or spread out data }; output["margin"] = { "top": 104, "right": 96, "bottom": 192, "left": 240, "axisLeft": 144, }; output["plot"] = { "x": output["margin"]["left"], "y": output["margin"]["top"], "width": output["svg"]["width"] - output["margin"]["left"] - output["margin"]["right"], "height": output["svg"]["height"] - output["margin"]["top"] - output["margin"]["bottom"] }; output["smallScreenMargin"] = { "top": 60, "right": 8, "bottom": 192, "left": 8, "axisLeft": 144, }; output["smallScreenPlot"] = { "x": output["margin"]["left"], "y": output["margin"]["top"], "width": output["svg"]["width"] - output["margin"]["left"] - output["margin"]["right"], "height": output["svg"]["height"] - output["margin"]["top"] - output["margin"]["bottom"] }; output["marker"] = { "radius": 4 } output["date"] = { "offset": output["marker"]["radius"] * 2 } output["event"] = { "offset": output["marker"]["radius"] * 6 } output["smallScreenEvent"] = { "offset": output["marker"]["radius"] * 4 } return output; }4d:T4a8,tooltipStyles = html` `4e:[] 29:{"id":"0a8a0cd373cab8d5","slug":null,"title":"2020 Timeline","thumbnail":"70bc76988b5d7a91f4f2d1d0cfae4a3904f3b95288671a6dadc65cad0391352f","access_level":"public","create_time":"$D2023-01-20T11:43:00.779Z","update_time":"$D2023-01-20T14:02:15.183Z","view_time":null,"first_public_time":"$D2023-01-20T11:43:00.779Z","has_unpublished_edits":null,"fork":{"id":"0b3104a84448d29a","slug":"2020-timeline","title":"2020 Timeline","owner":{"id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di"}},"stars":0,"starred":false,"owner":{"type":"team","id":"965378059e1e1861","login":"0c82f2a8a0d142da","name":"Alexander Laderman","avatar_url":"https://avatars-next.observableusercontent.com/d1099b359302c39926d7c3e9d1d41d34f60ac3a1ea9b78f8931f134c88c20b89","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1588,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0c82f2a8a0d142da","login":"0c82f2a8a0d142da","name":"Alexander Laderman","avatar_url":"https://avatars-next.observableusercontent.com/d1099b359302c39926d7c3e9d1d41d34f60ac3a1ea9b78f8931f134c88c20b89","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0c82f2a8a0d142da","login":"0c82f2a8a0d142da","name":"Alexander Laderman","avatar_url":"https://avatars-next.observableusercontent.com/d1099b359302c39926d7c3e9d1d41d34f60ac3a1ea9b78f8931f134c88c20b89","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"2020 Timeline","cells":[{"id":0,"value":"md`# 2020 Timeline`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1280,"value":"md`To make your own timeline, enter your events [below](https://observablehq.com/@didoesdigital/2020-timeline#csv).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"viewof eventsSelection = radio({\n title: 'Events',\n description: 'Please select which events to show',\n options: [\n { label: 'Shared', value: 'shared' },\n { label: 'Personal', value: 'personal' },\n { label: 'All', value: 'all' },\n ],\n value: 'shared'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"mdAbout = md`## About this timeline`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1226,"value":"md`I created this timeline to make sense of my world`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"mdNotesAboutTheData = md`## Notes about the data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"md`I focused on events that I personally remember or remember hearing from others`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"mdResources = md`## Resources`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"md`Here are some useful resources I found for looking up dates of events:\n\n- [Wikipedia](https://en.wikipedia.org)\n- \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"mdAppendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"viewof title = text({title: \"Chart title\", placeholder: \"2020 timeline\", value: \"Melbourne in 2020\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":900,"value":"viewof subtitle = text({title: \"Chart subtitle\", value: \"One Aussie’s effort to make sense of it\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"viewof labelSeparation = slider({\n min: 12, \n max: 48,\n step: 2, \n value: 24, \n title: \"Label separation\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"csv = `Date,Event,Description,SharedOrPersonal\n01/01/1994,Started university,,PERSONAL\n01/01/1997,,,PERSONAL\n01/01/1997,First proper job,,PERSONAL\n01/01/1999,Promoted to managerial role,,PERSONAL\n01/01/2000,Uneasy at work,,PERSONAL\n01/01/2001,Changed employer,,PERSONAL\n01/01/2001,Major impact at new job,,PERSONAL\n01/01/2002,Uneasy at work,,PERSONAL\n01/01/2002,Changed employer,,PERSONAL\n01/01/2002,Major impact at new job. ,,PERSONAL\n01/01/2003,Restless at work,Litte to do day to day.,PERSONAL\n01/01/2004,Applied to study in the UK,,PERSONAL\n01/01/2004,Bought sports car,,PERSONAL\n01/01/2005,Employer forced into administration,,PERSONAL\n01/01/2006,Layed off,,PERSONAL\n01/01/2006,Research OC,,PERSONAL\n01/01/2007,Reached out to helpline,,PERSONAL\n01/01/2007,Sent message to mailing list,,PERSONAL\n01/01/2007,Sent message to mailing list,,PERSONAL\n01/01/2007,Attempt at career change,,PERSONAL\n01/01/2007,Markets collapse,,PERSONAL\n01/01/2008,Let go from trainee programme,,PERSONAL`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1577,"value":"","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"var:data"},{"id":951,"value":"lockdownData = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1491,"value":"mdDataTable = md`## Data table`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1497,"value":"accessibleDataTable = render_data_table(data, {caption: \"This data shows the events in table format\", columns: [\"Date\", \"Event\", \"Event description\", \"Personal or Shared\"], focusable: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1502,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"data = sourceData.filter(d => {\n if (eventsSelection === \"shared\") { return d.sharedOrPersonal === \"Shared\"; }\n else if (eventsSelection === \"personal\") { return d.sharedOrPersonal === \"Personal\"; }\n else { return true };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"sourceData = {\n const timeParser = d3.timeParse(\"%d/%m/%Y %I:%M%p\"); \n const csvString = csv;\n const rowConversionFunction = ({\n \"Date\": date,\n \"Event\": eventName,\n \"Description\": eventDescription,\n \"SharedOrPersonal\": sharedOrPersonal\n }) => ({\n date: timeParser(date + \" 06:00AM\"), // adjusting to 6AM instead of midnight aligns first of month circles with axis tick markers\n eventName, \n eventDescription,\n sharedOrPersonal\n });\n return d3.csvParse(csvString, rowConversionFunction);\n\n // const extraPropertiesSource = {\n // title: \"My 2020 timeline\",\n // subtitle: \"One Aussie's story\"\n // };\n // return Object.assign(dataObjectTarget, extraPropertiesSource);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"y = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))//.nice()\n .range([params.plot.y, params.plot.height]);\n // .range([params.margin.top, height - params.margin.bottom]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"axis = {\n const yAxis = width >= params.smallScreenSize ? \n d3.axisRight(y)\n .tickPadding(-(params.margin.axisLeft))\n .tickSizeOuter(0)\n .tickSizeInner(-(params.margin.axisLeft))\n :\n d3.axisRight(y)\n .tickPadding(-(params.smallScreenMargin.axisLeft))\n .tickSizeOuter(0)\n .tickSizeInner(-(params.smallScreenMargin.axisLeft))\n .tickFormat(d3.timeFormat('%b'));\n\n return {y: yAxis};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"function halo(text) {\n text.clone(true)\n .each(function() { this.parentNode.insertBefore(this, this.previousSibling); })\n .attr(\"aria-hidden\", \"true\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", backgroundColor)\n .attr(\"stroke-width\", 24)\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-linejoin\", \"round\")\n .style(\"text-shadow\", `-1px -1px 2px ${backgroundColor}, 1px 1px 2px ${backgroundColor}, -1px 1px 2px ${backgroundColor}, 1px -1px 2px ${backgroundColor}`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"typographyStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"chartStyles = html`