D3 Examples - [basic chart] simple axis (d3 v4)

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; }
  </style>
</head>
​
<body>
  <script>
    var svg = d3.select("body").append("svg")
      .attr("width", 800)
      .attr("height", 200)
​
      // defines scale based on possible values (domain) and expected size (range)
    var scale = d3.scaleLinear()
                .domain([0,100])  // allows values from 0 to 100
                .range([0,700]);  // scaled to 0 to 700 pixels wide
    
    // defines axis for that scale
    // (types: axisBottom, axisTop, axisRight, axisLeft)
    // must be called (svg.call)
    var axis = d3.axisBottom(scale);
​
    // puts the axis inside a group positioned by translate
    svg.append("g")
        .attr("transform", "translate(38,50)")
        .call(axis);   
  </script>
</body>
​
    