xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.chart {
background: #b0e0f8;
margin: 5px;
}
</style>
</head>
<body>
<script>
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11 ];
var w = 600,
h = 300,
padding = 25,
maxValue = 25
var yScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, h], 0.05)
.paddingInner(0.05);
var xScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, h]);
// create svg element
var svg = d3.select('body')
.append('svg')
.attr('width', w)
.attr('height', h);
let bar = svg.selectAll('g')
.data(dataset)
.enter()
.append('g')
.attr('class', 'bar');
bar.append('text')
.attr('y', function(d, i){
return yScale(i);
})
.attr('height', function(d, i){
return yScale.bandwidth();
})
.text(function(d){
return d;
})
bar.append('rect')
.attr('x', function(d, i) {
return 100;
})
.attr('y', function(d, i) {
return yScale(i);
})
.attr('width', function(d){
return xScale(d);
})
.attr('height', function(d) {
return yScale.bandwidth();
})
.attr('fill', function(d) {
return "rgb(0, 0, " + (d * 10) + ')';
})
// create labels
// svg.selectAll('text')
// .data(dataset)
// .enter()
// .append('text')
// .text(function(d) {
// return d;
// })
// .attr('text-anchor', 'middle')
// .attr('x', function(d, i ) {
// return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
// })
// .attr('y', function(d) {
// return h - yScale(d) + 14;
// })
// .attr('font-family', 'sans-serif')
// .attr('font-size', '11px')
// .attr('fill', 'white');
var sortBars = function() {
// Flip value of sortOrder
sortOrder = !sortOrder;
svg.selectAll('rect')
.sort(function(a, b) {
if(sortOrder) {
return d3.ascending(a, b);
} else {
return d3.descending(a, b);
}
})
.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1000)
.attr('x', function(d, i) {
return xScale(i);
});
}
</script>
</body>
https://d3js.org/d3.v4.min.js