connection between charts 2

forked from romsson's block: connection between charts

forked from giguerre's block: connection between charts

forked from giguerre's block: connection between charts 2

<!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) {
     //////////////////////////////////////////////////////////////////
      
      
       // set the dimensions and margins of the graph
      var margin = {top: 10, right: 10, bottom: 10, left: 10},
          width = window.innerWidth - margin.left - margin.right,
          height = window.innerHeight - margin.top - margin.bottom;

// format variables
      var formatNumber = d3.format(",.0f"),    // zero decimal places
          format = function(d) { return  formatNumber(d) + "MWH"; },
          color = d3.scaleOrdinal(d3.schemeCategory20);

// append the svg object to the body of the page
      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 + ")");

// Set the sankey diagram properties
      var sankey = d3.sankey()
          .nodeWidth(10)
          .nodePadding(10)
          .size([width, height]);

var path = sankey.link();

// load the data
      d3.queue()
          .defer(d3.csv, "data.csv")
          .await(ready);

function ready(error, csv){

// create an array to push all sources and targets, before making them unique
        var arr = [];
        csv.forEach(function(d){

arr.push(d.source);
          arr.push(d.target);

});

// create nodes array
        var nodes = arr.filter(onlyUnique).map(function(d,i){
          return {
            node: i,
            name: d
          }
        });

// create links array
        var links = csv.map(function(csv_row){
          return {
            source: getNode("source"),
            target: getNode("target"),
            value: +csv_row.value
          }

function getNode(type){
            return nodes.filter(function(node_object){ return node_object.name == csv_row[type]; })[0].node;
          }

});

sankey
            .nodes(nodes)
            .links(links)
            .layout(32);

// add in the links
        var link = svg.append("g").selectAll(".link")
            .data(links)
          .enter().append("path")
            .attr("class", "link")
            .attr("d", path)
            .style("stroke", function(d){
              return color(d.source.name.replace(/ .*/, ""));
            })
            .style("stroke-width", function(d) { return Math.max(1, d.dy); })
            .sort(function(a, b) { return b.dy - a.dy; });

// add the link titles
        link.append("title")
              .text(function(d) {
              return d.source.name + " → " + 
                      d.target.name + "\n" + format(d.value); });

// add in the nodes
        var node = svg.append("g").selectAll(".node")
            .data(nodes)
          .enter().append("g")
            .attr("class", "node")
            .attr("transform", function(d) { 
              return "translate(" + d.x + "," + d.y + ")"; 
            })
            .call(d3.drag()
              .subject(function(d) {
                return d;
              })
              .on("start", function() {
                this.parentNode.appendChild(this);
              })
              .on("drag", dragmove));

// add the rectangles for the nodes
        node.append("rect")
            .attr("height", function(d) { return d.dy < 0 ? .1 : d.dy; })
            .attr("width", sankey.nodeWidth())
            .style("fill", function(d) { 
              return d.color = color(d.name.replace(/ .*/, "")); 
            })
            .style("stroke", function(d) { 
              return d3.rgb(d.color).darker(2); 
            })
          .append("title")
            .text(function(d) { 
              return d.name + "\n" + format(d.value); 
            });

// add in the title for the nodes
        node.append("text")
            .attr("x", -6)
            .attr("y", function(d) { return d.dy / 2; })
            .attr("dy", ".35em")
            .attr("text-anchor", "end")
            .attr("transform", null)
            .text(function(d) { return d.name; })
          .filter(function(d) { return d.x < width / 2; })
            .attr("x", 6 + sankey.nodeWidth())
            .attr("text-anchor", "start");

// the function for moving the nodes
        function dragmove(d) {
          d3.select(this)
            .attr("transform", 
                  "translate(" 
                     + d.x + "," 
                     + (d.y = Math.max(
                        0, Math.min(height - d.dy, d3.event.y))
                       ) + ")");
          sankey.relayout();
          link.attr("d", path);
        }

}

// unique values of an array
      function onlyUnique(value, index, self) { 
          return self.indexOf(value) === index;
      }

});
    
      
  </script>
</body>

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