Currently, I am working on creating a thermometer-style bar chart using D3.js version 3. While I have successfully created a basic responsive rectangle with two filled colors, I am facing difficulties in figuring out how to add arrow heads to the design. Below is the code snippet and screenshot for reference. Your assistance in this matter would be greatly appreciated!
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<style>
#temp_pue_wrapper {
position: relative;
height: 0;
width: 100%;
padding: 0;
/* padding-bottom will be overwritten by JavaScript later */
padding-bottom: 100%;
}
#temp_pue_wrapper > svg {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
</style>
<div id="temp_pue_wrapper"></div>
<script>
var width = 500,
height = 30,
tmp_wrapper = d3.select("#temp_pue_wrapper")
.attr(
"style",
"padding-bottom: " + Math.ceil(height * 85 / width) + "%"
)
.append("svg")
.attr("viewBox", "0 0 " + width + " " + height);
var gradient = tmp_wrapper.append("defs")
.append("linearGradient")
.attr("id", "gradient")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "0%")
.attr("spreadMethod", "pad");
gradient.append("stop")
.attr("offset", "0%")
.attr("stop-color", "#228582")
.attr("stop-opacity", 1);
gradient.append("stop")
.attr("offset", "50%")
.attr("stop-color", "#228582")
.attr("stop-opacity", 1);
gradient.append("stop")
.attr("offset", "50%")
.attr("stop-color", "#C23439")
.attr("stop-opacity", 1);
gradient.append("stop")
.attr("offset", "100%")
.attr("stop-color", "#C23439")
.attr("stop-opacity", 1);
tmp_wrapper.append('rect')
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "url(#gradient)");
</script>