<dependencies>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>d3</artifactId>
<version>5.15.0</version>
</dependency>
</dependencies>
List<Integer> data = Arrays.asList(10, 20, 30, 40, 50);
html
<!DOCTYPE html>
<html>
<head>
<title>Data Visualization with D3</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<script>
</script>
</body>
</html>
html
<script>
var data = [10, 20, 30, 40, 50];
var svg = d3.select("body")
.append("svg")
.attr("width", 300)
.attr("height", 200);
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * 50;
})
.attr("y", function(d) {
return 200 - d;
})
.attr("width", 40)
.attr("height", function(d) {
return d;
})
.attr("fill", "blue");
</script>
