Old school D3 from simpler times

All examples By author By category About

steltenpower

Full window Github gist

datadriven morph sequence

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8"> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>  
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    circle.first {fill:gold;}    
    circle.second {fill:silver;}    
    text.www{stroke:black;}
  </style>
</head> 
<body>

<script>
  var edges_dataset=[{first:30,second:-1},{first:24,second:25},{first:34,second:-1},{first:19,second:21},{first:1,second:21},{first:3,second:23},{first:27,second:-1},{first:25,second:24},{first:12,second:25},{first:24,second:25},{first:14,second:36},{first:17,second:30},{first:19,second:-1},{first:14,second:-1},{first:33,second:3},{first:21,second:12},{first:8,second:12},{first:37,second:26},{first:13,second:-1},{first:25,second:27},{first:28,second:12},{first:23,second:19},{first:25,second:24},{first:16,second:12},{first:25,second:10},{first:34,second:8},{first:32,second:-1},{first:29,second:4},{first:25,second:10},{first:11,second:17},{first:1,second:30},{first:19,second:22},{first:19,second:22},{first:22,second:19},{first:28,second:-1},{first:4,second:5},{first:1,second:21},{first:17,second:-1}];
    var loners=[0,2,6,7,9,13,15,18,20,31,32,35,37];
    var specials=[37];

function _Mid(q){
  var squareWidth=20;
  return (q+0.5)*squareWidth+50;
} 
function Mid(d,i){
  return _Mid(i);
}
var WstartX=120;
var margin=10;
var FirstStartX=WstartX+margin;
var SecondStartX=FirstStartX+margin;
var faceRadius=4; 
  
    var svg = d3.select("body").append("svg");
    
    var tasklist=svg.selectAll("g.tasklistItem").data(edges_dataset).enter()
        .append("g").attr("class","taskListItem"); 
    tasklist.append("text").attr({class:"www",x:WstartX,y:Mid,"text-anchor":"middle","dominant-baseline":"middle"}).text("w");
    tasklist.append("circle").attr({cx:FirstStartX, r:faceRadius,class:"first",cy:Mid});
    tasklist.append("circle").attr({cx:SecondStartX,r:faceRadius,class:"second",cy:Mid});

// tasklist.append("path").attr({"class":"up","d",function(d,i){return "M"+}}) 
// todo: add "taak", "1e verantwoordelijke", "2e verantwoordelijke"   
  
function anim0(){
var FirstShiftedX=WstartX;
var SecondShiftedX=WstartX-margin;
var dt0=2000;   
    svg.selectAll("circle.first")
        .transition().duration(dt0)
    		.attr({cx:FirstShiftedX,cy:function(d,i){return _Mid(i)-margin;}}); 
    svg.selectAll("circle.second")
        .transition().duration(dt0)
    		.attr({cx:SecondShiftedX,cy:function(d,i){return _Mid(i);}})
  			.each("end",anim1)
}
svg.on("click",anim0);

function anim1(){  
var dt1=10000;
    svg.selectAll("text.www")
        .transition().duration(dt1)
        .attr({x:function(d,i){return _Mid(d.first);},y:function(d,i){return _Mid(d.second);}})
    svg.selectAll("circle.first")
        .transition().duration(dt1)
    		.attr({cx:function(d,i){return _Mid(d.first);},cy:function(d,i){return _Mid(d.second)-margin;}}); 
    svg.selectAll("circle.second")
        .transition().duration(dt1)
    		.attr({cx:function(d,i){return _Mid(d.first)-margin;},cy:function(d,i){return _Mid(d.second);}}); 
}         
    // todo: also change where "taak", "1e" en "2e" staan             
    
    console.log("look into D3 object itself", d3);
  
/* 
Nu een kleine demonstratie van hoe je verschillend naar DEZELFDE informatie kan kijken, voor de handigheid en wellicht nieuwe inzichten:
Hier onze aanspreekpunten van SESAM gekopieerd.
In deze TABELvorm vooral handig voor management om te zien dat alles geregeld is, en voor iedereen om te kijken wie je ergens voor nodig hebt.
Wil je echter de taken hierin per persoon zien, zijn foto’s wellicht handiger CLICK,
Echte foto's leiden wellicht af van het verhaal, maar bedenk dat je gezichten sneller herkent dan woorden.
De groene smiley is geen bibliotheek medewerker maar een ander onderdeel.
Typerend, aangezien zowel de bibliotheek als haar medewerkers met vele malen meer anderen te maken hebben; nationale samenwerkingsverbanden, familie, social media, etc.
ipv deze tabel is een MATRIX wellicht overzichtelijker CLICK
Je kunt nu makkelijker per persoon zien waarvoor ze EERSTE en TWEEDE aanspreekpunt zijn
Het gaat hier echter niet alleen om het invullen van taken, maar ook om een verbinding tussen personen. CLICK horizontale en verticale lijnen verschijnen
2 personen die anders maar gelijkwaardig zijn, daarom ... CLICK
De directe verbindingen maken ook deel uit van meer-traps indirecte verbindingen
Via de INDIRECTE verbindingen die je met iemand hebt, communiceer je OOK, en handig intelligent gefilterd door je collega’s. Wat misschien weer beter naar voren komt op deze manier CLICK
*/
  </script>
</body>7

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js