An error occurred while trying to execute the following code...
The code snippet provided is for creating a vertical bar chart using D3. However, when executed, it results in an error and the chart is not displayed as expected.
// Data for generating the vertical bar chart
var chartData = [40, 60, 80, 100, 70, 120, 100, 60, 70, 150, 120, 140];
// Dimensions of the svg element
var height = 200,
width = 720,
// Width of each bar and offset between bars
barWidth = 40,
barOffset = 20;
d3.select('#bar-chart').append('svg')
.attr('width', width)
.attr('height', height)
.style('background', '#dff0d8')
.selectAll('rect').data(chartData)
.enter().append('rect')
.style({'fill': '#3c763d', 'stroke': '#d6e9c6', 'stroke-width': '5'})
.attr('width', barWidth)
.attr('height', function (data) {
return data;
})
.attr('x', function (data, i) {
return i * (barWidth + barOffset);
})
.attr('y', function (data) {
return height - data;
});<!DOCTYPE HTML>
<html>
<head>
<title>Vertical Bar Chart
</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<h1>Vertical Bar Chart Using D3</h1>
<div id="bar-chart"></div>
</body>
</html>