How to create a time scale in d3.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// Set the dimensions of the SVG container
var width = 500;
var height = 300;

// Create an SVG container
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

// Define the range of the time scale
var xScale = d3.time.scale()
               .range([0, width]);

// Generate some example time data
var data = [
    {date: new Date(2022, 0, 1)},
    {date: new Date(2022, 0, 15)},
    {date: new Date(2022, 0, 30)},
    {date: new Date(2022, 1, 10)}
];

// Set the domain of the time scale
xScale.domain(d3.extent(data, function(d) { return d.date; }));

// Create the x-axis using the time scale
var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom");

// Append the x-axis to the SVG container
svg.append("g")
   .attr("transform", "translate(0," + height/2 + ")")
   .call(xAxis);