I’m trying to create a multi line chart with dual y axes , I’ve tried running the code in powerbi d3.js visual , but is not yielding any visual. I’m not understanding where I’ve made the mistake

I want to create a multi line chart , where x axes has the time , one y axes is force , another y axes is temperature.Time should be in the format HH:MM:SS on the x axes

This is the base chart I’ve created using html enter image description here

So for each metal , I need to plot the line for force and a line for temperature for each time interval ,the result line chart format should be somewhat like in the image enter image description here

Dummy Data:

Below is the code. When I run the code I’m getting a blank space as in the image

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = pbi.width - margin.left - margin.right,
    height = pbi.height - margin.top - margin.bottom;

var parseTime = d3.time.format("%H:%M:%S").parse;

var x = d3.scaleTime().rangeRound([0, width]);

var yForce = d3.scale.linear()
    .range([height, 0]);

var yTemp = d3.scale.linear()
    .range([height, 0]);


var lineForce = d3.svg.line()
    .x(function(d) { return x(d.Time); })
    .y(function(d) { return yForce(d.Force); });

var lineTemp = d3.svg.line()
    .x(function(d) { return x(d.Time); })
    .y(function(d) { return yTemp(d.Temperature); });



var svg = d3.select("#chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

pbi.dsv(function(data) {
    // Convert Time to Date object and parse Force and Temperature as numbers
    data.forEach(function(d) {
        d.Time = parseTime(d.Time);
        d.Force = +d.Force;
        d.Temperature = +d.Temperature;
    });

    var metals = Array.from(new Set(data.map(function(d) { return d.Metal; })));

    var colorScale = d3.scale.ordinal()
                        .domain(metals)
                        .range(d3.schemeCategory10.slice(0, metals.length * 2));

    x.domain(data.map(function(d) { return d.Time; }));
    yForce.domain([0, d3.max(data, function(d) { return d.Force; })]);
    yTemp.domain([0, d3.max(data, function(d) { return d.Temperature; })]);

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.svg.axis().scale(x).orient("bottom").ticks(d3.timeSecond.every(1)).tickFormat(d3.time.format("%H:%M:%S")))
        .append("text")
        .attr("x", width / 2)
        .attr("y", margin.bottom - 10)
        .attr("fill", "#000")
        .attr("text-anchor", "middle")
        .text("Time");

    svg.append("g")
        .attr("class", "y axis")
        .call(d3.svg.axis().scale(yForce).orient("left"))
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", -margin.left + 10)
        .attr("x", -height / 2)
        .attr("dy", "0.71em")
        .attr("fill", "#000")
        .attr("text-anchor", "middle")
        .text("Force");

    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + width + ",0)")
        .call(d3.svg.axis().scale(yTemp).orient("right"))
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", margin.right - 10)
        .attr("x", -height / 2)
        .attr("dy", "0.71em")
        .attr("fill", "#000")
        .attr("text-anchor", "middle")
        .text("Temperature");

    metals.forEach(function(metal) {
        var metalData = data.filter(function(d) { return d.Metal === metal; });
        
        svg.append("path")
           .datum(metalData.filter(function(d) { return d.Force !== null; }))
           .attr("fill", "none")
           .attr("stroke", colorScale(metal))
           .attr("class", "line-force " + metal)
           .attr("stroke-width", 1.5)
           .attr("d", lineForce);

        svg.append("path")
           .datum(metalData.filter(function(d) { return d.Temperature !== null; }))
           .attr("fill", "none")
           .attr("stroke", colorScale(metal + "-temp"))
           .attr("class", "line-temp " + metal)
           .attr("stroke-width", 1.5)
           .attr("d", lineTemp);
    });
});