Scribd
Upload
43 views1 page

Add A Tooltip To A d3 Element

This document contains code to generate a bar chart visualization using D3.js. It defines an array of data values, sets the width and height of the SVG element, binds the data to rect elements to create the bars, and adds text labels above each bar displaying its value. It also appends title elements to each bar to similarly display the data value on hover.

Uploaded by

ammouna beng
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
43 views1 page

Add A Tooltip To A d3 Element

This document contains code to generate a bar chart visualization using D3.js. It defines an array of data values, sets the width and height of the SVG element, binds the data to rect elements to create the bars, and adds text labels above each bar displaying its value. It also appends title elements to each bar to similarly display the data value on hover.

Uploaded by

ammouna beng
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

<style>

.bar:hover {
fill: brown;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

const w = 500;
const h = 150;

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 * 30)
.attr("y", (d, i) => h - 3 * d)
.attr("width", 25)
.attr("height", (d, i) => d * 3)
.attr("fill", "navy")
.attr("class", "bar")
// Add your code below this line
.append("title")
.text((d) => d)

// Add your code above this line

svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text((d) => d)
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - (d * 3 + 3))
.attr("font-size",25)
.attr("fill","red")

</script>
</body>

You might also like