D3 Examples - oefening groups axes

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    circle{fill:steelblue}
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
   
    var dataArray = [120,40,5,100];
    var width = 500;
    var height = 500;
    
    var widthScale = d3.scaleLinear()
                    .domain([0,d3.max(dataArray)])
            .range([0,width]);
​
    var color = d3.scaleLinear()
                    .domain([0,d3.max(dataArray)])
            .range(["red", "blue"]);
    
    var axis = d3.axisTop()
             .ticks(5)
                        .scale(widthScale)
    
    var canvas = d3.select("body")
            .append("svg")
        .attr("width", width)
        .attr("height", height)
            .append("g")
            .attr("transform", "translate(50,60)");
  
    
    var bars = canvas.selectAll("rect")
            .data(dataArray)
            .enter()
                .append("rect")
                .attr("width",function(d) {return widthScale(d) })
                .attr("height",50)
                    .attr("y",function(d, i){return i*100})
                .attr("fill", function(d) {return color(d)});
   
   canvas.append("g")
    .attr("transform", "translate(0,400)")
     .call(axis);
​
    
    
//     var ball = svg.selectAll("circle")
//      .data(dataArray)
//      .enter()
//          .append("circle")
//          .attr("r",20)
//          .attr("cx",function(d){return *10})
//              .attr("cy",function(d, i){return i*100});
    
//     var set=d3.set([1,2,3]);
  
//     var circle = svg.append("circle")
//       .attr("cx", 50)
// //         .attr("r", 20)
//    var circle = svg.append("circle")
//       .attr("cx", 100) 
//     var circle = svg.append("circle")
//       .attr("cx", 150)
      
//     var circle = d3.selectAll("circle")
//     .attr("r",20)
//     .attr("cy", 200)
     
    
  </script>
</body>
    