scatter_plot.html added

eda-d3js-visualizations/scatter_plot.html

@@ -0,0 +1,53 @@
+scatter_plot_html = f"""
+<div id="scatterplot" style="width: 800px; height: 500px;"></div>
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script>
+    // Dataset passed from Python
+    const data = {scatter_data_json};
+
+    // Set up SVG canvas dimensions
+    const margin = {{top: 20, right: 30, bottom: 50, left: 50}},
+          width = 800 - margin.left - margin.right,
+          height = 500 - margin.top - margin.bottom;
+
+    const svg = d3.select("#scatterplot").append("svg")
+        .attr("width", width + margin.left + margin.right)
+        .attr("height", height + margin.top + margin.bottom)
+        .append("g")
+        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+    // Create scales
+    const x = d3.scaleLinear()
+        .domain([0, d3.max(data, d => d["GDP per Capita"])])
+        .range([0, width]);
+
+    const y = d3.scaleLinear()
+        .domain([0, d3.max(data, d => d["Happiness Score"])])
+        .range([height, 0]);
+
+    // Add axes
+    svg.append("g")
+        .attr("transform", "translate(0," + height + ")")
+        .call(d3.axisBottom(x));
+
+    svg.append("g")
+        .call(d3.axisLeft(y));
+
+    // Add dots
+    svg.selectAll("circle")
+        .data(data)
+        .enter()
+        .append("circle")
+        .attr("cx", d => x(d["GDP per Capita"]))
+        .attr("cy", d => y(d["Happiness Score"]))
+        .attr("r", 5)
+        .style("fill", "steelblue")
+        .on("mouseover", function(event, d) {{
+            d3.select(this).attr("r", 8).style("fill", "orange");
+        }})
+        .on("mouseout", function() {{
+            d3.select(this).attr("r", 5).style("fill", "steelblue");
+        }});
+</script>
+"""
+HTML(scatter_plot_html)