viewof kickstarterComparison = { const container = html`

📊 Kickstarter Success Rate & Trends

Compare Kickstarter project success rates across different categories, subcategories, and years.

Category 1: Subcategory 1: Category 2: Subcategory 2: Year: 2023

`; const svg = d3.select(container).select("svg"); const tooltip = d3.select(container).select(".tooltip"); const margin = { top: 50, right: 50, bottom: 50, left: 80 }; const width = +svg.attr("width") - margin.left - margin.right; const height = +svg.attr("height") - margin.top - margin.bottom; const gMain = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`); const xScale = d3.scaleLinear().domain([2009, 2023]).range([0, width]); gMain.append("g").attr("transform", `translate(0,${height})`).call(d3.axisBottom(xScale).tickFormat(d3.format("d"))); async function initialize() { const kickstarterData = await FileAttachment("Kickstarter_processed.tsv").text(); const parsedData = d3.tsvParse(kickstarterData, d => { d.YEAR = +d.YEAR; d.CATEGORY = (d.CATEGORY || "Unknown").trim(); d.SUBCATEGORY = (d.SUBCATEGORY || "General").trim(); d.SUCCESS_RATE = Math.min(+d.SUCCESS_RATE, 1); return d; }); const aggregatedCategoryData = Array.from(d3.group(parsedData, d => `${d.CATEGORY}_${d.YEAR}`)) .map(([key, values]) => { const [category, year] = key.split("_"); return { CATEGORY: category, YEAR: +year, SUCCESS_RATE: d3.mean(values, d => d.SUCCESS_RATE) }; }); const categories = [...new Set(parsedData.map(d => d.CATEGORY))].sort(); const subcategories = d3.group(parsedData, d => d.CATEGORY, d => d.SUBCATEGORY); function populateDropdown(dropdownId, options) { const dropdown = d3.select(dropdownId); dropdown.html(""); options.forEach(option => { dropdown.append("option").attr("value", option).text(option); }); } function updateSubcategories(categoryDropdownId, subcategoryDropdownId) { const selectedCategory = d3.select(categoryDropdownId).property("value"); const subcategoryDropdown = d3.select(subcategoryDropdownId); if (!selectedCategory) { subcategoryDropdown.html("").property("disabled", true); } else { const subcats = Array.from(subcategories.get(selectedCategory)?.keys() || []); populateDropdown(subcategoryDropdownId, subcats); subcategoryDropdown.property("disabled", false); } } populateDropdown("#categoryFilter", categories); populateDropdown("#categoryFilter2", categories); d3.select("#categoryFilter").on("change", function () { updateSubcategories("#categoryFilter", "#subcategoryFilter"); updateChart(); }); d3.select("#categoryFilter2").on("change", function () { updateSubcategories("#categoryFilter2", "#subcategoryFilter2"); updateChart(); }); d3.select("#subcategoryFilter").on("change", updateChart); d3.select("#subcategoryFilter2").on("change", updateChart); d3.select("#yearSlider").on("input", function () { d3.select("#selectedYear").text(this.value); updateChart(); }); function updateChart() { const selectedCategory1 = d3.select("#categoryFilter").property("value"); const selectedSubcategory1 = d3.select("#subcategoryFilter").property("value"); const selectedCategory2 = d3.select("#categoryFilter2").property("value"); const selectedSubcategory2 = d3.select("#subcategoryFilter2").property("value"); const selectedYear = +d3.select("#yearSlider").property("value"); d3.select("#selectedYear").text(selectedYear); function fillMissingYears(data) { const years = d3.range(2009, selectedYear + 1); return years.map(year => { const found = data.find(d => d.YEAR === year); return found ? found : { YEAR: year, SUCCESS_RATE: 0 }; }); } let filteredData1 = selectedSubcategory1 ? parsedData.filter(d => d.YEAR <= selectedYear && d.CATEGORY === selectedCategory1 && d.SUBCATEGORY === selectedSubcategory1) : aggregatedCategoryData.filter(d => d.YEAR <= selectedYear && d.CATEGORY === selectedCategory1); let filteredData2 = selectedSubcategory2 ? parsedData.filter(d => d.YEAR <= selectedYear && d.CATEGORY === selectedCategory2 && d.SUBCATEGORY === selectedSubcategory2) : aggregatedCategoryData.filter(d => d.YEAR <= selectedYear && d.CATEGORY === selectedCategory2); filteredData1 = fillMissingYears(filteredData1.sort((a, b) => a.YEAR - b.YEAR)); filteredData2 = fillMissingYears(filteredData2.sort((a, b) => a.YEAR - b.YEAR)); const allSuccessRates = [...filteredData1, ...filteredData2].map(d => d.SUCCESS_RATE); const yMax = allSuccessRates.length ? Math.max(...allSuccessRates) : 1; const yScale = d3.scaleLinear().domain([0, yMax + 0.1]).range([height, 0]); gMain.selectAll("*").remove(); gMain.append("g").attr("transform", `translate(0,${height})`).call(d3.axisBottom(xScale).tickFormat(d3.format("d"))); gMain.append("g").call(d3.axisLeft(yScale)); // X Axis Label gMain.append("text") .attr("text-anchor", "middle") .attr("x", width / 2) .attr("y", height + 40) .attr("font-size", "14px") .text("Year"); // Y Axis Label gMain.append("text") .attr("text-anchor", "middle") .attr("transform", `rotate(-90)`) .attr("x", -height / 2) .attr("y", -50) .attr("font-size", "14px") .text("Success Rate"); function drawLine(data, color, className) { if (data.length === 0) return; const line = d3.line() .x(d => xScale(d.YEAR)) .y(d => yScale(d.SUCCESS_RATE)); const path = gMain.append("path") .datum(data) .attr("class", className) .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", 3) .attr("d", line); const totalLength = path.node().getTotalLength(); // Get path length path.attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() .duration(1500) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0); // Add dots with tooltips gMain.selectAll(".dot-" + className) .data(data) .enter().append("circle") .attr("class", "dot " + className) .attr("cx", d => xScale(d.YEAR)) .attr("cy", d => yScale(d.SUCCESS_RATE)) .attr("r", 5) .style("fill", "white") .style("stroke", color) .style("stroke-width", 2) .on("mouseover", (event, d) => { tooltip.style("visibility", "visible") .html(` 📅 Year: ${d.YEAR}
📂 Category: ${d.CATEGORY}
📌 Subcategory: ${d.SUBCATEGORY}
✅ Success Rate: ${(d.SUCCESS_RATE * 100).toFixed(2)}%
📊 Total Projects: ${d.total_projects || "N/A"}
🏆 Successful Projects: ${d.successful_projects || "N/A"} `) .style("left", `${event.pageX + 10}px`) .style("top", `${event.pageY - 40}px`); }) .on("mouseout", () => tooltip.style("visibility", "hidden")); } drawLine(filteredData1, "steelblue"); // First category (Blue) drawLine(filteredData2, "red"); // Second category (Red) } updateChart(); } initialize(); return container; }

Purpose-built for displays of data