Interactive charts

forked from guegzz's block: TD3

forked from anonymous's block: TD3

<!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; }
    .svg-container {
      width:50%;
      height: 400px;
      margin:auto;
    }
    #container {
      display: flex;
      flex-direction:row;
      justify-content: center;
    }
    #chart1 { 
    background-color: #ffbdbd;
    }
    #chart2 { 
    background-color: #c9c9ff;
    }
    .graph {
      width : 100%;
      height: 400px;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="chart1" class="svg-container">
    </div>
    <div id="chart2" class="svg-container">
    </div>
  </div>
  <script>
    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;
      });
      // Feel free to change or delete any of the code you see in this editor!
      function create_scatterplot(el, data, var_x, var_y, size) {
        var margin = {top: 20, right: 20, bottom: 30, left: 40},
            width = el.node().getBoundingClientRect().width - margin.left - margin.right,
            height = el.node().getBoundingClientRect().height - margin.top - margin.bottom;
        var x = d3.scaleLinear()
        .range([0, width]);
        var y = d3.scaleLinear()
        .range([height, 0]);
        var r = d3.scaleSqrt()
        .range([2,10]);
        var xAxis = d3.axisBottom()
        .scale(x);
        var yAxis = d3.axisLeft()
        .scale(y);
        var color = d3.scaleOrdinal(d3.schemeCategory20);
        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 + ")");
        var tooltip = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);
        x.domain(d3.extent(data, function(d){
          return d.sepal_length;
        })).nice();
        y.domain(d3.extent(data, function(d){
          return d.sepal_width;
        })).nice();
        r.domain(d3.extent(data, function(d){
          return d.petal_length;
        })).nice();
  
        svg.append('g')
          .attr('transform', 'translate(0,' + height + ')')
          .attr('class', 'x axis')
          .call(xAxis);
        svg.append('g')
          .attr('transform', 'translate(0,0)')
          .attr('class', 'y axis')
          .call(yAxis);
        svg.append('text')
          .attr('x', 10)
          .attr('y', 10)
          .attr('class', 'label')
          .text('Sepal Width');
        svg.append('text')
          .attr('x', width)
          .attr('y', height - 10)
          .attr('text-anchor', 'end')
          .attr('class', 'label')
          .text('Sepal Length');
        // we use the ordinal scale symbols to generate symbols
        // such as d3.symbolCross, etc..
        // -> symbol.type(d3.symbolCross)()
          svg.selectAll(".symbol")
            .data(data)
            .enter().append("path")
	          .attr("id", function(d,i){return "id_"+ i;})
	          .attr("class", "symbol")
  	        .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);
            	d3.selectAll("#id_"+i)
              .style("opacity",0.11)
          });
  
        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("path")
          .style("fill", function(d) { return color(d); })
          	.attr("d", function(d, i) { return symbol.type(symbols(d))(); })
      	    .attr("transform", function(d, i) { 
          		return "translate(" + (width -10) + "," + 10 + ")"; 
        		});
        legend.append("text")
            .attr("x", width - 24)
            .attr("y", 9)
            .attr("dy", ".35em")
            .style("text-anchor", "end")
            .text(function(d) { return d; });
    }
      create_scatterplot(d3.select("#chart1"),data);
      create_scatterplot(d3.select("#chart2"),data);
    });
  </script>
</body>

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