D3 Examples - D3 tutorial

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style type="text/css">
        .axis path,
        .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }
        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }
        </style>
</head>
​
<body>
  <script>
      var w =500;
      var h= 300;
      var padding = 30;
//AXES CHAPTER 8
//https://chimera.labs.oreilly.com/books/1230000000345/ch08.html#_setting_up_an_axis
//Dynamic, random dataset
var dataset = [];
var numDataPoints = 50;
var xRange = Math.random() * 1000;
var yRange = Math.random() * 1000;
for (var i = 0; i < numDataPoints; i++) {
    var newNumber1 = Math.floor(Math.random() * xRange);
    var newNumber2 = Math.floor(Math.random() * yRange);
    dataset.push([newNumber1, newNumber2]);
}
            
    var xScale = d3.scale.linear()
                     .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                     .range([padding, w-padding]);
                     
    var yScale = d3.scale.linear()
                    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                    .range([h- padding, padding]);
                    
    var rScale = d3.scale.linear()
                     .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                     .range([2, 5]);
                    //Create SVG element
    var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);
​
    svg.selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr("cx", function(d) {return xScale(d[0]);})
        .attr("cy", function(d) {return yScale(d[1]);})
        .attr("r", function(d) {return rScale(d[1]);});
​
 /*   svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d) { return d[0] + "," + d[1];  })
        .attr("x", function(d) {return xScale(d[0]); })
        .attr("y", function(d) {return yScale(d[1]); })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "red");
   */
   var formatAsPercentage = d3.format(".1%"); 
    var xAxis = d3.svg.axis()
                  .scale(xScale)
                  .orient("bottom")
                  .ticks(5)
                  .tickFormat(formatAsPercentage);
    var yAxis = d3.svg.axis()
                  .scale(yScale)
                  .orient("left")
                  .ticks(5);
    
    svg.append("g")
        .attr("class","axis")
        .attr("transform","translate(0," + (h-padding) + ")")
        .call(xAxis);
            
    //Create Y axis
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);
  </script>
​
​
</body>
​
    