D3.js: Error: <text> attribute x: Expected length, "NaN"

Question

I'm trying to do draw a histogram from a csv file, however I'm getting these 2 errors:

Error: <rect> attribute x: Expected length, "NaN" / Error: <text> attribute x: Expected length, "NaN".

Any help would be appreciated. I'm am very new to d3.js

My code is here:

async function drawChart() {
    
    const dataset = await d3.csv("./../Data/Driving_data.csv")
    console.log(dataset[0])

    const width = 600
    let dimensions = {
    width: width,
    height: width * 0.6,
    margin: {
    top: 30,
    right: 10,
    bottom: 50,
    left: 50
    }
    }
    
    dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right
    dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom

    const wrapper = d3.select("#wrapper")
    .append("svg")
    .attr("width", dimensions.width)
    .attr("height", dimensions.height)
    
    const boundingBox = wrapper.append("g")
    .attr("id", "boundingBox")
    .style("transform", `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`)

    boundingBox.append("g")
    .attr("class", "barsGroup")
    // line for mean value
    boundingBox.append("line")
    .attr("class", "line")
    boundingBox.append("g")
    // group for x-axis content
    .attr("class", "x-axis")
    .style("transform", `translateY(${dimensions.boundedHeight}px)`)
    // text element for x-axis label inside x-axis group
    .append("text")
    .attr("class", "x-axis-label")
    
    const drawHistogram = metric => {
    const metricAccessor = d => d[metric]
    const yAccessor = d => d.length
    
    const xScale = d3.scaleLinear()
    .domain(d3.extent(dataset, metricAccessor))
    .range([0, dimensions.boundedWidth])
    .nice()
    
    const groupGenerator = d3.histogram()
    .domain(xScale.domain())
    .value(metricAccessor)
    .thresholds(11)
    
    const groups = groupGenerator(dataset)
    const yScale = d3.scaleLinear()
    .domain([0, d3.max(groups, yAccessor)])
    .range([dimensions.boundedHeight, 0])
    .nice()
   
    const barPadding = 4
    
    let barGroups = boundingBox.select(".barsGroup")

    .selectAll(".barGroup")

    .data(groups)
    
    barGroups.exit().remove()
    
    const newBarGroups = barGroups.enter().append("g")
    .attr("class", "barGroup")
    
    newBarGroups.append("rect")
    newBarGroups.append("text")
    
    barGroups = newBarGroups.merge(barGroups)
    
    const rects = barGroups.select("rect")
    .attr("x", d => xScale(d.x0) + barPadding / 2)
    .attr("y", d => yScale(yAccessor(d)))
    .attr("width", d => d3.max([0, xScale(d.x1) - xScale(d.x0) - barPadding]))
    .attr("height", d => dimensions.boundedHeight - yScale(yAccessor(d)))
    .attr("fill", "lightblue")
    
    const barText = barGroups.select("text")
    .attr("x", d => xScale(d.x0) + (xScale(d.x1) - xScale(d.x0)) / 2)
    .attr("y", d => yScale(yAccessor(d)) - 5)
    .text(yAccessor)
    .attr("fill", "blue")
    .style("font-size", "12px")
    .style("font-family", "arial")
    .style("text-anchor", "middle")
    
    const mean = d3.mean(dataset, metricAccessor)
    
    const line = boundingBox.select(".line")
    .attr("x1", xScale(mean))
    .attr("x2", xScale(mean))
    .attr("y1", -10)
    .attr("y2", dimensions.boundedHeight)
    .attr("stroke", "black")
    .attr("stroke-width", 2)
    .style("stroke-dasharray", "2px 2px")

    const meanLineText = boundingBox.select("text")
    .attr("x", xScale(mean))
    .attr("y", -15)
    //.text("mean " + mean.toFixed(2))
    .style("font-size", "12px")
    .style("font-family", "arial")
    .style("text-anchor", "middle")
    
    const xAxisGenerator = d3.axisBottom()
    .scale(xScale)
    
    const xAxis = boundingBox.select(".x-axis")
    .call(xAxisGenerator)

    const xAxisLabel = xAxis.select(".x-axis-label")
    .attr("x", dimensions.boundedWidth / 2)
    .attr("y", dimensions.margin.bottom - 10)
    .attr("fill", "black")
    .text(metric)
    .style("font-size", "14px")
    .style("text-transform", "capitalize")
    }
    
    const metrics = [
    "humidity",
    "dewPoint",
    "temperatureHigh",
    "temperatureLow",
    "pressure",
    "windSpeed",
    "windGust",
    "cloudCover",
    "uvIndex"
    ]
    
    const button = d3.select("#button")
    button.node().addEventListener("click", clickHandler, false)
    
    function clickHandler() {
    console.log("klik")
    metricIndex++
    if (metricIndex < metrics.length)
    drawHistogram(metrics[metricIndex])
    else {
    metricIndex = 0
    drawHistogram(metrics[metricIndex])
    }
    }
    
    let metricIndex = 0
    drawHistogram(metrics[metricIndex])
    
    }
    drawChart()

Sample from the csv

Pvm,Matka (km),Aika (m),Ø Nopeus (km/h),Ø Kulutus (l/100km),Ø Kulutus (kWh/100km)
2021-01-15 15:30:38,38,76,30,8.8,1.7
2021-01-16 12:25:58,33,52,39,7.9,5.4
2021-01-17 16:58:35,58,94,35,5.1,9.9
2021-01-19 16:44:26,23,34,39,0.0,27.5

I'm new with d3 and js, I don't really know what to do here.

Answer 1

Alright, after some thinking and changing the naming in the csv I got it to work. I simply changed.

Pvm,Matka (km),Aika (m),Ø Nopeus (km/h),Ø Kulutus (l/100km),Ø Kulutus (kWh/100km)

into

Pvm,Matka,Aika,Nopeus,Kulutus,Kulutus