<head>
<meta charset="utf-8">
<script src="d3.js"></script>
<div id="title">Hover for tooltips.</div>
</head> .bar:hover {
fill: pink;
}
import * as d3 from "https://cdn.skypack.dev/d3@7.0.0";
const dataset = [[15,245,"H"],[42,255,"A"],[60,260,"P"],[80,265,"P"],[85,265,"Y"],[90,260,"B"],[95,255,"I"],[90,260,"R"],[85,265,"T"],[80,265,"H"],[60,260,"D"],[42,255,"A"],[15,245,"Y"]]
const w = 250;
const h = 300;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i*10)
.attr("y", (d, i) => h - d[1])
.attr("width", 9)
.attr("height", (d, i) => d[0])
.attr("fill", "red")
.attr("class","bar")
.append("title")
.text((d) => d[2])
External CSS
This Pen doesn't use any external CSS resources.