viewof kickstarterComparison = { const container = html`

Kickstarter Success Rate vs. Funding Goal

Explore the relationship between funding goals and success rates across categories and subcategories.

Category: Subcategory:

`; 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})`); async function initialize() { const kickstarterData = await FileAttachment("Kickstarter_reduced.tsv").text(); const parsedData = d3.tsvParse(kickstarterData, d => { d.GOAL_IN_USD = +d.GOAL_IN_USD.replace(/[^0-9.]/g, "") || 0; d.STATE = d.STATE; d.CATEGORY = (d.CATEGORY || "Unknown").trim(); d.SUBCATEGORY = (d.SUBCATEGORY || "General").trim(); return d; }); const categories = [...new Set(parsedData.map(d => d.CATEGORY))]; const subcategories = d3.group(parsedData, d => d.CATEGORY, d => d.SUBCATEGORY); const goalBins = [0, 1000, 5000, 10000, 20000, 50000, 100000, 500000, 1000000, 5000000, 10000000]; const goalLabels = ["0-1K", "1K-5K", "5K-10K", "10K-20K", "20K-50K", "50K-100K", "100K-500K", "500K-1M", "1M-5M", "5M-10M"]; 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 || selectedCategory === "All") { subcategoryDropdown.html("").property("disabled", true); } else { const subcats = Array.from(subcategories.get(selectedCategory)?.keys() || []); populateDropdown(subcategoryDropdownId, subcats); subcategoryDropdown.property("disabled", false); } } populateDropdown("#categoryFilter", categories); d3.select("#categoryFilter").on("change", function () { updateSubcategories("#categoryFilter", "#subcategoryFilter"); updateChart(); }); d3.select("#subcategoryFilter").on("change", updateChart); function updateChart() { const selectedCategory = d3.select("#categoryFilter").property("value"); const selectedSubcategory = d3.select("#subcategoryFilter").property("value"); const successRate = goalLabels.reduce((acc, label) => { acc[label] = { total: 0, success: 0 }; return acc; }, {}); parsedData.forEach(d => { if ((selectedCategory === "All" || d.CATEGORY === selectedCategory) && (selectedSubcategory === "All" || d.SUBCATEGORY === selectedSubcategory)) { let bin = goalLabels[goalBins.findIndex(g => g > d.GOAL_IN_USD) - 1]; if (bin) { successRate[bin].total += 1; if (d.STATE === "successful") successRate[bin].success += 1; } } }); const dataset = goalLabels.map(label => ({ goal: label, total: successRate[label].total, successRate: successRate[label].total > 0 ? (successRate[label].success / successRate[label].total) * 100 : 0 })); const xScale = d3.scaleBand().domain(goalLabels).range([0, width]).padding(0.4); const yScale = d3.scaleLinear().domain([0, 100]).range([height, 0]); const sizeScale = d3.scaleSqrt().domain([0, d3.max(dataset, d => d.total)]).range([5, 50]); const colorScale = d3.scaleSequential(d3.interpolateTurbo).domain([0, 100]); gMain.selectAll("*").remove(); gMain.append("g").attr("transform", `translate(0,${height})`).call(d3.axisBottom(xScale)); gMain.append("g").call(d3.axisLeft(yScale)); gMain.append("text") .attr("x", width / 2) .attr("y", height + 40) .attr("text-anchor", "middle") .attr("class", "axis-label") .text("Funding Goal Ranges (USD)"); gMain.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", -50) .attr("text-anchor", "middle") .attr("class", "axis-label") .text("Success Rate (%)"); gMain.selectAll("circle").data(dataset) .enter().append("circle") .attr("cx", d => xScale(d.goal) + xScale.bandwidth() / 2) .attr("cy", height) .attr("r", 0) .attr("fill", d => colorScale(d.successRate)) .attr("opacity", 0.8) .on("mouseover", (event, d) => { tooltip.style("visibility", "visible") .html(`Goal Range: ${d.goal}
Success Rate: ${d.successRate.toFixed(2)}%
Projects: ${d.total}`); }) .on("mousemove", (event) => { tooltip .style("left", `${event.pageX + 10}px`) .style("top", `${event.pageY - 28}px`); }) .on("mouseout", () => { tooltip.style("visibility", "hidden"); }) .transition().duration(1000) .attr("cy", d => yScale(d.successRate)) .attr("r", d => sizeScale(d.total)); } updateChart(); // draw initial chart } initialize(); return container; }