d3-js: scale time over sec, min, hour, day, month and year - d3.js

Question

how can i create a time scale over seconds, minutes, hours, days, months and years. in my code i get a second line when the seconds overlap.
// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// parse the date / time
var parseTime = d3.timeParse("%Y-%m-%dT%H:%M:%S");
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// define the 0 line
var valueline0 = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.value0); });
// append the svg object to the id="chart" of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom + 75 )
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Get the data
d3.csv("/trace/O00.csv", function(error, data) {
if (error) throw error;
// format the data
data.forEach(function(d) {
d.date = parseTime(d.date);
d.value0 = +d.value0;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) {
return Math.max(d.value0); })]);
// Add the valueline0 path.
svg.append("path")
.data([data])
.attr("class", "line")
.style("stroke", "steelblue")
.attr("d", valueline0);
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickFormat(d3.timeFormat("%Y-%m-%d %H:%M:%S")))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(y));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
O00.csv:
date,value0
2020-07-14T14:03:51,35.66
2020-07-14T14:04:01,23.56
2020-07-14T14:03:11,32.64
2020-07-14T14:03:21,22.55
2020-07-14T14:03:31,28.60
2020-07-14T14:03:41,38.70
2020-07-14T14:03:51,35.66
2020-07-14T14:04:01,23.56
2020-07-14T14:04:11,21.54
chart with 2lines
the second line starts with the 7th data record (2020-07-14T14:03:51,35.66) because the seconds (51) from the 1st data record (2020-07-14T14:03:51,35.66) are repeated.
Thanks in advance, Onka

Answer 1

There is "only one line". You have Dates with multiple values. If you don't want one of the values, then you have to remove that value from your dataset, by filtering the data in some way.
If you want to remove the extra datapoint you'll have to figure out which one is the correct value. For instance if we say, "Let's use the max value", convert this code:
// format the data
data.forEach(function(d) {
d.date = parseTime(d.date);
d.value0 = +d.value0;
});
To this
// format the data
data.forEach(function(d) {
d.date = parseTime(d.date);
d.value0 = +d.value0;
});
const dataMap = {};
let dupCount = 0;;
data.forEach((d, index) => {
if (!dataMap[d.date]) {
dataMap[d.date] = true;
} else {
// remove the duplicate from the CSV
data.splice(index - dupCount, 1);
dupCount++;
}
});
Alternative, and much simpler, would be to first filter the data from the CSV using the csv parser: https://www.npmjs.com/package/csv-parser and then passing that to the .data(filteredCsvData) function rather than using the builtin d3.csv() which doesn't contain what you need.

Answer 2

the problem was due to the non-consecutive records in the csv file. if the sequence is correct, everything works as desired! done! thanks for all...