xxxxxxxxxx<html> <head> <meta charset="utf-8"> <title>D3 Example</title> <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <style> svg { background: black; } circle { opacity: 0.5; } </style> </head> <body> <script> const outerWidth = 1000, outerHeight = 500, margin = { left: -50, top: 0, right: -50, bottom: 0 }, innerWidth = outerWidth - margin.left - margin.right, innerHeight = outerHeight - margin.top - margin.bottom, xColumn = 'longitude', yColumn = 'latitude', rColumn = 'population', colorColumn = 'population', peoplePerPixel = 100000; const svg = d3.select("body").append("svg") .attr("width", outerWidth) .attr("height", outerHeight); const g = svg.append('g') .attr("transform", "translate(" + margin.left + ", " + margin.top + ")"); const xScale = d3.scale.linear().range([0, innerWidth]), yScale = d3.scale.linear().range([innerHeight, 0]), rScale = d3.scale.sqrt(), colorScale = d3.scale.linear().range(['#ddd', '#f00']); function render(data){ xScale.domain(d3.extent(data, d => d[xColumn])); yScale.domain(d3.extent(data, d => d[yColumn])); rScale.domain([0, d3.max(data, d => d[rColumn])]); colorScale.domain([0, d3.max(data, d => d[colorColumn])]); // Compute the size of the biggest circle as a function of peoplePerPixel. const peopleMax = rScale.domain()[1], rMin = 0, rMax = Math.sqrt(peopleMax / (peoplePerPixel * Math.PI)); rScale.range([rMin, rMax]); // Bind data const circles = g.selectAll("circle").data(data); // Enter circles.enter().append("circle"); // Update circles .attr("cx", d => xScale(d[xColumn])) .attr("cy", d => yScale(d[yColumn])) .attr("r", d => rScale(d[rColumn])) .attr("fill", d => colorScale(d[colorColumn])); // Exit circles.exit().remove(); } function type(d) { d.latitude = +d.latitude; d.longitude = +d.longitude; d.population = +d.population; return d; } d3.csv('data.csv', type, render); </script> </body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js