function makeChart() {
const margin = { top: 10, right: 10, bottom: 20, left: 40 };
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
const xDomainStart = new Date('2022-04-10');
xDomainStart.setDate(xDomainStart.getDate() - 10);
const xDomainEnd = new Date('2023-05-01');
xDomainEnd.setDate(xDomainEnd.getDate() + 10);
const xScale = d3.scaleTime()
.domain([xDomainStart, xDomainEnd])
.range([0, width]);
const lineYEnd = height - 25;
const lineYStart = height - 60;
data.forEach(d => {
svg.append("line")
.attr("x1", xScale(new Date(d.loDate)))
.attr("y1", lineYStart - 100)
.attr("x2", xScale(new Date(d.loDate)))
.attr("y2", lineYEnd)
.style("stroke", "black")
.style("stroke-dasharray", ("3, 3"));
const housePath = "M17 21H7a4 4 0 0 1-4-4v-6.292a4 4 0 0 1 1.927-3.421l5-3.03a4 4 0 0 1 4.146 0l5 3.03A4 4 0 0 1 21 10.707V17a4 4 0 0 1-4 4ZM9 17h6";
svg.append("path")
.attr("d", housePath)
.attr("stroke", "#000000")
.attr("stroke-width", 1.5)
.attr("fill", "none")
.attr("transform", `translate(${xScale(new Date(d.loDate)) - 10},${lineYEnd + 10})`);
svg.append("text")
.attr("x", xScale(new Date(d.loDate)) + 10)
.attr("y", lineYStart - 125)
.text(`You Mortgaged ${d.apn} on ${d.loDate} with ${d.loSoldAgent}.`)
.style("font-size", "14px")
.attr('text-anchor', 'start').attr(
'font-family',
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
)
const eventDate = d.status === "listed" ? d.listDate : d.soldDate;
svg.append("line")
.attr("x1", xScale(new Date(eventDate)))
.attr("y1", lineYStart)
.attr("x2", xScale(new Date(eventDate)))
.attr("y2", lineYEnd)
.style("stroke", "black")
.style("stroke-dasharray", ("3, 3"));
svg.append("path")
.attr("d", housePath)
.attr("stroke", "#000000")
.attr("stroke-width", 1.5)
.attr("fill", "none")
.attr("transform", `translate(${xScale(new Date(eventDate)) - 10},${lineYEnd + 10})`);
svg.append("text")
.attr("x", xScale(new Date(eventDate)) - 10)
.attr("y", lineYStart - 25)
.text(d.status === "listed" ? `${d.agentId} listed ${d.apn} on ${d.listDate}.` : `Sold ${d.apn}`)
.style("font-size", "14px")
.attr('text-anchor', 'end').attr(
'font-family',
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
)
});
svg.selectAll("text")
.each(function(d, i) { wrap_text(d3.select(this), 80) });
return svg.node().parentNode;
}