Published
Edited
Mar 22, 2022
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
var w = 300,
h = 100,
padding = 20;
var svg = d3.create("svg").attr("width", w).attr("height", h);

var data = [
{ name: "PD", y: 20.0 },
{ name: "LEGA", y: 20.5 },
{ name: "FDI", y: 18.8 }
];
var data1 = [
{ name: "PD", y: 20.0 },
{ name: "LEGA", y: 40.5 },
{ name: "FDI", y: 18.8 }
];

var colors = [
"url(#red-gradient)",
"url(#blue-gradient)",
"url(#dark_blue-gradient)"
];

///////////////////////////////////////////////////////////////////////////
///////////////////////////// Create gradient /////////////////////////////
///////////////////////////////////////////////////////////////////////////

var defs = svg.append("defs");

//Create a radial Sun-like gradient
defs
.append("radialGradient")
.attr("id", "red-gradient")
.attr("cx", "50%")
.attr("cy", "50%")
.attr("r", "100%")
.selectAll("stop")
.data([
{ offset: "20%", color: "#C40201" },
{ offset: "70%", color: "#A00305" },
{ offset: "90%", color: "#A00305" },
{ offset: "100%", color: "darkred" }
])
.enter()
.append("stop")
.attr("offset", function (d) {
return d.offset;
})
.attr("stop-color", function (d) {
return d.color;
});

defs
.append("radialGradient")
.attr("id", "blue-gradient")
.attr("cx", "50%")
.attr("cy", "50%")
.attr("r", "100%")
.selectAll("stop")
.data([
{ offset: "0%", color: "#009EE3" },
{ offset: "60%", color: "#0065B0" },
{ offset: "80%", color: "#26338F" },
{ offset: "100%", color: "darkred" }
])
.enter()
.append("stop")
.attr("offset", function (d) {
return d.offset;
})
.attr("stop-color", function (d) {
return d.color;
});

defs
.append("radialGradient")
.attr("id", "dark_blue-gradient")
.attr("cx", "50%")
.attr("cy", "50%")
.attr("r", "100%")
.selectAll("stop")
.data([
{ offset: "0%", color: "#08248B" },
{ offset: "60%", color: "#061A65" },
{ offset: "80%", color: "#01030D" },
{ offset: "100%", color: "darkred" }
])
.enter()
.append("stop")
.attr("offset", function (d) {
return d.offset;
})
.attr("stop-color", function (d) {
return d.color;
});
///////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////

var xScale = d3
.scaleBand()
.range([0, w])
.domain(
data.map(function (d) {
return d.name;
})
)

.paddingOuter(0.2);

var yScale = d3
.scaleLinear()
.range([h - padding, 0])
.domain([
0,
d3.max(data1, function (d) {
return d.y;
})
]);

var bars = svg
.append("g")
.selectAll("rect")
.data(data1)
.enter()
.append("rect");

bars
.attr("id", (d) => d.name)
.attr("x", function (d) {
return xScale(d.name);
})
.attr("width", xScale.bandwidth())
.attr("y", function (d) {
return yScale(d.y);
})
.attr("height", function (d) {
return h - padding - yScale(d.y);
})
.attr("fill", (d, i) => colors[i]);

svg
.append("g")
.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("style", "filter: drop-shadow(1px -1px 3px black);")
.text((d) => d.y + "%")
.attr("x", (d) => xScale(d.name) + 45)
.attr("y", (d) => h / 1.65)
.attr("text-anchor", "middle")
.attr("fill", "white")
.attr("dy", ".35em")
.attr("font-size", "23")
.attr("font-family", "Impact")
.attr("font-style", "italic");

return svg.node();
}
Insert cell
d3.select(button).on("click", function () {
{
d3.select("#PD")
.transition()
.duration(3000)
.attr("y", "1.9512195121951237")
.attr("height", "78.04878048780488");

d3.select("#FDI")
.transition()
.duration(3000)
.attr("y", "6.634146341463412")
.attr("height", "73.3658536585366");
}
})
Insert cell
Insert cell

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.
Learn more