Old school D3 from simpler times

All examples By author By category About

andyreagan

Full window Github gist

d3 bipartite

Built with blockbuilder.org

forked from anonymous's block: fresh block

forked from anonymous's block: fresh block

forked from anonymous's block: fresh block

forked from anonymous's block: fresh block

forked from anonymous's block: fresh block

forked from anonymous's block: fresh block

forked from anonymous's block: d3 bipartite

<!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>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

var leads = 15;
    var agents = 5;
 		var connections = []
    for (var i=0; i<leads; i++) {
      connections.push({x: i, 
                        y: Math.round(Math.random()*(agents-1)),
                        target: Math.random() })
    }
    
    var lead_circles = svg.selectAll("circle.leads").data(connections)
    .enter()
    .append("circle")
    .attr("cx",50)
    .attr("cy",function(d,i) { return i*25+50; })
    .attr("r",10);

var agent_circles = svg.selectAll("circle.agents").data(Array(5))
    .enter()
    .append("circle")
    .attr("cx",400)
    .attr("cy",function(d,i) { return i*50+150; })
    .attr("r",10);
    
    var line = d3.line()
    .x(function(d,i) { return [50,400][i]; })
    .y(function(d,i) { return [d.x*25+50,d.y*50+150][i]; })
    
    var lines = svg.selectAll("path").data(connections)
    .enter()
    .append("path")
    .transition()
    .delay(function(d,i) { return i*500+15000; })
    .attr("d",function(d,i) { console.log(d,i); 
                             console.log(line(d,i));
                             return line([d,d]); })
    .style("fill","none")
    .style("stroke","black")
    .style("stroke-width","2px")
    // .filter(function() { return Math.random() > .8; })
    .transition()
    .delay(function(d,i) { return 45000; })
    // .style("stroke","green")
    .style("stroke",function(d) { if (d.target > .7) { return "green"; }
                                else { return "black"; }; })
    .style("stroke-width",function(d) { if (d.target > .7) { return "4px"; }
                                else { return "2px"; }; })
       .style("opacity",function(d) { if (d.target > .7) { return 1.0; }
                                else { return 0.25; }; });
    
    
  </script>
</body>

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