Pseudo Bar Chart III by curran

A pseudo-bar chart for demonstrating basic D3 usage, including:

forked from curran‘s block: Pseudo Bar Chart II

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>
    <script>
      
      var width = 960,
          height = 500,
          data = [
            { name: "A", value: 5 },
            { name: "B", value: 4 },
            { name: "C", value: 3 },
            { name: "D", value: 2 },
            { name: "E", value: 1 }
          ];
      
      var xScale = d3.scaleBand()
            .domain(data.map(function (d){ return d.name; }))
            .range([0, width])
            .padding(0.1),
          yScale = d3.scaleLinear()
            .domain([0, d3.max(data, function (d){ return d.value; })])
            .range([height, 0]);
      
      var svg = d3.select("body").append("svg")
          .attr("width", width)
          .attr("height", height);
      
      svg.selectAll("rect").data(data)
        .enter().append("rect")
          .attr("x", function (d){ return xScale(d.name); })
          .attr("y", function (d){ return yScale(d.value); })
          .attr("width", xScale.bandwidth())
          .attr("height", function (d){ return height - yScale(d.value); });

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