// Load the data d3.csv("data.csv", function(data)
{ // Define the dimensions of the SVG container
var width = 800; var height = 500; // Define the
scales for the x-axis and y-axis var xScale =
d3.scaleLinear() .domain([d3.min(data, function(d)
{ return d["Happiness Score"]; }), d3.max(data,
function(d) { return d["Happiness Score"]; })])
.range([50, width - 50]); var yScale =
d3.scaleLinear() .domain([d3.min(data, function(d)
{ return d["rate of depressive disorders"]; }),
d3.max(data, function(d) { return d["rate of
depressive disorders"]; })]) .range([height - 50,
50]); // Define the color scale var colorScale =
d3.scaleOrdinal() .domain(["Region 1", "Region 2",
"Region 3", "Region 4"]) .range(["red", "blue",
"green", "orange"]); // Set up the SVG container
var svg = d3.select("body") .append("svg")
.attr("width", width) .attr("height", height); //
Draw the scatter plot var circles =
svg.selectAll("circle") .data(data) .enter()
.append("circle") .attr("cx", function(d) { return
xScale(d["Happiness Score"]); }) .attr("cy",
function(d) { return yScale(d["rate of depressive
disorders"]); }) .attr("r", function(d) { return
d["population"] / 10000000; }) .attr("fill",
function(d) { return colorScale(d["Region"]); })
.attr("opacity", 0.5); // Add labels and axes
svg.append("text") .attr("class", "axis-label")
.attr("text-anchor", "middle") .attr("x", width /
2) .attr("y", height - 10) .text("Happiness
Score"); svg.append("text") .attr("class",
"axis-label") .attr("text-anchor", "middle")
.attr("x", -height / 2) .attr("y", 20)
.attr("transform", "rotate(-90)") .text("Rate of
Depressive Disorders"); var xAxis =
d3.axisBottom(xScale); var yAxis =
d3.axisLeft(yScale); svg.append("g")
.attr("class", "axis") .attr("transform",
"translate(0," + (height - 50) + ")")
.call(xAxis); svg.append("g") .attr("class",
"axis") .attr("transform", "translate(50,0)")
.call(yAxis); });