Built with blockbuilder.org
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; }
rect { stroke: black; }
text { fill: black; text-anchor: middle }
circle { fill: orange; stroke: steelblue; }
svg { border: 0px solid green}
body { padding: 20px; }
</style>
</head>
<body>
<script>
const data = [
{ id: 0, total: 100, text: "pears", },
{ id: 1, total: 200, text: "apples",},
{ id: 2, total: 50, text: "bread",},
{ id: 3, total: 100, text: "oranges",},
];
const width = 400;
const height = 300;
const margin = 50;
const scaleY = d3.scaleLinear().domain([0,200]).range([margin, height - margin*2]);
const scaleX = d3.scaleLinear().domain([0, data.length]).range([margin, width - margin]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
svg.append("g").classed("rects", true)
.selectAll("rect")
.data(data, d => d.id).enter()
.append("rect")
.attr("x", (d, i) => scaleX(i))
.attr("y", d => scaleY.range()[1] - scaleY(d.total))
.attr("width", (d, i) => scaleX(1) - scaleX(0) - 10)
.attr("height", d => scaleY(d.total))
.attr("id", d => `bar_${d.id}`)
;
svg.append("g").classed("texts", true)
.selectAll("text")
.data(data, d => d.id).enter()
.append("text")
.attr("transform", (d, i) => `translate(${scaleX(i) + (scaleX(1) - scaleX(0))/2 }, ${scaleY.range()[1] + margin / 2})`)
.attr("id", d => `text_${d.id}`)
.text(d => d.text)
function rotateChart() {
// rotate container
svg
.transition().duration(2000)
.attr("transform", `rotate(90, ${-margin}, 0)`);
// rotate text
svg.select("g.texts").selectAll("text")
.transition().delay(0).duration(2000)
.attr("transform", function(d, i) {
const elem = d3.select(this);
return `${elem.attr("transform")} rotate(-90)`;
});
}
function colorize() {
svg.select("#text_2")
.style("font-size", "1em")
.transition().duration(2000)
.style("fill", "orange")
.style("font-size", "1.4em");
svg.select("#bar_2")
.transition().duration(2000)
.style("fill", "orange")
}
setTimeout(() => {
rotateChart();
}, 3000);
setTimeout(() => {
colorize()
}, 5000);
</script>
</body>
https://d3js.org/d3.v4.min.js