// 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); });