// reusable_scatter_plot.js import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm"; // Reusable scatter plot function function scatterPlot() { // Default chart dimensions and margins let width = 600, height = 400, margin = { top: 20, right: 20, bottom: 50, left: 60 }, xValue = d => +d.finalWorth, // Convert string to number for x-axis yValue = d => +d.age, // Convert string to number for y-axis xLabel = "Net Worth (Thousands)", yLabel = "Age"; // Main chart function function chart(selection) { selection.each(async function() { // Async to handle data fetching // Fetch data from Gist const data = await d3.csv("https://gist.githubusercontent.com/Gorantlavishnusai/f31f9b9f663f94a585c936d4606c385f/raw/381aa0806c763e1e9a562b8cdadf2fd59dcf2cfe/Billionaires.csv"); // Set up SVG container const svg = d3.select(this) .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Define x-scale const xScale = d3.scaleLinear() .domain(d3.extent(data, xValue)) .range([0, width]) .nice(); // Define y-scale const yScale = d3.scaleLinear() .domain(d3.extent(data, yValue)) .range([height, 0]) .nice(); // Add x-axis with formatted ticks svg.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(xScale).tickFormat(d3.format(".2s"))) .append("text") .attr("x", width / 2) .attr("y", 40) .attr("fill", "black") .attr("text-anchor", "middle") .text(xLabel); // Add y-axis svg.append("g") .call(d3.axisLeft(yScale)) .append("text") .attr("x", -height / 2) .attr("y", -40) .attr("fill", "black") .attr("text-anchor", "middle") .attr("transform", "rotate(-90)") .text(yLabel); // Add scatter points svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", d => xScale(xValue(d))) .attr("cy", d => yScale(yValue(d))) .attr("r", 5) .attr("fill", "teal") .attr("opacity", 0.7) .append("title") // Tooltip with personName .text(d => d.personName); }); } // Getter/setter methods chart.width = function(value) { if (!arguments.length) return width; width = value; return chart; }; chart.height = function(value) { if (!arguments.length) return height; height = value; return chart; }; chart.xValue = function(value) { if (!arguments.length) return xValue; xValue = value; return chart; }; chart.yValue = function(value) { if (!arguments.length) return yValue; yValue = value; return chart; }; chart.xLabel = function(value) { if (!arguments.length) return xLabel; xLabel = value; return chart; }; chart.yLabel = function(value) { if (!arguments.length) return yLabel; yLabel = value; return chart; }; return chart; } // Initialize and apply the chart const svg = d3.select("body").append("svg"); const myChart = scatterPlot(); svg.call(myChart);