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()}

`; }