How to make a ****ter plot from a csv file using d3.js?

1
2
3

d3.csv("data.csv").then(function(data) {
  // code to create ****ter plot goes here
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

var margin = { top: 20, right: 20, bottom: 20, left: 20 };
var width = 800 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;

var svg = d3.select("body")
  .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 + ")");

1
2
3
4
5
6
7

var xScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return +d.x; })])
  .range([0, width]);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return +d.y; })])
  .range([height, 0]);

1
2
3
4
5
6
7
8

svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", function(d) { return xScale(+d.x); })
  .attr("cy", function(d) { return yScale(+d.y); })
  .attr("r", 5)
  .attr("fill", "steelblue");

1
2
3
4
5
6

svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(xScale));

svg.append("g")
  .call(d3.axisLeft(yScale));

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

svg.append("text")
  .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.top + 10) + ")")
  .style("text-anchor", "middle")
  .text("X-axis Label");

svg.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 0 - margin.left)
  .attr("x", 0 - (height / 2))
  .attr("dy", "1em")
  .style("text-anchor", "middle")
  .text("Y-axis Label");