Built with blockbuilder.org
Last active
January 19, 2018 16:19
-
-
Save bumbeishvili/568d327db4f738af87aa472614f72436 to your computer and use it in GitHub Desktop.
d3 tooltip
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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