Old school D3 from simpler times

All examples By author By category About

RobertDelgado

Full window Github gist

My Custom Shapes

Built with blockbuilder.org

<!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 type="text/javascript">
    // Feel free to change or delete any of the code you see in this editor!

var nodes1 = [
  {NodeType: "square", x:50, y:50,  height:50, width: 50, fill: "red"},
  {NodeType: "square",   x:50, y:125, height:50, width: 50, fill: "green"}, 
  {NodeType: "triangle",   x:50, y:200, height:50, width: 50, fill: "blue"}];
    
	var nodes2 = [
  {NodeType: "square",   x:50, y:125, height:50, width: 50, fill: "green"}, 
  {NodeType: "triangle",   x:50, y:200, height:50, width: 50, fill: "blue"}];
   var shapeDefs = {square: function(height,width)
    							{
     
      							
      							var output =  d3.path();
                    output.moveTo(0, height);
                    output.lineTo(width, height);
                    output.lineTo(width, 0);
                    output.lineTo(0,0);
                    return(output)
    								}
    
                  
                 ,
                 triangle: function(height,width)
    							{
     
      							
                    var output =  d3.path();
                    output.moveTo(0, height);
                    output.lineTo(width, height);
                    output.lineTo(0,0);
                    output.lineTo(0,height)
                    return(output)
      							    								}
    
                  
                 
    };
    
    
    
    
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);

var render = function(data){
    
      var select = svg.selectAll('path')
  							.data(data);
    
   		var enter = select.enter()
   						.append('path')
      				.merge(select)
      					.attr('d', function(d){return shapeDefs[d.NodeType](d.width, d.height);})
      					.attr('stroke','black')
      					.attr('fill', d => {return(d.fill)})
      					.attr('transform',function(d){return(`translate(${d.x},${d.y})`);});
      				
    enter.exit().remove();

}

render(nodes1);
render(nodes2);

</script>
</body>

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