Skip to content

Instantly share code, notes, and snippets.

@amo6002

amo6002/.block

Created October 3, 2019 22:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save amo6002/175bf9fc282f4135f90a09883a253dca to your computer and use it in GitHub Desktop.
Save amo6002/175bf9fc282f4135f90a09883a253dca to your computer and use it in GitHub Desktop.
Download ZIP
d3 tooltip
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tooltip </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="assets/fav.png" />
<meta property="og:title" content="D3 Tooltip" />
<meta property="og:description" content="Usage made easy" />
<meta property="og:image" content="https://bumbeishvili.github.io/d3-tooltip/assets/shared.png" />
<style>
body {
font-family: "Helvetica"
}
</style>
</head>
<body translate="no">
<a href="https://github.com/bumbeishvili/d3-tooltip">
<img style="position:fixed;top:0;right:0;border:0;z-index:2;" width="149" height="149" src="forkme.png" alt="Fork me on GitHub">
</a>
<div class="container centered">
<div id="myGraph"></div>
</div>
<div>
<textarea rows=30>
//just edit tooltips's default options here and see result above
tooltip = d3.componentsTooltip()
.container('.svg-element')
.content([
{
left: "id",
right: "{id} prefix"
},
{
left: "name",
right: "{name}"
},
])
.x(400)
.y(380)
.tooltipRowHeight(25)
.minSpaceBetweenColumns(50)
.fontSize(13)
.arrowHeight(10)
.arrowLength(20)
.contentMargin(0)
.heightOffset(7)
.textColor('#2C3E50')
.tooltipFill('white')
.leftMargin(10)
.rightMargin(3)
.direction('bottom') // top,left,right
// invoke with test data
tooltip
.show({id:1,value:"some value",name:"Some large name"})
</textarea>
</div>
<script src="https://bumbeishvili.github.io/d3-tooltip/libs/d3.v4.min.js"></script>
<script src="https://bumbeishvili.github.io/d3-tooltip/libs/codemirror.js"></script>
<script src="https://bumbeishvili.github.io/d3-tooltip/libs/javascript.js"></script>
<LINK REL=StyleSheet HREF="https://bumbeishvili.github.io/d3-tooltip/libs/codemirror.css" TYPE="text/css">
<script src="https://bumbeishvili.github.io/d3-tooltip/tooltip.js"></script>
<script>
//initialize code editor
var myCodeMirror = CodeMirror.fromTextArea(
document.getElementsByTagName('textarea')[0],
{
lineNumbers: true,
mode: "javascript",
matchBrackets: true,
}
);
myCodeMirror.setSize(700, 700);
myCodeMirror.on("change", function (cm, change, text) {
var value = myCodeMirror.getValue();
eval(value)
});
</script>
<script>
var svg = d3.select('#myGraph')
.append('svg')
.attr('width', 500)
.attr('class', 'svg-element')
.attr('height', 400)
.style('overflow', 'visible');
//initialize
var tooltip = d3.componentsTooltip()
.container('.svg-element')
.content([
{
left: "default id",
right: "{id}"
},
{
left: "new id",
right: "{id}"
},
])
var topY = 230;
svg.append('text').text('Hover to see :)').attr('y', 200).attr('x', 200)
svg.selectAll('rect')
.data(d3.range(100).map(d => d - 1))
.enter()
.append('rect')
.attr('fill', 'aqua')
.attr('width', 20)
.attr('height', 20)
.attr('y', (d, i) => {
return topY + 21 * Math.floor(i / 25);
})
.attr('x', (d, i) => {
return 200 + (i % 25) * 21;
})
.on('mouseenter', function (d, i) {
d3.select(this)
.attr('fill', 'orange');
var item = d3.select(this);
var x = +item.attr('x');
var y = +item.attr('y');
var direction = ["top", "left", "right", "bottom"][Math.floor(i / 25)];
switch (direction) {
case "bottom": x += 10; break;
case "top": y += 25; x += 10; break
case "left": x += 25; y += 11; break;
case "right": y += 11; break;
}
var obj = {
index: d + 1,
isEven: d % 2 == 1,
isPrime: "I am lazy :)"
}
var rows = [
{
left: "Number",
right: "{index}"
},
{
left: "Is even",
right: "{isEven}"
},
]
if (i % 5 > 1) {
rows.push({ left: "Is prime", right: "{isPrime}" })
}
if (i % 5 > 2) {
rows.push({ left: "Other thing", right: "Other value" })
}
if (i % 5 > 3) {
rows.push({ left: "Again", right: "Other,other value" })
}
tooltip
.x(x)
.y(y)
.textColor("white")
.tooltipFill(defaultColors[i % defaultColors.length])
.direction(direction)
.content(rows)
.show(obj)
})
.on('mouseleave', function (d) {
svg.selectAll('rect').attr('fill', 'aqua')
tooltip.hide();
})
var defaultColors = ["#c5bf66", "#BF55EC", "#f36a5a", "#EF4836", "#9A12B3", "#c8d046", "#E26A6A",
"#32c5d2", "#8877a9", "#ACB5C3", "#e35b5a", "#2f353b", "#e43a45", "#f2784b",
"#796799", "#26C281", "#555555", "#525e64", "#8E44AD", "#4c87b9", "#bfcad1",
"#67809F", "#578ebe", "#c5b96b", "#4DB3A2", "#e7505a", "#D91E18", "#1BBC9B",
"#3faba4", "#d05454", "#8775a7", "#8775a7", "#8E44AD", "#f3c200", "#4B77BE",
"#c49f47", "#44b6ae", "#36D7B7", "#94A0B2", "#9B59B6", "#E08283", "#3598dc",
"#F4D03F", "#F7CA18", "#22313F", "#2ab4c0", "#5e738b", "#BFBFBF", "#2C3E50",
"#5C9BD1", "#95A5A6", "#E87E04", "#29b4b6", "#1BA39C"]
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment