Tutorial 2

<!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; }
  </style>
</head>

<body>
  <script>
    var dataArray = [10,20,30,40,50,60];   
    dataArray.shift();
    dataArray.sort(d3.descending);
    
    var width = 500;
    var height = 500;
    
    var widthScale = d3.scaleLinear()
    									.domain([0,60])
    									.range([0, width]);
		var color = d3.scaleLinear()
    							.domain([0,60])
    							.range(["red", "blue"]);
    
    var axis = d3.axisTop()
    								.scale(widthScale);
    
    var canvas = d3.select("body")
                    .append("svg")
                    .attr("width", 600)
                    .attr("height", 600)
    								.append("g") // grouping
    								.attr("transform", "translate(50,50)");
    
    var ciecle1 = canvas.append("circle")
                    .attr("cx", 50)
                    .attr("cy", 50)
                    .attr("r", 25);
    
    var ciecle = canvas.append("circle")
                    .attr("cx", 150)
                    .attr("cy", 150)
                    .attr("r", 25);
    
    var nars = canvas.selectAll("circle")
    								.data(dataArray)
    								.attr("fill", "red")
    								.attr("r", function(d){return d})
                    .exit()
    									.attr("fill", "blue");

canvas.append("g")
    				.attr("transform", "translate(0,300)")
      			.call(axis);

</script>
</body>

https://d3js.org/d3.v4.min.js