{ // Create a container for the visualization function htmlContainer() { var container = html`

Selected Date:

` return d3.select(container) } function createCalendar(container, cellSize = 17) { const weekDays = 7, height = cellSize * (weekDays + 2) + 50, X = d3.map(randomData, d => d.date), Y = d3.map(randomData, d=> d.value), H = d3.map(randomData, d=> d.color), I = d3.range(X.length), groups = [... new Set(Y)], countDay = i => i, timeWeek = d3.utcSunday, formatMonth = d3.utcFormat("%b"), years = d3.groups(I, i => X[i].getUTCFullYear()).reverse(), colorMap = {}; // Fill colorMap with mappings between // Cell class values and color assignment groups.forEach(d=>{ const groupRecord = randomData.filter(v=> v.value == d)[0] colorMap[`calendar-${d}`] = groupRecord.color } ) // set size and styling for calendar const cal = container.select("#calendar") .attr("width", width) .attr("height", height * years.length) .attr("viewBox", [0, 0, width, height * years.length]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "sans-serif") .attr("font-size", 10) .on('mouseleave', () => { // Code for when the mouse leaves the data visualization goes here! const cells = year.selectAll('.cell')._groups[0] cells.forEach(d=> { const cellClass = d.classList[1] d3.select(d).attr('fill', colorMap[cellClass]) }) container.select('#label').text('') }) // g element for the full year const year = cal.selectAll("g") .data(years) .join("g") .attr("transform", (d, i) => `translate(40.5,${height * i + cellSize * 1.5})`); // Append a for each day of the year const cell = year.append("g") .selectAll("rect") .data(([, I]) => I) .join("rect") .attr("class", i => `cell calendar-${Y[i]}`) .attr("date", i => X[i].toLocaleDateString("en-US")) .attr("color-label", i => H[i]) .attr("width", cellSize - 1) .attr("height", cellSize - 1) .attr("x", i => timeWeek.count(d3.utcYear(X[i]), X[i]) * cellSize + 0.5) .attr("y", i => countDay(X[i].getUTCDay()) * cellSize + 0.5) .attr("fill", i => H[i]) // Set color .on("mouseover", function(e,d) { // Code for when the mouse hovers over a specific cell goes here! var selectedGroup = d3.select(this).attr('class').split(' ')[1] var selectedDate = d3.select(this).attr('date') container.select('#label').text(selectedDate) Object.entries(colorMap).forEach(d=> { const group = d[0] const color = d[1] if (group===selectedGroup) { year.selectAll(`.${selectedGroup}`).attr('fill', color) } else { year.selectAll(`.${group}`).attr('fill', '#808080') } } ) } ) // Add month label function pathMonth(t) { const d = Math.max(0, Math.min(weekDays, countDay(t.getUTCDay()))); const w = timeWeek.count(d3.utcYear(t), t); return `${d === 0 ? `M${w * cellSize},0` : d === weekDays ? `M${(w + 1) * cellSize},0` : `M${(w + 1) * cellSize},0V${d * cellSize}H${w * cellSize}`}V${weekDays * cellSize}`; } const month = year.append("g") .selectAll("g") .data(([, I]) => d3.utcMonths(d3.utcMonth(X[I[0]]), X[I[I.length - 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) .attr("y", -5) .text(formatMonth); } const container = htmlContainer() createCalendar(container) return container.node() }