D3 Examples - Scatter Plot

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style type = "text/css">
    svg{
      border: 1px solid rgb(93,39,200)
    }
    circle {
  fill-opacity: 0.8;
}
  </style>
</head>
​
<body>
  <script type="text/javascript">
        var xdim ="investmen_Loan",
    ydim = "investment_approved",
    colordim = "Sector";
    
    var margin = { top: 15, right: 12, bottom: 33, left: 30 },
    width = 500 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    
    
  // create quantitative linear scales
    var xscale = d3.scaleLinear()
      .range([0, width]);
​
    var yscale = d3.scaleLinear()
      .range([height, 0]);
      
    
    var color = d3.scaleOrdinal()
  .range([
    "#71dfbd",
    "#db7683",
    "#b1ce76",
    "#869eda",
    "#bda15a",
    "#69bece",
    "#dc8b5e",
    "#68a375",
    "#cd9a8c",
    "#d4daa8"
      ]);
​
    
  d3.csv("Renwable_clean.csv", function(error, data) {
  if (error) console.log(error);
    console.log(data)
​
  // coerce the data to a number
        data.forEach(function(d) {
        d[xdim] = +d[xdim];
        d[ydim] = +d[ydim];
      d["year"] = +d["year"];
    });
      
      // dynamically setting scale extents
  xscale.domain(
    [0, d3.max(data, function(d) { return d[xdim]; })]
  );
​
  yscale.domain(
    [0, d3.max(data, function(d) { return d[ydim]; })]
  );
​
      
  var xAxis = d3.axisBottom()
    .scale(xscale);
​
  var yAxis = d3.axisLeft()
    .scale(yscale);
    
    
    
    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] + ")");
    
    svg.append("g")
    .attr("class", "y--axis")
    .call(yAxis);
    
    svg.append("g")
    .attr("class", "x--axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
​
    
function update(data) {
  var t = d3.transition()
      .duration(750);
  
  var dots = svg.selectAll("circle")
    .data(data, function(d) { return d; });
  
  
  dots.exit()
    
  dots.attr("class", "update")
    .attr("r", 3.5)
    .transition(t)
  
  
  dots.enter().append("circle")
    .attr("fill", function(d) { return color(d[colordim]); })
    .attr("cx", function(d) { return xscale(d[xdim]); })
    .attr("cy", function(d) { return yscale(d[ydim]); })
    .attr("r", 5.5)
    .on("mouseover", function(d) {
      console.log(d);
    });
  
  
//       // filter
//   var initial = data.filter(function(d) {
//     if( d["year"] == 2 ||
//          d["year"]== 3 ||
//          d["year"]== 4)
//        { 
//             return d;
//         } 
​
//   });
​
 
//       // join the data to some circle elements
//     var update = svg.selectAll("circle")
//     .data(initial, function(d) { return d; })
//     .enter().append("circle")
//     .attr("fill", function(d) { return color(d[colordim]); })
//     .attr("cx", function(d) { return xscale(d[xdim]); })
//     .attr("cy", function(d) { return yscale(d[ydim]); })
//     .attr("r", 5.5)
//     .on("mouseover", function(d) {
//       console.log(d);
//     });
    
//     update
//      .exit()
//      .remove()
​
//    subset = data.filter(function(d) {
//        if( d["year"] == 5 ||
//          d["year"]== 6 ||
//          d["year"]== 7)
//        { 
//             return d;
//         } 
//   });
    
//     update = svg.selectAll('circle')
//      .data(subset,function(d) { return d; })
//      .enter().append("circle")
//      .attr("fill", function(d) { return color(d[colordim]); })
//      .attr("cx", function(d) { return xscale(d[xdim]); })
//      .attr("cy", function(d) { return yscale(d[ydim]); })
//      .attr("r", 5.5)
    
//     update
//      .exit()
//      .remove()
​
    
//     update
//      .transition()
//      .delay(100)
//      .duration(750)
//      .attr("cx", function(d) { return xscale(d[xdim]); })
//      .attr("cy", function(d) { return yscale(d[ydim]); })
    
//     subset = data.filter(function(d) {
//     return d.year == 8||
//              d.year == 9 ||
//           d.year == 10; 
//         });
    
//     update = svg.selectAll('circle')
//      .data(subset,function(d) { return d; })
//      .enter().append("circle")
//      .attr("fill", function(d) { return color(d[colordim]); })
//      .attr("cx", function(d) { return xscale(d[xdim]); })
//      .attr("cy", function(d) { return yscale(d[ydim]); })
//      .attr("r", 5.5)
    
//     update
//      .exit()
//      .remove()
    
//     update
//      .transition()
//      .delay(100)
//      .duration(750)
//      .attr("cx", function(d) { return xscale(d[xdim]); })
//      .attr("cy", function(d) { return yscale(d[ydim]); })
    
    
//     subset = data.filter(function(d) {
//     return d.year == 11||
//              d.year == 12||
//           d.year == 13; 
//         });
    
//     update = svg.selectAll('circle')
//      .data(subset,function(d) { return d;})
//      .enter().append("circle")
//      .attr("fill", function(d) { return color(d[colordim]); })
//      .attr("cx", function(d) { return xscale(d[xdim]); })
//      .attr("cy", function(d) { return yscale(d[ydim]); })
//      .attr("r", 5.5)
    
//     update
//      .exit()
//      .remove()
    
//     update
//      .transition()
//      .delay(100)
//      .duration(750)
//      .attr("cx", function(d) { return xscale(d[xdim]); })
//      .attr("cy", function(d) { return yscale(d[ydim]); })
​
​
update(subset);
    
});
​
  </script>
</body>
​
    