31:T22ca,DiDoesDigitalMovingHouseChart = { replay; const svg = d3.create("svg") .attr("id", "chart") .attr("title", "Chart of my house moves during a housing boom 2020–2021") .attr("viewBox", [0, 0, params.svg.width, params.svg.height]); const chartBackground = svg.append("rect") .attr("id", "chart-background") .attr("fill", backgroundColor) .attr("x", 0) .attr("y", 0) .attr("width", params.svg.width) .attr("height", params.svg.height); const tooltip = d3.create("div") .attr("id", "tooltip") .attr("class", "tooltip") .html(` `); const lastDay = data[data.length - 1].departureDate; function onMouseEnter(event, d, i) { const xPos = scale.x(d.departureDate) + params.plot.x; const yPos = scale.y(d.cumulativeDistance) + params.plot.y; tooltip.style("opacity", 1); tooltip.style("transform", `translate(calc( -50% + ${xPos}px), calc(-100% + ${yPos}px))`); tooltip.select("#name") .text(d.description); tooltip.select("#value") .text("Travel distance: " + d.distanceToTravel + "km"); tooltip.select("#a") .text("Departure date: " + d3.timeFormat("%e %b %Y")(d.departureDate)); tooltip.select("#b") .text(d.departureDate.getTime() === lastDay.getTime() ? "Length of stay: Forever!" : "Length of stay: " + d.lengthOfStayInDays + (d.lengthOfStayInDays === 1 ? " day" : " days")); tooltip.select("#c") .text("From: " + d.from); tooltip.select("#d") .text("To: " + d.to); } function onMouseLeave() { tooltip.style("opacity", 0); } const chartTitle = svg.append("g") .attr("class", "chart-title") .append("text") .attr("text-anchor", "middle") .attr("transform", `translate(${params.svg.width / 2}, ${params.margin.top / 2})`) .attr("id", "title-text") .attr("x", 0) .attr("y", 0) // .attr("dy", "-0.5em") .attr("fill", "#202630") .attr("font-family", "'Source Sans Pro', sans-serif") .style("font-weight", "700") .style("font-size", "clamp(.7rem, 2.5vw, 2.4rem)") // minimum, preferred, maximum .text(width > params.breakpoint.small ? "Moving house during a pandemic and housing boom 2020–2021" : "Moving house during a housing boom 2020–2021"); const byline = svg.append("g") .attr("class", "byline") .append("text") .attr("text-anchor", "end") .attr("transform", `translate(${params.plot.width + params.plot.x}, ${params.svg.height - (params.margin.bottom / 2)})`) // .attr("transform", `translate(${params.plot.width + params.plot.x}, ${params.margin.top / 2})`) .attr("x", 0) .attr("y", 0) .attr("dy", "0.8em") .attr("fill", "#504C57") .attr("font-family", "'Source Sans Pro', sans-serif") .style("font-weight", "400") .style("font-size", "clamp(.5rem, 1.5vw, 0.9rem)") // minimum, preferred, maximum .text(width > params.breakpoint.small ? "Graphic by @DiDoesDigital" : "@DiDoesDigital"); const chartDisplayMetric = svg.append("g") .attr("class", "chart-display-metric") .append("text") .attr("text-anchor", "start") .attr("transform", `translate(${params.margin.left}, ${params.svg.height - (params.margin.bottom / 2)})`) // .attr("transform", `translate(${params.margin.left}, ${params.margin.top / 2})`) .attr("id", "display-metric") .attr("x", 0) .attr("y", 0) .attr("dy", "0.8em") .attr("fill", "#504C57") .attr("font-family", "'Source Sans Pro', sans-serif") .style("font-weight", "400") .style("font-size", "clamp(.5rem, 1.5vw, 0.9rem)") // minimum, preferred, maximum .text(data.length === 1 ? "1 move" : `${numberOfMoves} moves · ${d3.format(',')(totalDistanceTravelled)}km · ${totalTimeMovingInMonths} months`); const gx = svg.append("g") .attr("id", "x-axis") .attr("class", "axis") .attr("transform", `translate(${params.plot.x}, ${params.plot.height + params.plot.y})`) .call(axis.x) .call(g => g.selectAll(".tick text") .attr('dx', '0.25em') .attr("fill", "#202630") .style("font-size", 14) .attr("font-family", "'Source Sans Pro', sans-serif") .style("text-anchor", width > params.breakpoint.small ? "middle" : "end") .style("transform", width > params.breakpoint.small ? null : "rotate(-40deg)") ) .call(g => g.selectAll("path.domain").remove()); const gy = svg.append("g") .attr("id", "y-axis") .attr("class", "axis") .attr("transform", `translate(${params.plot.width + params.plot.x}, ${params.plot.y})`) .call(axis.y) .call(g => g.selectAll(".tick text").attr('dx', '0.25em').attr("fill", "#202630").style("font-size", 14).attr("font-family", "'Source Sans Pro', sans-serif")) .call(g => g.selectAll(".tick line").attr("stroke", "#E2E0E5")) .call(g => g.selectAll("path.domain").remove()); const plot = svg.append("g") .attr("class", "plot") .attr("transform", `translate(${params.plot.x}, ${params.plot.y})`); const initialPath = plot.append("line") .datum(data) .attr("fill", "#B19CD3") .attr("stroke", "#B19CD3") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("x1", 0) .attr("x2", d => scale.x(d[0].departureDate)) .attr("y1", params.plot.height) .attr("y2", d => scale.y(d[0].distanceToTravel)); const km = gy.append("text") .attr("transform", `translate(${-params.plot.width}, 0)`) .attr("fill", "#202630") .attr("font-family", "'Source Sans Pro', sans-serif") .style("font-size", 14) .attr("x", 0) .attr("y", 0) .attr("dy", "0.35em") .attr("text-anchor", "start") .text("km") .call(halo, 10); const len = length(line(data)); const path = plot.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "#B19CD3") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-dasharray", `0,${len}`) .attr("d", line); path.transition() .duration(width > params.breakpoint.small ? 7000 : 500) .ease(d3.easeLinear) .attr("stroke-dasharray", `${len},${len}`); const circles = plot.selectAll("g") .data(data) .join("g") .append("circle") .attr("fill", "#5F428F") .attr("r", 5) .attr("cx", d => scale.x(d.departureDate)) .attr("cy", d => scale.y(d.cumulativeDistance)) .clone(true) .attr("aria-hidden", "true") .attr("fill", "transparent") .attr("r", 20) .on("mouseenter", onMouseEnter) .on("mouseleave", onMouseLeave); const latterPart = i => i > 5; const calculateDY = (movingData, i) => { const isEven = i % 2 === 0; const isLatterPart = latterPart(i); const isLastDay = movingData.departureDate.getTime() === lastDay.getTime() // Note: this is a mess. Don't repeat this. return isLastDay ? "-0.9em" : !isLatterPart ? "0.3em" : isLatterPart && !isEven ? "-1.2em" : "1.5em"; } const label = plot.append("g") .attr("fill", "#202630") .attr("font-family", "'Source Sans Pro', sans-serif") .style("pointer-events", "none") .style("font-size", 14) .selectAll("g") .data(data) .join("g") .attr("transform", d => `translate(${scale.x(d.departureDate)},${scale.y(d.cumulativeDistance)})`); label.append("text") .text(d => d.description) .each(function(d,i) { const t = d3.select(this); t.attr("text-anchor", movingDatum => latterPart(i) ? "middle" : "start") .attr("dx", latterPart(i) ? null : "1em") .attr("dy", movingDatum => calculateDY(movingDatum, i)) .attr("visibility", movingDatum => (i > 10 && i < 15 ? "hidden" : "visible")); }) .call(halo, (d,i) => i + 1 === data.length ? 20 : 2); return html`

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

`; }32:T511,stylesTooltip = html` `33:T456,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 => { return ``; })}`; })}

${col instanceof Date ? d3.timeFormat('%d %b %Y')(col) : col}

`}34:Tc35,raw_data = ([ { description: "Moved out of Melbourne", from: "Melbourne apartment", to: "Partner's parents place", departureDate: d3.timeParse("%d %b %Y")("23 Nov 2020"), distanceToTravel: "60km" }, { description: "Visited family", from: "Partner's parents' place", to: "Family's place", departureDate: d3.timeParse("%d %b %Y")("13 Dec 2020"), distanceToTravel: "395km" }, { description: "Back to partner's parents' place", from: "Family's place", to: "Partner's parents' place", departureDate: d3.timeParse("%d %b %Y")("19 Dec 2020"), distanceToTravel: "395km" }, { description: "Began drive to Queensland", from: "Partner's parents' place", to: "Wagga Wagga", departureDate: d3.timeParse("%d %b %Y")("26 Dec 2020"), distanceToTravel: "430km" }, { description: "Drive across New South Wales", from: "Wagga Wagga", to: "Dubbo", departureDate: d3.timeParse("%d %b %Y")("27 Dec 2020"), distanceToTravel: "400km" }, { description: "Drive into Queensland", from: "Dubbo", to: "Goondiwindi", departureDate: d3.timeParse("%d %b %Y")("28 Dec 2020"), distanceToTravel: "600km" }, { description: "Holiday in Moffat Beach", from: "Goondiwindi", to: "Moffat Beach", departureDate: d3.timeParse("%d %b %Y")("29 Dec 2020"), distanceToTravel: "450km" }, { description: "Airbnb long stay", from: "Moffat Beach", to: "Sunshine Coast", departureDate: d3.timeParse("%d %b %Y")("5 Jan 2021"), distanceToTravel: "30km" }, { description: "Hinterland stay", from: "Sunshine Coast", to: "Sunshine Coast Hinterland", departureDate: d3.timeParse("%d %b %Y")("1 Feb 2021"), distanceToTravel: "40km" }, { description: "Rainforest stay", from: "Sunshine Coast Hinterland", to: "Rainforest stay", departureDate: d3.timeParse("%d %b %Y")("26 Feb 2021"), distanceToTravel: "15km" }, { description: "Share house", from: "Rainforest stay", to: "Sunshine Coast share", departureDate: d3.timeParse("%d %b %Y")("26 Mar 2021"), distanceToTravel: "20km" }, { description: "Sunshine Coast hotel", from: "Sunshine Coast share", to: "Sunshine Coast hotel", departureDate: d3.timeParse("%d %b %Y")("29 Mar 2021"), distanceToTravel: "20km" }, { description: "Queenslander", from: "Sunshine Coast hotel", to: "Queenslander", departureDate: d3.timeParse("%d %b %Y")("5 Apr 2021"), distanceToTravel: "35km" }, { description: "Hinterland stay", from: "Queenslander", to: "Sunshine Coast Hinterland", departureDate: d3.timeParse("%d %b %Y")("18 Apr 2021"), distanceToTravel: "5km" }, { description: "Cabin", from: "Sunshine Coast Hinterland", to: "Cabin", departureDate: d3.timeParse("%d %b %Y")("24 Apr 2021"), distanceToTravel: "9km" }, { description: "To our new home!", from: "Cabin", to: "Home!", departureDate: d3.timeParse("%d %b %Y")("28 Apr 2021"), distanceToTravel: "10km" }, ]);35:[] 2f:{"title":"Moving house during a housing boom 2020–2021","cells":[{"id":0,"value":"md`# Moving house during a housing boom 2020–2021`","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"md`After ${numberOfMoves} moves, nearly ${d3.format(',')(Math.ceil(totalDistanceTravelled/1000)*1000)}km of driving, and ${totalTimeMovingInMonths} months on the road, I finally have a place to live. It was an adventure and exhausting, so I wanted to know exactly how many times we moved and how far we travelled. This was the journey.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"viewof replay = html`