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)"
];
var defs = svg.append("defs");
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();
}