D3 Examples - Scatterplot scientific output

xxxxxxxxxx
 
<!DOCTYPE html>
 <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i" rel="stylesheet">
<head>
    <style>
        text {
            font-family: "Roboto", sans-serif;
            font-size: 14px;
            font-weight: 300i;
        }
             
    </style>
</head>
<body>
​
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script>
var parseDate = d3.timeParse("%Y");
​
var data = d3.csv('data.csv', function(error, data){
    data.forEach(function(d){
    d.x = parseDate(+d.year);
    d.y =+d.value;  });
  
var color = d3.scaleOrdinal()
      .domain([0])
    .range(["00a6ca"]);//,"#90eb9d","#f9d057","#f29e2e","#e76818","#d7191c"]);//["#2c7bb6", "#00a6ca","#00ccbc","#90eb9d","#f9d057","#f29e2e","#e76818","#d7191c"]
​
        var margin = { top: 30, right: 100, bottom: 30, left: 30 };
        width = 480 - margin.left - margin.right,
        height = 600 - margin.top - margin.bottom;
​
        var tooltip = d3.select("body").append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);
​
​
  
        var x = d3.scaleTime()          
              .range([0, width])
              .nice();
​
        var y = d3.scaleLinear()
            .range([height, 0]);
​
        var xAxis = d3.axisBottom(x).ticks(6),
            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); 
​
  
 
        var xExtent = d3.extent(data, function (d) { return d.x; });
        var yExtent = d3.extent(data, function (d) { return d.y; });
        x.domain(d3.extent(data, function (d) { return d.x; })).nice();
        y.domain(d3.extent(data, function (d) { return d.y; })).nice();
​
        var scatter = svg.append("g")
             .attr("id", "scatterplot")
             .attr("clip-path", "url(#clip)");
            
        scatter.selectAll(".dot")
            .data(data)
          .enter().append("circle")
            .attr("class", "dot")
            .attr("r", 2)
            .attr("cx", function (d) { return x(d.x); })
            .attr("cy", function (d) { return y(d.y); })
            .attr("opacity", .6)
            .style("fill", function(d) { return color(d.cluster); });
​
        // 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("Year");
​
        // 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("log(Total number of references)");
​
        scatter.append("g")
            .attr("class", "brush")
            .call(brush);
​
      
​
      
      
        function brushended() {
​
            var s = d3.event.selection;
            if (!s) {
                if (!idleTimeout) return idleTimeout = setTimeout(idled, idleDelay);
                x.domain(d3.extent(data, function (d) { return d.x; })).nice();
                y.domain(d3.extent(data, function (d) { return d.y; })).nice();
            } else {
                
                x.domain([s[0][0], s[1][0]].map(x.invert, x));
                y.domain([s[1][1], s[0][1]].map(y.invert, y));
                scatter.select(".brush").call(brush.move, null);
            }
            zoom();
        }
​
        function idled() {
            idleTimeout = null;
        }
​
        function zoom() {
​
            var t = scatter.transition().duration(750);
            svg.select("#axis--x").transition(t).call(xAxis);
            svg.select("#axis--y").transition(t).call(yAxis);
            scatter.selectAll("circle").transition(t)
            .attr("cx", function (d) { return x(d.x); })
            .attr("cy", function (d) { return y(d.y); });
        }
  
  
    var legend = svg.selectAll(".legend")
    .data([0])
        .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate("+(width+70)+"," + i * 30 + ")"; });
​
  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")
        .attr("transform", function(d, i) { return "translate(20,0)"; })
      .style("text-anchor", "end")
      .text("Data-Points")
        .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>
    