<dependency>
<groupId>org.webjars</groupId>
<artifactId>d3js</artifactId>
<version>5.12.0</version>
</dependency>
html
<script src="/webjars/d3js/5.12.0/d3.min.js"></script>
script
d3.csv("data.csv", function(data) {
d3.select("body")
.selectAll("p")
.data(data)
.enter()
.append("p")
.text(function(d) {
return d.name;
});
});
script
var width = 500;
var height = 300;
var xScale = d3.scaleLinear()
.domain([0, d3.max(data, function(d) {
return d.value;
})])
.range([0, width]);
var yScale = d3.scaleLinear()
.domain([0, data.length])
.range([0, height]);
var xAxis = d3.axisBottom(xScale);
d3.select("svg")
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", 0)
.attr("y", function(d, i) {
return yScale(i);
})
.attr("width", function(d) {
return xScale(d.value);
})
.attr("height", yScale(1));
d3.select("svg")
.append("g")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
