d3 multi line alignment with y axis data - d3.js

Question

I have created the d3 Multi-line chart. I managed to generate both x and y axis along with the Lines. But unfortunately i got stuck at this point where I am not able to align the Path-lines with the Y axis i.e. ScaleBand(). I have no idea how do to that and guide line for that would be great. I have attached my code with sample data in snippet. Thanks in advance.
var dataDomains = ['automated', 'manual']
var data = [
{ automated: 1000 , manual: 3000 },
{ automated: 5000 , manual: 6000 },
{ automated: 10000, manual: 9000 },
{ automated: 50000, manual: 12000 },
{ automated: 100000, manual: 15000 },
]
// set the dimensions and margins of the graph
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 960 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
// set the ranges
var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleBand().range([height, 0]);
// define the 1st line
var valueline = d3.line()
.x(function (d) { return x(d.automated); })
.y(function (d) { return y('automated'); });
// define the 2nd line
var valueline2 = d3.line()
.x(function (d) { return x(d.manual); })
.y(function (d) { return y('manual'); });
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("#cl-AVM").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Scale the range of the data
x.domain([0, d3.max(data, function (d) { return Math.max(d.automated, d.manual) })])
y.domain(dataDomains);
// Add the valueline path.
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueline);
// Add the valueline2 path.
svg.append("path")
.data([data])
.attr("class", "line")
.style("stroke", "red")
.attr("d", valueline2);
// Add the X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add the Y Axis
svg.append("g")
.call(d3.axisLeft(y));
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="cl-AVM"></div>

Answer 1

You could use a scalePoint instead of a scaleBand as your line can be considered as just a point on the y axis.
Then you can add some padding so that the values for the two points are not 0 and 100 (I picked 0.6 but you can play around with it and see what best suits you).
You can see usage of scalePoint here in more details: https://observablehq.com/#d3/d3-scalepoint
Hope that helps ! :)
var dataDomains = ['automated', 'manual']
var data = [
{ automated: 1000 , manual: 3000 },
{ automated: 5000 , manual: 6000 },
{ automated: 10000, manual: 9000 },
{ automated: 50000, manual: 12000 },
{ automated: 100000, manual: 15000 },
]
// set the dimensions and margins of the graph
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 960 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
// set the ranges
var x = d3.scaleLinear().range([0, width]);
var y = d3.scalePoint().range([height, 0]).padding(0.6); // modified here
// define the 1st line
var valueline = d3.line()
.x(function (d) { return x(d.automated); })
.y(function (d) { return y('automated'); });
// define the 2nd line
var valueline2 = d3.line()
.x(function (d) { return x(d.manual); })
.y(function (d) { return y('manual'); });
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("#cl-AVM").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Scale the range of the data
x.domain([0, d3.max(data, function (d) { return Math.max(d.automated, d.manual) })])
y.domain(dataDomains);
// Add the valueline path.
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueline);
// Add the valueline2 path.
svg.append("path")
.data([data])
.attr("class", "line")
.style("stroke", "red")
.attr("d", valueline2);
// Add the X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add the Y Axis
svg.append("g")
.call(d3.axisLeft(y));
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="cl-AVM"></div>