D3 Examples - rotate

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: A simple bar chart</title>
        <script type="text/javascript" src="../d3.js"></script>
        <style type="text/css">
            /* No style rules here yet */       
        </style>
    </head>
    <body>
        <script type="text/javascript">
            var color = d3.scaleOrdinal()
        .range(["#F4D221","#F6653F","#E57B5F",
             "#4BB3A4","#0C9DC2","#2C4B9B","#39338F"]);
            //Width and height
            var w = 500;
            var h = 300;
            var barPadding = 1;
            
            var dataset = [ 5, 10, 13, 19,20,1,3,4,1,2,5,6,7,4,6,2,1,9,0];
            
            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
​
            svg.selectAll("rect")
               .data(dataset)
               .enter()
               .append("rect")
               .attr("x", 0)
               .attr("y", 0)
               .attr("width", 50)
               .attr("height",25)
        .attr("transform", (d,i)=>"translate(" + (50+ (i%5)*100)+
              "," + 50+
              ") rotate("+(5*i)+")")
               .attr("fill", d=>color(d));
​
        </script>
    </body>
</html>
    