connection between charts

forked from romsson's block: connection between charts

forked from giguerre's block: connection between charts

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 260 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

function create_scatterplot(el, data, var_x, var_y, size) {

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

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

var color = d3.scaleOrdinal(d3.schemeCategory20);
  
      //  color.domain(["viriginica", ...])
      var symbols = d3.scaleOrdinal(d3.symbols);

// creates a generator for symbols
      var symbol = d3.symbol().size(100);

var svg = el.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 + ")");

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

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

// we use the ordinal scale symbols to generate symbols
      // such as d3.symbolCross, etc..
      // -> symbol.type(d3.symbolCross)()
        svg.selectAll("path")
        .data(data)
      .enter().append("path")
        .attr("class", "symbol")
        .attr("id", function(d, i) {
          return "id_" + i;
        })
        .attr("d", function(d, i) { return symbol.type(symbols(d.species))(); })
        .style("fill", function(d) { return color(d.species); })
        .attr("transform", function(d) { 
          return "translate(" + x(d.sepal_length) + "," + y(d.sepal_width) +")"; 
        })
        .on("mouseenter", function(d, i){
           d3.selectAll(".symbol").style("opacity", 1)
           console.log(i)
           d3.selectAll("#id_" + i)
             .style("stroke-width", 1)
             .style("stroke", "black")
         // d3.selectAll(".symbol")
         // 	.filter(function(e) {
         //   	return d !== e;
         // 	})
         // 	.style("opacity", .1)
        })

}

d3.csv('iris.csv', function(error, data) {
      data.forEach(function(d){
        d.sepal_length = +d.sepal_length;
        d.sepal_width  = +d.sepal_width;
        d.petal_length = +d.petal_length;
        d.petal_width  = +d.petal_width;
      });
    
      create_scatterplot(d3.select("#chart1"), data); //, data, var_x, var_y, size) {
      create_scatterplot(d3.select("#chart2"), data);

});
    
      
  </script>
</body>

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