score:3

Here's a quick demo of doing this in a very d3ish way:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    font: 10px sans-serif;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  
  circle {
    fill-opacity: .7;
  }
  
  circle.hidden {
    fill: #ccc !important;
  }
  
  .extent {
    fill: #000;
    fill-opacity: .125;
    stroke: #fff;
  }
  
  .selected {
    background: #427BD6;
  }
</style>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script>
    var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
      },
      width = 400 - margin.left - margin.right,
      height = 300 - margin.top - margin.bottom;

    var x = d3.scale.linear()
      .range([0, width]);

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

    var color = d3.scale.category10();

    var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

    var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");

    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 + ")");

    data = [{"sepalLength":"5.1","sepalWidth":"3.5","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.9","sepalWidth":"3.0","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.7","sepalWidth":"3.2","petalLength":"1.3","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.6","sepalWidth":"3.1","petalLength":"1.5","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.0","sepalWidth":"3.6","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.4","sepalWidth":"3.9","petalLength":"1.7","petalWidth":"0.4","species":"setosa"},{"sepalLength":"4.6","sepalWidth":"3.4","petalLength":"1.4","petalWidth":"0.3","species":"setosa"},{"sepalLength":"5.0","sepalWidth":"3.4","petalLength":"1.5","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.4","sepalWidth":"2.9","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.9","sepalWidth":"3.1","petalLength":"1.5","petalWidth":"0.1","species":"setosa"},{"sepalLength":"5.4","sepalWidth":"3.7","petalLength":"1.5","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.8","sepalWidth":"3.4","petalLength":"1.6","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.8","sepalWidth":"3.0","petalLength":"1.4","petalWidth":"0.1","species":"setosa"},{"sepalLength":"4.3","sepalWidth":"3.0","petalLength":"1.1","petalWidth":"0.1","species":"setosa"},{"sepalLength":"5.8","sepalWidth":"4.0","petalLength":"1.2","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.7","sepalWidth":"4.4","petalLength":"1.5","petalWidth":"0.4","species":"setosa"},{"sepalLength":"5.4","sepalWidth":"3.9","petalLength":"1.3","petalWidth":"0.4","species":"setosa"},{"sepalLength":"5.1","sepalWidth":"3.5","petalLength":"1.4","petalWidth":"0.3","species":"setosa"},{"sepalLength":"5.7","sepalWidth":"3.8","petalLength":"1.7","petalWidth":"0.3","species":"setosa"},{"sepalLength":"5.1","sepalWidth":"3.8","petalLength":"1.5","petalWidth":"0.3","species":"setosa"},{"sepalLength":"5.4","sepalWidth":"3.4","petalLength":"1.7","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.1","sepalWidth":"3.7","petalLength":"1.5","petalWidth":"0.4","species":"setosa"},{"sepalLength":"4.6","sepalWidth":"3.6","petalLength":"1.0","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.1","sepalWidth":"3.3","petalLength":"1.7","petalWidth":"0.5","species":"setosa"},{"sepalLength":"4.8","sepalWidth":"3.4","petalLength":"1.9","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.0","sepalWidth":"3.0","petalLength":"1.6","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.0","sepalWidth":"3.4","petalLength":"1.6","petalWidth":"0.4","species":"setosa"},{"sepalLength":"5.2","sepalWidth":"3.5","petalLength":"1.5","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.2","sepalWidth":"3.4","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.7","sepalWidth":"3.2","petalLength":"1.6","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.8","sepalWidth":"3.1","petalLength":"1.6","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.4","sepalWidth":"3.4","petalLength":"1.5","petalWidth":"0.4","species":"setosa"},{"sepalLength":"5.2","sepalWidth":"4.1","petalLength":"1.5","petalWidth":"0.1","species":"setosa"},{"sepalLength":"5.5","sepalWidth":"4.2","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.9","sepalWidth":"3.1","petalLength":"1.5","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.0","sepalWidth":"3.2","petalLength":"1.2","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.5","sepalWidth":"3.5","petalLength":"1.3","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.9","sepalWidth":"3.6","petalLength":"1.4","petalWidth":"0.1","species":"setosa"},{"sepalLength":"4.4","sepalWidth":"3.0","petalLength":"1.3","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.1","sepalWidth":"3.4","petalLength":"1.5","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.0","sepalWidth":"3.5","petalLength":"1.3","petalWidth":"0.3","species":"setosa"},{"sepalLength":"4.5","sepalWidth":"2.3","petalLength":"1.3","petalWidth":"0.3","species":"setosa"},{"sepalLength":"4.4","sepalWidth":"3.2","petalLength":"1.3","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.0","sepalWidth":"3.5","petalLength":"1.6","petalWidth":"0.6","species":"setosa"},{"sepalLength":"5.1","sepalWidth":"3.8","petalLength":"1.9","petalWidth":"0.4","species":"setosa"},{"sepalLength":"4.8","sepalWidth":"3.0","petalLength":"1.4","petalWidth":"0.3","species":"setosa"},{"sepalLength":"5.1","sepalWidth":"3.8","petalLength":"1.6","petalWidth":"0.2","species":"setosa"},{"sepalLength":"4.6","sepalWidth":"3.2","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.3","sepalWidth":"3.7","petalLength":"1.5","petalWidth":"0.2","species":"setosa"},{"sepalLength":"5.0","sepalWidth":"3.3","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},{"sepalLength":"7.0","sepalWidth":"3.2","petalLength":"4.7","petalWidth":"1.4","species":"versicolor"},{"sepalLength":"6.4","sepalWidth":"3.2","petalLength":"4.5","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"6.9","sepalWidth":"3.1","petalLength":"4.9","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"5.5","sepalWidth":"2.3","petalLength":"4.0","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"6.5","sepalWidth":"2.8","petalLength":"4.6","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"5.7","sepalWidth":"2.8","petalLength":"4.5","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"6.3","sepalWidth":"3.3","petalLength":"4.7","petalWidth":"1.6","species":"versicolor"},{"sepalLength":"4.9","sepalWidth":"2.4","petalLength":"3.3","petalWidth":"1.0","species":"versicolor"},{"sepalLength":"6.6","sepalWidth":"2.9","petalLength":"4.6","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"5.2","sepalWidth":"2.7","petalLength":"3.9","petalWidth":"1.4","species":"versicolor"},{"sepalLength":"5.0","sepalWidth":"2.0","petalLength":"3.5","petalWidth":"1.0","species":"versicolor"},{"sepalLength":"5.9","sepalWidth":"3.0","petalLength":"4.2","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"6.0","sepalWidth":"2.2","petalLength":"4.0","petalWidth":"1.0","species":"versicolor"},{"sepalLength":"6.1","sepalWidth":"2.9","petalLength":"4.7","petalWidth":"1.4","species":"versicolor"},{"sepalLength":"5.6","sepalWidth":"2.9","petalLength":"3.6","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"6.7","sepalWidth":"3.1","petalLength":"4.4","petalWidth":"1.4","species":"versicolor"},{"sepalLength":"5.6","sepalWidth":"3.0","petalLength":"4.5","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"5.8","sepalWidth":"2.7","petalLength":"4.1","petalWidth":"1.0","species":"versicolor"},{"sepalLength":"6.2","sepalWidth":"2.2","petalLength":"4.5","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"5.6","sepalWidth":"2.5","petalLength":"3.9","petalWidth":"1.1","species":"versicolor"},{"sepalLength":"5.9","sepalWidth":"3.2","petalLength":"4.8","petalWidth":"1.8","species":"versicolor"},{"sepalLength":"6.1","sepalWidth":"2.8","petalLength":"4.0","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"6.3","sepalWidth":"2.5","petalLength":"4.9","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"6.1","sepalWidth":"2.8","petalLength":"4.7","petalWidth":"1.2","species":"versicolor"},{"sepalLength":"6.4","sepalWidth":"2.9","petalLength":"4.3","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"6.6","sepalWidth":"3.0","petalLength":"4.4","petalWidth":"1.4","species":"versicolor"},{"sepalLength":"6.8","sepalWidth":"2.8","petalLength":"4.8","petalWidth":"1.4","species":"versicolor"},{"sepalLength":"6.7","sepalWidth":"3.0","petalLength":"5.0","petalWidth":"1.7","species":"versicolor"},{"sepalLength":"6.0","sepalWidth":"2.9","petalLength":"4.5","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"5.7","sepalWidth":"2.6","petalLength":"3.5","petalWidth":"1.0","species":"versicolor"},{"sepalLength":"5.5","sepalWidth":"2.4","petalLength":"3.8","petalWidth":"1.1","species":"versicolor"},{"sepalLength":"5.5","sepalWidth":"2.4","petalLength":"3.7","petalWidth":"1.0","species":"versicolor"},{"sepalLength":"5.8","sepalWidth":"2.7","petalLength":"3.9","petalWidth":"1.2","species":"versicolor"},{"sepalLength":"6.0","sepalWidth":"2.7","petalLength":"5.1","petalWidth":"1.6","species":"versicolor"},{"sepalLength":"5.4","sepalWidth":"3.0","petalLength":"4.5","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"6.0","sepalWidth":"3.4","petalLength":"4.5","petalWidth":"1.6","species":"versicolor"},{"sepalLength":"6.7","sepalWidth":"3.1","petalLength":"4.7","petalWidth":"1.5","species":"versicolor"},{"sepalLength":"6.3","sepalWidth":"2.3","petalLength":"4.4","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"5.6","sepalWidth":"3.0","petalLength":"4.1","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"5.5","sepalWidth":"2.5","petalLength":"4.0","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"5.5","sepalWidth":"2.6","petalLength":"4.4","petalWidth":"1.2","species":"versicolor"},{"sepalLength":"6.1","sepalWidth":"3.0","petalLength":"4.6","petalWidth":"1.4","species":"versicolor"},{"sepalLength":"5.8","sepalWidth":"2.6","petalLength":"4.0","petalWidth":"1.2","species":"versicolor"},{"sepalLength":"5.0","sepalWidth":"2.3","petalLength":"3.3","petalWidth":"1.0","species":"versicolor"},{"sepalLength":"5.6","sepalWidth":"2.7","petalLength":"4.2","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"5.7","sepalWidth":"3.0","petalLength":"4.2","petalWidth":"1.2","species":"versicolor"},{"sepalLength":"5.7","sepalWidth":"2.9","petalLength":"4.2","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"6.2","sepalWidth":"2.9","petalLength":"4.3","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"5.1","sepalWidth":"2.5","petalLength":"3.0","petalWidth":"1.1","species":"versicolor"},{"sepalLength":"5.7","sepalWidth":"2.8","petalLength":"4.1","petalWidth":"1.3","species":"versicolor"},{"sepalLength":"6.3","sepalWidth":"3.3","petalLength":"6.0","petalWidth":"2.5","species":"virginica"},{"sepalLength":"5.8","sepalWidth":"2.7","petalLength":"5.1","petalWidth":"1.9","species":"virginica"},{"sepalLength":"7.1","sepalWidth":"3.0","petalLength":"5.9","petalWidth":"2.1","species":"virginica"},{"sepalLength":"6.3","sepalWidth":"2.9","petalLength":"5.6","petalWidth":"1.8","species":"virginica"},{"sepalLength":"6.5","sepalWidth":"3.0","petalLength":"5.8","petalWidth":"2.2","species":"virginica"},{"sepalLength":"7.6","sepalWidth":"3.0","petalLength":"6.6","petalWidth":"2.1","species":"virginica"},{"sepalLength":"4.9","sepalWidth":"2.5","petalLength":"4.5","petalWidth":"1.7","species":"virginica"},{"sepalLength":"7.3","sepalWidth":"2.9","petalLength":"6.3","petalWidth":"1.8","species":"virginica"},{"sepalLength":"6.7","sepalWidth":"2.5","petalLength":"5.8","petalWidth":"1.8","species":"virginica"},{"sepalLength":"7.2","sepalWidth":"3.6","petalLength":"6.1","petalWidth":"2.5","species":"virginica"},{"sepalLength":"6.5","sepalWidth":"3.2","petalLength":"5.1","petalWidth":"2.0","species":"virginica"},{"sepalLength":"6.4","sepalWidth":"2.7","petalLength":"5.3","petalWidth":"1.9","species":"virginica"},{"sepalLength":"6.8","sepalWidth":"3.0","petalLength":"5.5","petalWidth":"2.1","species":"virginica"},{"sepalLength":"5.7","sepalWidth":"2.5","petalLength":"5.0","petalWidth":"2.0","species":"virginica"},{"sepalLength":"5.8","sepalWidth":"2.8","petalLength":"5.1","petalWidth":"2.4","species":"virginica"},{"sepalLength":"6.4","sepalWidth":"3.2","petalLength":"5.3","petalWidth":"2.3","species":"virginica"},{"sepalLength":"6.5","sepalWidth":"3.0","petalLength":"5.5","petalWidth":"1.8","species":"virginica"},{"sepalLength":"7.7","sepalWidth":"3.8","petalLength":"6.7","petalWidth":"2.2","species":"virginica"},{"sepalLength":"7.7","sepalWidth":"2.6","petalLength":"6.9","petalWidth":"2.3","species":"virginica"},{"sepalLength":"6.0","sepalWidth":"2.2","petalLength":"5.0","petalWidth":"1.5","species":"virginica"},{"sepalLength":"6.9","sepalWidth":"3.2","petalLength":"5.7","petalWidth":"2.3","species":"virginica"},{"sepalLength":"5.6","sepalWidth":"2.8","petalLength":"4.9","petalWidth":"2.0","species":"virginica"},{"sepalLength":"7.7","sepalWidth":"2.8","petalLength":"6.7","petalWidth":"2.0","species":"virginica"},{"sepalLength":"6.3","sepalWidth":"2.7","petalLength":"4.9","petalWidth":"1.8","species":"virginica"},{"sepalLength":"6.7","sepalWidth":"3.3","petalLength":"5.7","petalWidth":"2.1","species":"virginica"},{"sepalLength":"7.2","sepalWidth":"3.2","petalLength":"6.0","petalWidth":"1.8","species":"virginica"},{"sepalLength":"6.2","sepalWidth":"2.8","petalLength":"4.8","petalWidth":"1.8","species":"virginica"},{"sepalLength":"6.1","sepalWidth":"3.0","petalLength":"4.9","petalWidth":"1.8","species":"virginica"},{"sepalLength":"6.4","sepalWidth":"2.8","petalLength":"5.6","petalWidth":"2.1","species":"virginica"},{"sepalLength":"7.2","sepalWidth":"3.0","petalLength":"5.8","petalWidth":"1.6","species":"virginica"},{"sepalLength":"7.4","sepalWidth":"2.8","petalLength":"6.1","petalWidth":"1.9","species":"virginica"},{"sepalLength":"7.9","sepalWidth":"3.8","petalLength":"6.4","petalWidth":"2.0","species":"virginica"},{"sepalLength":"6.4","sepalWidth":"2.8","petalLength":"5.6","petalWidth":"2.2","species":"virginica"},{"sepalLength":"6.3","sepalWidth":"2.8","petalLength":"5.1","petalWidth":"1.5","species":"virginica"},{"sepalLength":"6.1","sepalWidth":"2.6","petalLength":"5.6","petalWidth":"1.4","species":"virginica"},{"sepalLength":"7.7","sepalWidth":"3.0","petalLength":"6.1","petalWidth":"2.3","species":"virginica"},{"sepalLength":"6.3","sepalWidth":"3.4","petalLength":"5.6","petalWidth":"2.4","species":"virginica"},{"sepalLength":"6.4","sepalWidth":"3.1","petalLength":"5.5","petalWidth":"1.8","species":"virginica"},{"sepalLength":"6.0","sepalWidth":"3.0","petalLength":"4.8","petalWidth":"1.8","species":"virginica"},{"sepalLength":"6.9","sepalWidth":"3.1","petalLength":"5.4","petalWidth":"2.1","species":"virginica"},{"sepalLength":"6.7","sepalWidth":"3.1","petalLength":"5.6","petalWidth":"2.4","species":"virginica"},{"sepalLength":"6.9","sepalWidth":"3.1","petalLength":"5.1","petalWidth":"2.3","species":"virginica"},{"sepalLength":"5.8","sepalWidth":"2.7","petalLength":"5.1","petalWidth":"1.9","species":"virginica"},{"sepalLength":"6.8","sepalWidth":"3.2","petalLength":"5.9","petalWidth":"2.3","species":"virginica"},{"sepalLength":"6.7","sepalWidth":"3.3","petalLength":"5.7","petalWidth":"2.5","species":"virginica"},{"sepalLength":"6.7","sepalWidth":"3.0","petalLength":"5.2","petalWidth":"2.3","species":"virginica"},{"sepalLength":"6.3","sepalWidth":"2.5","petalLength":"5.0","petalWidth":"1.9","species":"virginica"},{"sepalLength":"6.5","sepalWidth":"3.0","petalLength":"5.2","petalWidth":"2.0","species":"virginica"},{"sepalLength":"6.2","sepalWidth":"3.4","petalLength":"5.4","petalWidth":"2.3","species":"virginica"},{"sepalLength":"5.9","sepalWidth":"3.0","petalLength":"5.1","petalWidth":"1.8","species":"virginica"}];

    data.forEach(function(d) {
      d.sepalLength = +d.sepalLength;
      d.sepalWidth = +d.sepalWidth;
    });

    x.domain(d3.extent(data, function(d) {
      return d.sepalWidth;
    })).nice();
    y.domain(d3.extent(data, function(d) {
      return d.sepalLength;
    })).nice();

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Sepal Width (cm)");

    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Sepal Length (cm)")

    svg.selectAll(".dot")
      .data(data)
      .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", function(d) {
        return x(d.sepalWidth);
      })
      .attr("cy", function(d) {
        return y(d.sepalLength);
      })
      .style("fill", function(d) {
        return color(d.species);
      });

    var legend = svg.selectAll(".legend")
      .data(color.domain())
      .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) {
        return "translate(0," + i * 20 + ")";
      });

    legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

    legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) {
        return d;
      });

    var brush = d3.svg.brush()
      .x(x)
      .y(y)
      .on("brush", brushmove)
      .on("brushend", brushend);

    svg.call(brush);

    // Highlight the selected circles.
    function brushmove(p) {
      var e = brush.extent();
      svg.selectAll("circle").classed("hidden", function(d) {
        if (e[0][0] > d.sepalWidth || d.sepalWidth > e[1][0] || e[0][1] > d.sepalLength || d.sepalLength > e[1][1]) {
          d.selected = false;
        } else {
          d.selected = true;
        }
        return d.selected;
      });

      tRows.classed("selected", function(d) {
        return d.selected;
      });
    }

    // If the brush is empty, select all circles.
    function brushend() {
      if (brush.empty()) svg.selectAll(".hidden").classed("hidden", false);
    }

    // draw table
    var t = d3.select('body').append('table');

    t.append('tr')
      .selectAll('th')
      .data(d3.keys(data[0]))
      .enter()
      .append('th')
      .text(function(d) {
        return d;
      });

    var tRows = t.selectAll('tr')
      .data(data)
      .enter()
      .append('tr');

    tRows
      .selectAll('td')
      .data(function(d) {
        return d3.values(d);
      })
      .enter()
      .append('td')
      .html(function(d) {
        return d;
      });
  </script>


Related Query

More Query from same tag