I am a newbie coding js and d3, and I have the code below, I want to display the dates in array on the x axis instead of numbers. I tried many ways to display the dates; most of ways display the dates with no line and data with errors in the HTML console, that it could not read the data type of the dates it only allows numbers.
JavaScript
x
127
127
1
<!DOCTYPE html>2
<meta charset="utf-8">3
4
5
6
<body>7
</body>8
9
<!-- Load in the d3 library -->10
<script src="https://d3js.org/d3.v5.min.js"></script>11
<script>12
13
// 2. Use the margin convention practice 14
var margin = {top: 200, right: 300, bottom: 400, left: 300}15
, width = window.innerWidth - margin.left - margin.right // Use the window's width 16
, height = window.innerHeight - margin.top - margin.bottom; // Use the window's height17
18
19
var parseDate = d3.timeParse("%Y-%m-%d");20
21
// 8. An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a random number22
var xdata = [23
["2021-08-01",(d3.randomUniform(100)()).toFixed(1)],24
["2021-08-02",(d3.randomUniform(100)()).toFixed(1)],25
["2021-08-03",(d3.randomUniform(100)()).toFixed(1)],26
["2021-08-04",(d3.randomUniform(100)()).toFixed(1)],27
["2021-08-05",(d3.randomUniform(100)()).toFixed(1)],28
["2021-08-06",(d3.randomUniform(100)()).toFixed(1)],29
["2021-08-07",(d3.randomUniform(100)()).toFixed(1)],30
["2021-08-08",(d3.randomUniform(100)()).toFixed(1)],31
["2021-08-09",(d3.randomUniform(100)()).toFixed(1)],32
["2021-08-10",(d3.randomUniform(100)()).toFixed(1)],33
["2021-08-11",(d3.randomUniform(100)()).toFixed(1)]34
];35
36
37
38
var n = xdata.length;39
var max_value = 0;40
var col1 = 0;41
for (let i = 0; i < n; i++) {42
xdata[i][0] = parseDate(xdata[i][0]);43
//console.log(xdata[i][0]);44
col1 = parseFloat(xdata[i][1])45
if (col1 > max_value)46
max_value = col147
48
49
}50
console.log(max_value);51
52
53
// 5. X scale will use the index of our data54
var xScale = d3.scaleLinear()55
.domain([0,n-1 ]) // input56
.range([0, width]); // output57
58
59
// 6. Y scale will use the randomly generate number 60
var yScale = d3.scaleLinear()61
.domain([0, max_value]) // input 62
.range([height, max_value]); // output 63
64
// 7. d3's line generator65
var line = d3.line()66
.x(function(d, i) { return xScale(i); }) // set the x values for the line generator67
.y(function(d) { return yScale(d.y); }) // set the y values for the line generator 68
.curve(d3.curveMonotoneX) // apply smoothing to the line69
70
71
72
//var dataset = d3.range(n).map(function(d) { return {"y": (d3.randomUniform(100)()).toFixed(1) } })73
74
var dataset = xdata.map(function(d) {75
return {76
x: parseDate(d[0]),77
y: d[1]78
};79
80
});81
82
// 1. Add the SVG to the page and employ #283
var svg = d3.select("body").append("svg")84
.attr("width", width + margin.left + margin.right)85
.attr("height", height + margin.top + margin.bottom)86
.append("g")87
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");88
89
// 3. Call the x axis in a group tag90
svg.append("g")91
.attr("class", "x axis")92
.attr("transform", "translate(0," + height + ")")93
.call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom94
95
// 4. Call the y axis in a group tag96
svg.append("g")97
.attr("class", "y axis")98
.call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft99
100
// 9. Append the path, bind the data, and call the line generator 101
svg.append("path")102
.datum(dataset) // 10. Binds data to the line 103
.attr("fill", "none")104
.attr("stroke", "steelblue")105
.attr("stroke-width", 3)106
.attr("d", line); // 11. Calls the line generator 107
108
// 12. Appends a circle for each datapoint 109
svg.selectAll(".dot")110
.data(dataset)111
.enter().append("circle") // Uses the enter().append() method112
.style("fill","steelblue")113
.attr("cx", function(d, i) { return xScale(i) })114
.attr("cy", function(d) { return yScale(d.y) })115
.attr("r", 5);116
117
// 13. Appends data text to each datapoint 118
svg.selectAll(".text")119
.data(dataset)120
.enter().append("text")121
.style("fill", "red") 122
.attr("x", function(d, i) { return xScale(i) - 5 })123
.attr("y", function(d) { return yScale(d.y) - 20 })124
.text(function(d) { return d.y });125
126
127
</script>Thanks for your answers in advance
Advertisement
Answer
I would suggest parsing the strings into Date objects right away and then using d3.scaleTime for the x scale. Here is an example below.
JavaScript
1
108
108
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="UTF-8">5
<script src="https://d3js.org/d3.v7.js"></script>6
</head>7
8
<body>9
<div id="chart"></div>10
11
<script>12
// set up13
14
const margin = { top: 40, bottom: 40, left: 40, right: 40 };15
16
const width = 500 - margin.left - margin.right;17
const height = 250 - margin.top - margin.bottom;18
19
const svg = d3.select('#chart')20
.append('svg')21
.attr('width', width + margin.left + margin.right)22
.attr('height', height + margin.top + margin.bottom);23
24
const g = svg.append('g')25
.attr('transform', `translate(${margin.left},${margin.top})`);26
27
// data28
29
const parseDate = d3.timeParse("%Y-%m-%d");30
31
const dataset = [32
["2021-08-01",(d3.randomUniform(100)()).toFixed(1)],33
["2021-08-02",(d3.randomUniform(100)()).toFixed(1)],34
["2021-08-03",(d3.randomUniform(100)()).toFixed(1)],35
["2021-08-04",(d3.randomUniform(100)()).toFixed(1)],36
["2021-08-05",(d3.randomUniform(100)()).toFixed(1)],37
["2021-08-06",(d3.randomUniform(100)()).toFixed(1)],38
["2021-08-07",(d3.randomUniform(100)()).toFixed(1)],39
["2021-08-08",(d3.randomUniform(100)()).toFixed(1)],40
["2021-08-09",(d3.randomUniform(100)()).toFixed(1)],41
["2021-08-10",(d3.randomUniform(100)()).toFixed(1)],42
["2021-08-11",(d3.randomUniform(100)()).toFixed(1)]43
].map(d => ({ date: parseDate(d[0]), value: parseFloat(d[1]) }));44
45
const minMaxDate = d3.extent(dataset, d => d.date);46
const maxValue = d3.max(dataset, d => d.value);47
48
// scales49
50
const x = d3.scaleTime()51
.domain(minMaxDate)52
.range([0, width]);53
54
const y = d3.scaleLinear()55
.domain([0, maxValue])56
.range([height, 0]);57
58
// line generator59
60
const line = d3.line()61
.x(d => x(d.date))62
.y(d => y(d.value))63
.curve(d3.curveMonotoneX);64
65
66
// axes67
68
g.append("g")69
.attr("class", "x axis")70
.attr("transform", `translate(0,${height})`)71
.call(d3.axisBottom(x));72
73
g.append("g")74
.attr("class", "y axis")75
.call(d3.axisLeft(y));76
77
78
// line79
80
g.append('path')81
.datum(dataset)82
.attr('fill', 'none')83
.attr('stroke', 'steelblue')84
.attr('stroke-width', 3)85
.attr('d', line);86
87
// circles88
89
g.selectAll('.dot')90
.data(dataset)91
.join('circle')92
.attr('fill', 'steelblue')93
.attr('cx', d => x(d.date))94
.attr('cy', d => y(d.value))95
.attr('r', 5);96
97
// text labels98
99
g.selectAll('.text')100
.data(dataset)101
.join('text')102
.attr('fill', 'red')103
.attr('x', d => x(d.date) - 5)104
.attr('y', d => y(d.value) - 20)105
.text(d => d.value);106
</script>107
</body>108
</html>