Time scale and ticks format

D3 time scale and ticks

Data sample

2 days, minute by minute from "2016-01-01T00:00:00" to "2016-01-02T23:59:00"

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/d3@3.5.17/d3.js"></script>
  <link rel="stylesheet" href="style.css">
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
<body>
  <h1>D3 scales - time</h1>

<div class="ws-additional-info">
    <h3>Reference Links</h3>
    <ul id="reference-links">
      <li><a href="https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md">(d3-v3) Time formatting</a></li>
      <li><a href="https://www.d3noob.org/2016/08/changing-number-of-ticks-on-axis-in.html">(d3-v4) Changing the number of ticks - d3noob</a></li>
    </ul>
  </div>
  
  <script>
			var margin = 40,
					width = 960 - margin * 2,
					height = 400 - margin * 2;
// 				width = document.getElementsByClassName("ws-testbox")[0].offsetWidth - margin * 2,
// 				height = 500 - margin * 2;

var xScale = d3.time.scale()
				.range([0, width]);
//				.nice(d3.time.minute);

var yScale = d3.scale.linear()
				.range([height, 0])
				.nice();

var xAxis = d3.svg.axis()
				.scale(xScale)
				.orient("bottom");

var yAxis = d3.svg.axis()
				.scale(yScale)
				.orient("left");

var line = d3.svg.line()
				.x(function(d) { return xScale(d.date); })
				.y(function(d) { return yScale(d.sin); });

var graph = d3.select("#graph")
				.attr("width", width + margin * 2)
				.attr("height", height + margin * 2)
				.append("g")
				.attr("transform", "translate(" + margin + "," + margin + ")");

var plotData;

// Trigger one of the scenarios
			scenarioA();

/**
			 * Helper function to assign and parse dates
			 */
			function prepareData (data) {
				// Parse original data
				data.forEach(function(d) {
					//					    2016-01-01T00:02:00.000Z
					d.date = d3.time.format("%Y-%m-%dT%H:%M:%S.000Z").parse(d.timestamp);
					d.sin = +d.sin;
				});
        
        // Trim data - to demonstrate zoom (change of x scale)
        // Comment out as needed
        data = data.splice(0, 65);
        
				return data;
			}

/**
			 * Main render function
			 * @param data
			 */
			function render (data) {

// Update scale's domain for the new min, max
				xScale.domain(d3.extent(data, function(d) { return d.date; }));
				yScale.domain(d3.extent(data, function(d) { return d.sin; }));

graph.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + height + ")")
					.call(xAxis);

graph.append("g")
					.attr("class", "y axis")
					.call(yAxis)
					.append("text")
					.attr("transform", "rotate(-90)")
					.attr("y", 6)
					.attr("dy", ".71em")
					.style("text-anchor", "end")
					.text("Sin");

graph.append("path")
					.datum(data)
					.attr("class", "line")
					.attr("d", line);

// Log number of ticks it would normally display
				console.log("Number of ticks about to be displayed: ", xAxis.ticks()[0]);
			}

function scenarioA () {
				d3.json("time-mins-sin.json", function(error, data) {

if (error) {
						console.error("Data was not retrieved", error);
						return;
					}

// Save to the global
					plotData = data = prepareData(data);

// NOTE: Fiddle with xAxis before render (which calls it)
					xAxis
						// no need to specify unless the tickFormat is set to minute - default is 10
						.ticks(12)
   					.tickFormat(d3.time.format("%M"));

// no luck with this format: https://devdocs.io/d3~3/svg-axes.md#ticks
						// .ticks(d3.time.minutes, 5);

// Draw
					render(data);
				});
			};

function scenarioB () {
				d3.json("time-mins-sin.json", function(error, data) {

if (error) {
						console.error("Data was not retrieved", error);
						return;
					}

// Save to the global
					plotData = data = prepareData(data);

// Get first hour (simulate granularity - zoom on the scale)
//					data = data.splice(0, 60);
					data = data.splice(0, 60);

// NOTE: Fiddle with xAxis before render (which calls it)
					// -- v1
//					xAxis
//						.tickFormat(d3.time.format("%M"));
					// -- v2
//					xAxis
//						.ticks(5)
//						.tickFormat(d3.time.format("%M"));
					// -- v3
//					xAxis
//						.ticks(5);

// Draw
					render(data);
				});
			};
  </script>
</body>

https://unpkg.com/d3@3.5.17/d3.js