D3 Examples - small multiples rotate

xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
  <meta charset="utf-8">
   <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.5/d3-legend.js"></script>
  <style type="text/css">
​
  </style>
</head>
​
<body>
  <div id="vis"></div>
  <script type="text/javascript">
    var color = d3.scaleOrdinal()
    .range(["#F4D221","#2C4B9B",          "#0C9DC2","#4BB3A4","#E57B5F","#39338F","#F6653F",])
    //Width and height
    var w = 100;
    var h = 30;
    var margin = {
      top: 5,
      right: 10,
      bottom: 15,
      left: 15
    };
    
​
    
    d3.csv('banknote_smry.csv', function(error, dataset) {
        if (error) throw error;
​
        // format the data
        dataset.forEach(function(d) {
          d.n = +d.n;
          d.idx = +d.idx;
          
        });
​
    var data = d3.nest()
      .key(function(d) {
        return d.country;
      })
      .entries(dataset);
​
    var xScale = d3.scaleBand()
      .domain(d3.range(data.length))
      .rangeRound([0, w])
      .paddingInner(0.05);
​
    var yScale = d3.scaleLinear()
      .domain([0, d3.max(data, d => d3.max(d.values, e => e.n))])
      .range([30, 60]);
​
    //Create SVG element
    var svg = d3.select("#vis").selectAll("svg")
      .data(data)
      .enter()
      .append("svg:svg")
      .attr("width", w + margin.left + margin.right)
      .attr("height", h + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
    svg.selectAll(".bar")
      .data(function(d) {
        return d.values;
      })
      .enter()
      .append("rect")
      .attr("class", "bar")
    .attr("x", 0)
         .attr("y", 0)
         .attr("width", d=>yScale(d.n))
         .attr("height",15)
        .attr("transform", d=>" rotate("+(16*d.idx-6)+")")
        .attr("fill", d=>color(d.type))
            .attr("opacity",0.8)
        .attr("stroke", "white")
        .attr("stroke-width", "1.5")
      ;
    
    svg.append("g")
      // Hide y axis
      // .attr("class", "y axis")
      // .call(yAxis)
    .append("text")
    .attr("x", 0)
    .attr("y", h/3)
    .attr("dy", "2.2em")
    .attr("text-anchor", "start")
    .attr("font-size", "0.8em")
    .text(function(d) { return d.key})
    .style('font-family', 'futura');
      
       svg.append("g")
    .attr("class", "legendOrdinal")
    .attr("transform", "translate(350,30)");
      
       var legendOrdinal = d3.legendColor()
    .shape("path", d3.symbol().type(d3.symbolCircle).size(100)())
    .shapePadding(10)
   ;
      
    })
  </script>
</body>
    