Scatterplot basic

Scatter plot zoom of the brushed region. Double-click to zoom out.

forked from EfratVil's block: Scatter plot with zoom

<!DOCTYPE html>
<meta charset="utf-8">
<p id="g1"></p>
<head>
    <style>
        body {
            font-family: "Helvetica Neue", Helvetica, sans-serif;
            font-size: 14px;
        }
             
    </style>
</head>
<body>

var data = d3.csv('data.csv', function(error, data){
	data.forEach(function(d){
    d.x = +d.x;
    d.y =+d.y;	});
  
			  var color = d3.scaleOrdinal(d3.schemeCategory20);

var margin = { top: 30, right: 100, bottom: 30, left: 30 };
        width = 900 - margin.left - margin.right,
        height = 480 - margin.top - margin.bottom;

var tooltip = d3.select("body").append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);

var x = d3.scaleLinear()          
              .range([0, width])
              .nice();

var y = d3.scaleLinear()
            .range([height, 0]);

var xAxis = d3.axisBottom(x).ticks(12),
            yAxis = d3.axisLeft(y).ticks(12 * height / width);

var brush = d3.brush().extent([[0, 0], [width, height]]).on("end", brushended),
            idleTimeout,
            idleDelay = 350;
     
        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 + ")");

var clip = svg.append("defs").append("svg:clipPath")
            .attr("id", "clip")
            .append("svg:rect")
            .attr("width", width )
            .attr("height", height )
            .attr("x", 0) 
            .attr("y", 0);

// x axis
        svg.append("g")
           .attr("class", "x axis")
           .attr('id', "axis--x")
           .attr("transform", "translate(0," + height + ")")
           .call(xAxis);

svg.append("text")
         .style("text-anchor", "end")
            .attr("x", width)
            .attr("y", height - 8)
         .text("PC 2l");

// y axis
        svg.append("g")
            .attr("class", "y axis")
            .attr('id', "axis--y")
            .call(yAxis);

svg.append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", "1em")
            .style("text-anchor", "end")
            .text("PC 1");

scatter.append("g")
            .attr("class", "brush")
            .call(brush);

function brushended() {

function idled() {
            idleTimeout = null;
        }

function zoom() {

var clicked = null

legend.append("circle")
		.attr("r", 7)
    .style("fill", function(d) { return color(d); })
    .attr("transform", function(d, i) { return "translate(-68,1)"; })
  	.on("click", function(d) {

d3.selectAll(".dot").style("opacity", .7)
    	if(clicked !== d) {
        
        d3.selectAll(".dot")
          .filter(function(e) {
          return e.cluster !== d
        })
        .style("opacity", 0.1)
    		clicked = d;
      } else {
        clicked = null;
      }
        
  	})
 
  legend.append("text")
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; })
    	.on("click", function(d) {

d3.selectAll(".dot").style("opacity", .7)
          
    	if(clicked !== d) {
        
        d3.selectAll(".dot")
          .filter(function(e) {
          return e.cluster !== d
        })
        .style("opacity", 0.1)
    		clicked = d;
      } else {
        clicked = null;
      }
        
  	});
  
  
  
})
    </script>
</body>

https://d3js.org/d3.v4.min.js