chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height*3])
.attr("font-family", "sans-serif")
.attr("font-size", 10);
svg.append("text")
.attr("x", (width / 2))
.attr("y", 20)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Value vs Date Graph");
const year = svg.selectAll("g")
.data(years)
.join("g")
.attr("transform", (d, i) => `translate(40.5,${height * i + cellSize * 1.5})`);
year.append("text")
.attr("x", -5)
.attr("y", -5)
.attr("font-weight", "bold")
.attr("text-anchor", "end")
.text(([key]) => key);
year.append("g")
.selectAll("rect")
.data(weekday === "weekday"
? ([, values]) => values.filter(d => ![0, 6].includes(d.Occur_date.getUTCDay()))
: ([, values]) => values)
.join("rect")
.attr("width", cellSize - 1)
.attr("height", cellSize - 1)
.attr("x", d => timeWeek.count(d3.utcYear(d.Occur_date), d.Occur_date) * cellSize + 0.5)
.attr("y", d => countDay(d.Occur_date.getUTCDay()) * cellSize + 0.5)
.attr("fill", d => color_ord(d.absolute))
.append("title")
.text(d => `${formatDate(d.Occur_date)}
${d.absolute.toLocaleString("en")} crime`);
year.append("g")
.attr("text-anchor", "end")
.selectAll("text")
.data(weekday === "weekday" ? d3.range(1, 6) : d3.range(7))
.join("text")
.attr("x", -5)
.attr("y", i => (countDay(i) + 0.5) * cellSize)
.attr("dy", "0.31em")
.text(formatDayNew);
const month = year.append("g")
.selectAll("g")
.data(([, values]) => d3.utcMonths(d3.utcMonth(new Date(2020, 1, 1)), new Date(2020, 12, 1)))
.join("g");
month.filter((d, i) => i).append("path")
.attr("fill", "none")
.attr("stroke", "#fff")
.attr("stroke-width", 3)
.attr("d", pathMonth);
month.append("text")
.attr("x", d => timeWeek.count(d3.utcYear(d), timeWeek.ceil(d)) * cellSize + 2)
.attr("y", -5)
.text(formatMonth);
return svg.node();
}