Old school D3 from simpler times

All examples By author By category About

cheneymb

Full window Github gist

bahamas flag

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% }
  </style>
</head>

<body>
  <script>

var svg = d3.select("body").append("svg")
    svg.append("rect")
      .attr({x: 100, y: 10, width: 700, height: 120})
      .style({ fill: "#7FFFD4"})
    svg.append("rect")
      .attr({x: 100, y: 130, width: 700, height: 120})
      .style({ fill: "#ffff00"})
    svg.append("rect")
      .attr({x: 100, y: 250, width: 700, height: 120})
      .style({ fill: "#7FFFD4"})
    svg.append('path')
    	.attr('d', function(d) { 
        var x = 79, y = 188;
        return 'M ' + x +' '+ y + ' l 200 200 l -360 10 z';
      })
    	.attr("transform", "translate(493, 105) rotate(92)");

console.log("you are now rocking with d3", d3);
  </script>
</body>

var lineData = [{"x":100, "y":10},
								{"x":110, "y":23},
								{"x":200, "y":250};

var lineFunction

]

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