Public
Edited
May 8, 2023
progressBar = {
const progress = 0.65; // The progress to fill the bar up to (between 0 and 1)
const duration = 1000; // The duration of the animation in milliseconds
// Create the SVG element
const svg = d3.create("svg")
.attr("width", 900)
.attr("height", 50);
// Create the background bar
const backgroundBar = svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "#ddd");
// Create the progress bar
const progressBar = svg.append("rect")
.attr("width", 0)
.attr("height", "100%")
.attr("fill", "purple");
// Create the percentage text marker
const percentageText = svg.append("text")
.attr("x", "50%")
.attr("y", "50%")
.attr("dy", ".3em")
.attr("text-anchor", "middle")
.attr("font-size", "20px")
.attr("fill", "white");
// Animate the progress bar and percentage text marker
progressBar.transition()
.duration(duration)
.attr("width", `${progress * 100}%`);
percentageText.transition()
.duration(duration)
.tween("text", function() {
const interpolator = d3.interpolate(0, progress);
return function(t) {
const value = interpolator(t);
percentageText.text(`${Math.round(value * 100)}%`);
};
});
return svg.node();
}
//gen x - men - 26, women - 24
//millennial - men - 30, women - 28
marriageAgeMen = {
const progress = 30;
const duration = 3000;
// Create the SVG element
const svg = d3.create("svg")
.attr("width", 900)
.attr("height", 200)
.text("Men");
// Create the percentage text marker
const percentageText = svg.append("text")
.attr("x", "20%")
.attr("y", "50%")
.attr("dy", ".3em")
.attr("text-anchor", "middle")
.attr("font-size", "200px")
.attr("fill", "#246a73");
percentageText.transition()
.duration(duration)
.tween("text", function() {
const interpolator = d3.interpolate(26, progress);
return function(t) {
const value = interpolator(t);
percentageText.text(`${Math.round(value)}`);
};
});
return svg.node();
}
//gen x - men - 26, women - 24
//millennial - men - 30, women - 28
marriageAgeWomen = {
const progress = 28;
const duration = 3000;
// Create the SVG element
const svg = d3.create("svg")
.attr("width", 900)
.attr("height", 200)
.text("Men");
// Create the percentage text marker
const percentageText = svg.append("text")
.attr("x", "20%")
.attr("y", "50%")
.attr("dy", ".3em")
.attr("text-anchor", "middle")
.attr("font-size", "200px")
.attr("fill", "#e87461");
percentageText.transition()
.duration(duration)
.tween("text", function() {
const interpolator = d3.interpolate(24, progress);
return function(t) {
const value = interpolator(t);
percentageText.text(`${Math.round(value)}`);
};
});
return svg.node();
}
{
const progress = 0.65; // The progress to fill the bar up to (between 0 and 1)
const duration = 1000; // The duration of the animation in milliseconds
// Create the SVG element
const svg = d3.create("svg")
.attr("width", 900)
.attr("height", 500);
// Create the background circle
const backgroundCircle = svg.append("circle")
.attr("cx", 300)
.attr("cy", 150)
.attr("r", 100)
.attr("fill", "blue")
// Create the progress circle
const circle = svg.append("circle")
.attr("cx", 300)
.attr("cy", 150)
.attr("r", 80)
.attr("fill", "white")
// // Create the percentage text marker
const percentageText = svg.append("text")
.attr("cx", "50%")
.attr("cy", "50%")
.attr("dy", ".3em")
.attr("text-anchor", "middle")
.attr("font-size", "20px")
.attr("fill", "black");
// Animate the progress bar and percentage text marker
// backgroundCircle.transition()
// .duration(duration)
// .attr("r", `${circle * 50}%`);
// backgroundCircle.transition()
// .duration(duration)
// .tween("text", function() {
// const interpolator = d3.interpolate(0, progress);
// return function(t) {
// const value = interpolator(t);
// backgroundCircle.text(`${Math.round(value * 100)}%`);
// };
// });
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
