{ const mobile = width < 480; const colWidth = mobile ? width : Math.max(width / 3 - 20, 1000); // Create date picker inputs const startDateInput = Inputs.date({ label: "Start Date", value: d3.min(competitiveRanks, (d) => new Date(d.puzzle.date)), // Default to earliest date min: d3.min(competitiveRanks, (d) => new Date(d.puzzle.date)), max: d3.max(competitiveRanks, (d) => new Date(d.puzzle.date)) }); const endDateInput = Inputs.date({ label: "End Date", value: d3.max(competitiveRanks, (d) => new Date(d.puzzle.date)), // Default to latest date min: d3.min(competitiveRanks, (d) => new Date(d.puzzle.date)), max: d3.max(competitiveRanks, (d) => new Date(d.puzzle.date)) }); // Filter data based on the selected date range const filteredData = (startDate, endDate) => competitiveRanks.filter( (d) => new Date(d.puzzle.date) >= new Date(startDate) && new Date(d.puzzle.date) <= new Date(endDate) && d.rank === 1 // Only include first-place ranks ); const createChart = (startDate, endDate) => { const firstPlaceCounts = d3.rollup( filteredData(startDate, endDate), // Filtered data (group) => group.length, // Count occurrences (d) => d.name // Group by participant ); // Convert to flat array const firstPlaceData = Array.from(firstPlaceCounts, ([name, count]) => ({ name, count })); // Define the desired order of participants const participantOrder = ["Rehan", "Hanna"]; // Rehan first, Hanna second // Create the horizontal bar chart return Plot.plot({ color, // Use the predefined color variable marks: [ // Bars for first-place counts Plot.barX(firstPlaceData, { x: "count", y: "name", fill: "name", // Use colors based on participant names title: (d) => `${d.name}: ${d.count} first-place finishes` // Tooltip }), // Text annotations for counts Plot.text(firstPlaceData, { x: "count", y: "name", text: (d) => d.count, // Display count values dx: 5, // Offset to the right of the bar textAnchor: "start", // Align text fill: "black" // Black text for readability }) ], x: { label: "Number of First-Place Finishes", // Label for x-axis grid: true, // Add gridlines labelAnchor: "center", // Center the label horizontally labelOffset: 35 // Adjust spacing from the axis }, y: { label: null, // No label for y-axis domain: participantOrder, // Ensure Rehan is above Hanna }, color, // Use the existing color scale for consistency marginTop: 20, // Space for chart title marginRight: 30, // Space for annotations marginBottom: 50, // Space for x-axis labels marginLeft: 45, // Space for y-axis labels width: colWidth, // Chart width height: participantOrder.length * 25 + 75 // Dynamic height based on participant count }); }; // Watch for changes in the date inputs and update the chart dynamically const updateChart = () => { const startDate = startDateInput.value; const endDate = endDateInput.value; const chart = createChart(startDate, endDate); chartContainer.innerHTML = ""; // Clear existing chart chartContainer.append(chart); // Add updated chart }; // Create a container for the chart const chartContainer = document.createElement("div"); // Initial render updateChart(); // Listen for changes in date pickers startDateInput.addEventListener("input", updateChart); endDateInput.addEventListener("input", updateChart); // Return the date pickers and the chart container return htl.html`

${startDateInput}

${endDateInput}

${chartContainer}

`; }