D3 Examples - scatterplot233

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
​
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style>
<script type="text/javascript">
// Your beautiful D3 code will go here
​
var width = 800;  //画布的宽度
var height = 800;   //画布的高度
var margin = {top: 40, right: 20, bottom: 30, left: 40}
var width_max = 500;
var svg = d3.select("body")     //选择文档中的body元素
    .append("svg")          //添加一个svg元素
    .attr("width", width)       //设定宽度
    .attr("height", height)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");    //设定高度
d3.csv("file1.csv",function(csvdata) {  
var x =[]
var y =[]
for (var i = 0; i < csvdata.length; i++) {
  if(i <  csvdata.length - 3){
    x.push(csvdata[i].Number_of_people)
    y.push(csvdata[i].Months_worked)
  }
}    
var line = d3.line()
var x_scale = d3.scaleLinear().domain([0, d3.max(x)]).range([0,(width - margin.left - margin.right)])
var y_scale = d3.scaleLinear().domain([0, d3.max(y)]).range([height - margin.top - margin.bottom, 0])
var color = d3.schemeCategory10;
var xAxis = d3.axisBottom(x_scale)
​
var yAxis = d3.axisLeft(y_scale)
console.log(x)
console.log(y)
svg.selectAll(".dot")
      .data(csvdata)
    .enter().append("circle")
      .attr("r", 5)
      .attr("class", "dot")
      .attr("cx", function(d,i) { if(i <  csvdata.length - 3) return x_scale(d.Number_of_people) + margin.left; })
      .attr("cy", function(d,i) { if(i <  csvdata.length - 3) return y_scale(d.Months_worked) +5; })
      .style("fill", function(d, i) { return color[i]; 
                                 });
​
svg.append("g")
      .attr("class", "x axis")
    //  .attr("transform", "translate("+ margin.left +"," + (height - margin.bottom) + ")")
​
      .attr("transform", "translate("+ margin.left +"," + (height - margin.top - margin.bottom+5) + ")")
      .call(xAxis)
      .append("text")
      .attr("class", "label")
      .attr("x", width-60)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Full time Earning")
      .style("fill", "black");
svg.append("g")
       .attr("transform", "translate(" + (              margin.left ) + ",5)")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 10)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("time")
      .style("fill", "black")
​
​
 var legend = svg.selectAll(".legend")
      .data(csvdata)
        .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) {  if(i <  csvdata.length - 3)     return "translate(0," + i * 20 + ")"; });
​
  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", function(d, i) {    if(i <  csvdata.length - 3)                return color[i]; 
      });
​
  legend.append("text")
      .attr("x", width-24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d,i) { if(i <  csvdata.length - 3) return d.Highest_level_completed; });
  });
 
</script>
</body>
</html>
    