D3 v4 chart scales & axis

by Yair Even Or

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js"></script>

CSS

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

JavaScript

/////////////////////////////////////
// Prepare data

var data = [[1469923200000, 859], [1470528000000, 419], [1471132800000, 654], [1471737600000, 335], [1472342400000, 585], [1472947200000, 629], [1473552000000, 1065], [1474156800000, 1221], [1474761600000, 971], [1475366400000, 442], [1475971200000, 754], [1476576000000, 934], [1477180800000, 855], [1477785600000, 805], [1478390400000, 797]];

var margin = { top:20, right:20, bottom:30, left:50 },
    width  = 500 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;



/////////////////////////////////////
// Prepare Scales (X / Y)

var xDomain = d3.extent( data.map(item => item[0]) );
var xScale = d3.scaleTime()
                .domain(xDomain)
                .range([0, width]);

var yDomain = d3.extent( data.map(item => item[1]) );
var yScale = d3.scaleLinear()
                .domain([yDomain[1], 0])
                .range([0, height]);



/////////////////////////////////////
// Use scales in Axis

var xAxis = d3.axisBottom( xScale )


var yAxis = d3.axisLeft( yScale )
    //.tickValues([0,10,20,30,40,50,60,70,80,90,100])
	  //.ticks(4) //specify number of ticks 
    .tickFormat(d => Math.floor(d/yDomain[1] * 100) + "%");



/////////////////////////////////////
// Render SVG with both Axis

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", `translate(0, ${height})`)
      .call(xAxis);
      
svg.append("g")
      .attr("class", "y axis")
      .attr("transform", `translate(0, 0)`)
      .call(yAxis);