Bar height taking up entire height of viewBox responsive SVG - d3.js

Question

I'm still fairly new to D3.js. Right now, I'm working on making a responsive bar chart. I'm using the viewbox to make it responsive in a div and using the DOM to set the height and width to the offsetWidth/Height of the div.
But the bars seem to be incorrect in height when set to the yScale.
Here's a screenshot of how they end up appearing:
I'm also being thrown this error in the console:
"d3.min.js:2 Error: attribute height: A negative value is not valid. ("-78.69462281846592")"
I believe the error has to do with this part of the code where I set the height attr to the height subtracted by the yScale data value:
var bars = svg.selectAll('.bar')
.data(data)
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', function(d) {
return xScale(d.Year);
})
.attr('y', function(d) {
return yScale(d.Total);
})
.attr('width', xScale.bandwidth())
.attr('height', function(d) {
return height - yScale(d.Total);
});
Here's the entire function that's drawing the bar chart:
<style>
#barchart {
width: 75vw;
height: 50vh;
}
</style>
function draw(data) {
var width = document.getElementById('barchart').offsetWidth,
height = document.getElementById('barchart').offsetHeight;
var svg = d3.select('#barchart')
.append('svg')
.attr('width', '100%')
.attr('height', '100%')
.attr('viewBox', '0 0 ' + width + ' ' + height)
.append('g');
var xScale = d3.scaleBand()
.range([0, width])
.padding(0.4);
var yScale = d3.scaleLinear()
.range([height, 0]);
xScale.domain(data.map(function(d) {
return d.Year;
}));
yScale.domain(data.map(function(d) {
return d.Total;
}));
var x_xaxis = svg.append('g')
.attr('transform', 'translate(' + 0 + ',' + 370 + ')')
.call(d3.axisBottom(xScale));
var y_axis = svg.append('g')
.attr('transform', 'translate(' + 20 + ',' + 0 + ')')
.call(d3.axisLeft(yScale)
.ticks(100));
var bars = svg.selectAll('.bar')
.data(data)
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', function(d) {
return xScale(d.Year);
})
.attr('y', function(d) {
return yScale(d.Total);
})
.attr('width', xScale.bandwidth())
.attr('height', function(d) {
return height - yScale(d.Total);
});
}

Answer 1

Without seeing your data it's tough to give a full answer but I'm certain the problem is that your yScale domain is being set incorrectly. Its linear so it needs an array of [minValue, maxValue], you are giving it an array of all data values. Try setting it with extent:
yScale.domain(d3.extent(data, function(d) {
return d.Total;
}));
Looking through this you want to start at zero, so:
yScale.domain([0, d3.max(data, function(d) {
return d.Total;
})]);
Also, you need to define the margins a bit more concretely. Take a look at these modifications.