d3:time-scale-experiment

by Richard Hunter

HTML

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

CSS

svg {
  background: lightgoldenrodyellow;
}

.line {
  fill: none;
  stroke-width: 2;
  stroke: teal;
}

JavaScript

const width = 1500;
const height = 300;

const margin = {
  top: 10,
  right: 20,
  bottom: 40,
  left: 30,
};

const format = '%a %d %B %Y';

const date1 = d3.utcDay.floor(new Date(2020, 2, 1));
const date2 = d3.utcDay.floor(new Date(2020, 2, 6));

const xScale = d3
	.scaleTime()
  .domain([
  	date1, date2
	])
  .range([margin.left, width - margin.right])

const ticks1 = d3
	.utcTuesday
  .range(date1, date2)

const xAxis1 = d3
	.axisBottom(xScale)
	.tickValues(ticks1)
  .tickFormat(d3.timeFormat(format))

const xAxis2 = d3
	.axisBottom(xScale)
  .ticks(5)
  .tickFormat(d3.timeFormat(format))

const svg = d3
	.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

svg
	.append('g')
  .attr('transform', `translate(0, ${height - (margin.bottom + 20)})`)
  .call(xAxis1);

svg
	.append('g')
  .attr('transform', `translate(0, ${height - (margin.bottom)})`)
  .call(xAxis2);