block by curran 82bb6d11bda885b0eb4f29d46b5cee86

Pseudo Bar Chart II

Full Screen

A pseudo-bar chart giving a flavor of D3. Uses d3-selection and SVG.

Built with blockbuilder.org

forked from curran‘s block: Pseudo Bar Chart I

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SVG Example</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      
      var data = [
        { x: 18,  y: 0,   height: 500 },
        { x: 207, y: 100, height: 400 },
        { x: 395, y: 200, height: 300 },
        { x: 583, y: 300, height: 200 },
        { x: 771, y: 400, height: 100 }
      ];

      d3.select("svg")
        .selectAll("rect").data(data)
        .enter().append("rect")
          .attr("x",      function (d){ return d.x; })
          .attr("x",      function (d){ return d.x; })
          .attr("y",      function (d){ return d.y; })
          .attr("width",  170)
          .attr("height", function (d){ return d.height; });

    </script>
  </body>
</html>