sync

2026-01-03 13:30:35 -05:00
parent 4f4e5276a6
commit 0e1a1e9a1d
80 changed files with 42107 additions and 0 deletions
@@ -0,0 +1,61 @@
+document.getElementById('generateBtn').addEventListener('click', function() {
+    console.log("Button clicked, fetching word data...");
+    // Show a temporary loading message
+    const cloudDiv = document.getElementById('wordcloud');
+    cloudDiv.innerHTML = '<p>Generating... please wait.</p>';
+
+    fetch('/get-word-data')
+        .then(response => response.json())
+        .then(data => {
+            console.log("Data received from backend:", data);
+            generateCloud(data);
+        })
+        .catch(error => {
+            console.error('Error fetching word data:', error);
+            cloudDiv.innerHTML = '<p>Could not load word data. Is the server running?</p>';
+        });
+});
+
+function generateCloud(words) {
+    // Clear the loading message
+    const cloudDiv = document.getElementById('wordcloud');
+    cloudDiv.innerHTML = '';
+
+    const width = 800;
+    const height = 400;
+
+    // Create a color scale. Words with a higher gift_score get a gold color.
+    const colorScale = d3.scale.linear()
+        .domain([0, 1, 2, 3, 5]) // Corresponds to gift_score
+        .range(["#606770", "#1877f2", "#f5b400", "#f5b400", "#ff8c00"]); // Grey -> Blue -> Gold -> Orange
+
+    // The main word cloud layout logic
+    d3.layout.cloud().size([width, height])
+        .words(words)
+        .padding(5)
+        .rotate(function() { return ~~(Math.random() * 2) * 90; }) // 0 or 90 degrees rotation
+        .font("Impact")
+        .fontSize(function(d) { return 10 + Math.sqrt(d.size) * 5; }) // Scale font size
+        .on("end", draw)
+        .start();
+
+    // This function is called when the layout algorithm finishes
+    function draw(words) {
+        d3.select("#wordcloud").append("svg")
+            .attr("width", width)
+            .attr("height", height)
+            .append("g")
+            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
+            .selectAll("text")
+            .data(words)
+            .enter().append("text")
+            .style("font-size", function(d) { return d.size + "px"; })
+            .style("font-family", "Impact")
+            .style("fill", function(d) { return colorScale(d.gift_score); })
+            .attr("text-anchor", "middle")
+            .attr("transform", function(d) {
+                return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
+            })
+            .text(function(d) { return d.text; });
+    }
+}
@@ -0,0 +1,74 @@
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    background-color: #f0f2f5;
+    color: #1c1e21;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    text-align: center;
+}
+
+.container {
+    background-color: #ffffff;
+    padding: 2rem 3rem;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    max-width: 800px;
+}
+
+h1 {
+    color: #1877f2;
+    margin-bottom: 0.5rem;
+}
+
+p {
+    color: #606770;
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+code {
+    background-color: #e9ebee;
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+}
+
+.highlight-gold {
+    color: #f5b400;
+    font-weight: bold;
+}
+
+button {
+    background-color: #1877f2;
+    color: #ffffff;
+    border: none;
+    border-radius: 6px;
+    font-size: 1.1rem;
+    font-weight: bold;
+    padding: 0.8rem 1.5rem;
+    cursor: pointer;
+    margin-top: 1rem;
+    transition: background-color 0.2s;
+}
+
+button:hover {
+    background-color: #166fe5;
+}
+
+#wordcloud {
+    width: 800px;
+    height: 400px;
+    margin-top: 1rem;
+    border: 1px solid #dddfe2;
+    border-radius: 8px;
+    position: relative;
+}
+
+#wordcloud svg {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}