Last active
January 25, 2018 15:12
Revisions
-
TommyCoin80 revised this gist
Jan 25, 2018 . 1 changed file with 32 additions and 13 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -1,14 +1,15 @@ d3.tooltip = function() { var frameOfReference, extent = new Array([[0,0],[960,500]]), tips = new Array([]), tipNames = new Array([]), tipFormats = new Array([]), margin = new Array([10,10]), padding = new Array([4,4]), translation = new Array([0,0]), tooltipDims = new Array([0,0]), fontSize = 12; var tooltipGroup = d3.select(null), tooltipRect = d3.select(null), @@ -21,6 +22,7 @@ d3.tooltip = function() { frameOfReference = context.node() tooltipGroup = context.append("g") .classed("d3Tooltip",true) .style("display","none"); tooltipRect = tooltipGroup.append("rect") @@ -32,7 +34,7 @@ d3.tooltip = function() { tooltipText = tooltipGroup.append("text") .style("fill", "white") .style("font-size",fontSize); }; @@ -43,14 +45,27 @@ d3.tooltip = function() { tooltipText.selectAll("tspan") .remove(); tooltipText.attr("y", padding[1]) .selectAll("tspan") .data(tips) .enter() .append("tspan") .attr("x",padding[0]) .attr("dy",fontSize*.9) .text(function(e,i) { var val; if(typeof d[e] == 'undefined') { // check the 'data' property too, for voronoi mouseover events val = d.data[e]; } else { val = d[e]; } if(tipFormats[i]) { val = tipFormats[i](val); } return tipNames[i] + val; }); updateTooltipDims(); @@ -78,6 +93,7 @@ d3.tooltip = function() { tooltip.events = function() { var me = d3.select(this).on("mouseenter") || function() {}; var ml = d3.select(this).on("mouseleave") || function() {}; var mm = d3.select(this).on("mousemove") || function() {}; @@ -113,10 +129,11 @@ d3.tooltip = function() { return tooltip; } tooltip.tips = function(_tips,_tipNames,_tipFormats) { tips = _tips || tips; tipNames = _tipNames || tips; tipFormats = _tipFormats || tips.map(function(d) { return null}); return tooltip; } @@ -131,8 +148,10 @@ d3.tooltip = function() { var mouseCoordinates = d3.mouse(frameOfReference); var quad = [0,0]; if(mouseCoordinates[0] > (extent[1][0] - extent[0][0])/2) quad[0] = 1; if(mouseCoordinates[1] > (extent[1][1] - extent[0][1])/2) quad[1] = 1; if(quad[0] == 1) { translation[0] = mouseCoordinates[0] - tooltipDims[0] - margin[0]; } else { -
TommyCoin80 revised this gist
Jan 25, 2018 . 1 changed file with 3 additions and 4 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -60,11 +60,10 @@ .domain(x.domain()) var tooltip = d3.tooltip() // returns the tooltip function .extent([[0,0],[width,height]]) // tells the tooltip how much area it has to work with .tips(["name","description"],["Bar Name: ","Description: "]) // tells the tooltip which properties to display in the tip and what to label thme .fontSize(12) // sets the font size for the tooltip .padding([8,4]) // sets the amount of padding in the tooltip rectangle .margin([10,10]); // set the distance H and V to keep the tooltip from the mouse pointer @@ -76,8 +75,8 @@ .attr("y", function(d) { return y(d.count)}) .attr("width", x.bandwidth()) .attr("height", function(d) { return height - y(d.count)}) .attr("fill", function(d) { return color(d.name)}) .each(tooltip.events); // attaches the tooltips mouseenter/leave/move events but does not overwrite previously attached events svg.append("g") .attr("transform", "translate(0," + height + ")") -
TommyCoin80 revised this gist
Jan 17, 2018 . No changes.There are no files selected for viewing
-
TommyCoin80 revised this gist
Jan 17, 2018 . 1 changed file with 8 additions and 3 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -78,10 +78,15 @@ d3.tooltip = function() { tooltip.events = function() { var me = d3.select(this).on("mouseenter") || function() {}; var ml = d3.select(this).on("mouseleave") || function() {}; var mm = d3.select(this).on("mousemove") || function() {}; d3.select(this) .on("mouseenter", function(d,i) { me(d,i); displayTooltip(d,i);}) .on("mouseleave", function(d,i) { ml(d,i); hideTooltip(d,i); }) .on("mousemove", function(d,i) { mm(d,i); moveTooltip(d,i)}); } -
TommyCoin80 revised this gist
Jan 17, 2018 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -76,7 +76,7 @@ .attr("y", function(d) { return y(d.count)}) .attr("width", x.bandwidth()) .attr("height", function(d) { return height - y(d.count)}) .attr("fill", function(d) { return color(d.name)}) .each(tooltip.events); // attaches the tooltips mouseenter/leave/move events svg.append("g") -
TommyCoin80 revised this gist
Jan 15, 2018 . 1 changed file with 49 additions and 67 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -1,6 +1,6 @@ d3.tooltip = function() { var frameOfReference, extent = [[0,0],[960,500]], tips = [], tipNames = [], @@ -13,26 +13,28 @@ d3.tooltip = function() { var tooltipGroup = d3.select(null), tooltipRect = d3.select(null), tooltipText = d3.select(null); var tooltip = function(context) { tooltipGroup.remove(); frameOfReference = context.node() tooltipGroup = context.append("g") .style("display","none"); tooltipRect = tooltipGroup.append("rect") .attr("width",100) .attr("height",100) .style("fill","black") .style("fill-opacity",.70) tooltipText = tooltipGroup.append("text") .style("fill", "white") .style("font-size",fontSize + "em"); }; function displayTooltip(d) { @@ -67,73 +69,50 @@ d3.tooltip = function() { } function moveTooltip() { updateTranslation(); tooltipGroup.attr("transform","translate(" + translation[0] + "," + translation[1] + ")"); } tooltip.events = function() { d3.select(this) .on("mouseenter", displayTooltip) .on("mouseleave", hideTooltip) .on("mousemove", moveTooltip); } tooltip.extent = function(_extent){ extent = _extent || extent; return tooltip; } tooltip.fontSize = function(_fontSize) { fontSize = _fontSize || fontSize; return tooltip; } tooltip.margin = function(_margin) { margin = _margin || margin; return tooltip; } tooltip.padding = function(_padding) { padding = _padding || padding; return tooltip; } tooltip.tips = function(_tips,_tipNames) { tips = _tips || tips; tipNames = _tipNames || tips; return tooltip; } @@ -144,7 +123,8 @@ d3.tooltip = function() { function updateTranslation() { var mouseCoordinates = d3.mouse(frameOfReference); var quad = [0,0]; if(mouseCoordinates[0] > (extent[1][0] - extent[0][0])/2) quad[0] = 1; if(mouseCoordinates[1] > (extent[1][1] - extent[0][1])/2) quad[1] = 1; @@ -161,5 +141,7 @@ d3.tooltip = function() { } } return tooltip; } -
TommyCoin80 revised this gist
Jan 15, 2018 . 1 changed file with 15 additions and 12 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -22,6 +22,8 @@ </body> <script> // Dummy Data for the chart var data = [ {name:'A',count:64,description:"This is column A!"}, {name:'B',count:32,description:"This is column B!"}, @@ -31,6 +33,8 @@ {name:'F',count:2,description:"This is column F!"}, ]; // Draw a basic bar chart var margin = {top:20, left:50, bottom:50, right:20}; var height = 500 - margin.top - margin.bottom, width = 960 - margin.left - margin.right; @@ -43,7 +47,7 @@ .append("g") .attr("transform","translate(" + margin.left + "," + margin.top + ")"); var x = d3.scaleBand() .domain(data.map(function(d) { return d.name;})) .range([0,width]) .padding(.1); @@ -55,14 +59,14 @@ var color = d3.scaleOrdinal(d3.schemeCategory10) .domain(x.domain()) var tooltip = d3.tooltip() // returns the tooltip function .extent([[0,0],[width,height]]) // tells the tooltip how much area it has to work with .tips(["name","description"],["Bar Name: ","Description: "]) // tells the tooltip which properties to display in the tip and what to label thme .fontSize(1) // sets the font size for the tooltip .padding([8,4]) // sets the amount of padding in the tooltip rectangle .margin([10,10]); // set the distance H and V to keep the tooltip from the mouse pointer svg.selectAll(".bar") .data(data) @@ -73,8 +77,7 @@ .attr("width", x.bandwidth()) .attr("height", function(d) { return height - y(d.count)}) .attr("fill", function(d) { return color(d.name)}) .each(tooltip.events); // attaches the tooltips mouseenter/leave/move events svg.append("g") .attr("transform", "translate(0," + height + ")") @@ -83,6 +86,6 @@ svg.append("g") .call(d3.axisLeft(y)); svg.call(tooltip) // draws the tooltip; </script> -
TommyCoin80 revised this gist
Jan 15, 2018 . No changes.There are no files selected for viewing
-
TommyCoin80 revised this gist
Jan 12, 2018 . 1 changed file with 24 additions and 5 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -8,7 +8,7 @@ d3.tooltip = function() { padding = [4,4], translation = [0,0], tooltipDims = [0,0], fontSize = 1; var tooltipGroup = d3.select(null), tooltipRect = d3.select(null), @@ -19,6 +19,9 @@ d3.tooltip = function() { init:init, setFrameOfReference:setFrameOfReference, setExtent:setExtent, setFontSize:setFontSize, setMargin:setMargin, setPadding:setPadding, setTips:setTips } @@ -38,13 +41,13 @@ d3.tooltip = function() { tooltipText.selectAll("tspan") .remove(); tooltipText.attr("y", padding[1] - fontSize) .selectAll("tspan") .data(tips) .enter() .append("tspan") .attr("x",padding[0]) .attr("dy","1em") .text(function(e,i) { return tipNames[i] + ' ' + d[e]}); updateTooltipDims(); @@ -83,7 +86,7 @@ d3.tooltip = function() { tooltipText = tooltipGroup.append("text") .style("fill", "white") .style("font-size",fontSize + "em"); return output; @@ -103,13 +106,29 @@ d3.tooltip = function() { } function setFontSize(x) { fontSize = x || fontSize; return output; } function setFrameOfReference(x) { frameOfReference = x || frameOfReference; return output; } function setMargin(x) { margin = x || margin; return output; } function setPadding(x) { padding = x || padding; return output; } function setTips(x,y) { tips = x || tips; @@ -124,7 +143,7 @@ d3.tooltip = function() { } function updateTranslation() { var mouseCoordinates = d3.mouse(frameOfReference.node()); var quad = [0,0]; if(mouseCoordinates[0] > (extent[1][0] - extent[0][0])/2) quad[0] = 1; -
TommyCoin80 revised this gist
Jan 12, 2018 . 1 changed file with 3 additions and 0 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -59,6 +59,9 @@ .setFrameOfReference(svg) .setExtent([[0,0],[width,height]]) .setTips(["name","description"],["Bar Name: ","Description: "]) .setFontSize(1) .setPadding([8,4]) .setMargin([20,20]) .init(); svg.selectAll(".bar") -
TommyCoin80 revised this gist
Jan 12, 2018 . 1 changed file with 0 additions and 1 deletion.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -4,7 +4,6 @@ d3.tooltip = function() { extent = [[0,0],[960,500]], tips = [], tipNames = [], margin = [10,10], padding = [4,4], translation = [0,0], -
TommyCoin80 revised this gist
Jan 12, 2018 . 1 changed file with 64 additions and 57 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -16,58 +16,52 @@ d3.tooltip = function() { tooltipText = d3.select(null); var output = { attachEvents:attachEvents, init:init, setFrameOfReference:setFrameOfReference, setExtent:setExtent, setTips:setTips } function attachEvents() { d3.select(this) .on("mouseenter", displayTooltip) .on("mouseleave", hideTooltip) .on("mousemove", moveTooltip); } function displayTooltip(d) { tooltipGroup.style("display",null); tooltipText.selectAll("tspan") .remove(); tooltipText.attr("y", padding[1]) .selectAll("tspan") .data(tips) .enter() .append("tspan") .attr("x",padding[0]) .attr("dy",fontSize) .text(function(e,i) { return tipNames[i] + ' ' + d[e]}); updateTooltipDims(); tooltipRect.attr("width", tooltipDims[0]) .attr("height", tooltipDims[1]) updateTranslation(); tooltipGroup.attr("transform","translate(" + translation[0] + "," + translation[1] + ")") } function hideTooltip() { tooltipGroup.style("display","none") } @@ -96,44 +90,57 @@ d3.tooltip = function() { } function moveTooltip() { updateTranslation(); tooltipGroup.attr("transform","translate(" + translation[0] + "," + translation[1] + ")"); } function setExtent(x) { extent = x || extent; return output; } function setFrameOfReference(x) { frameOfReference = x || frameOfReference; return output; } function setTips(x,y) { tips = x || tips; tipNames = y || tips; return output; } function updateTooltipDims() { var bb = tooltipText.node().getBBox(); tooltipDims = [bb.width + padding[0]*2, bb.height + padding[1]*2]; } function updateTranslation() { var mouseCoordinates = d3.mouse(frameOfReference.node()); var quad = [0,0]; if(mouseCoordinates[0] > (extent[1][0] - extent[0][0])/2) quad[0] = 1; if(mouseCoordinates[1] > (extent[1][1] - extent[0][1])/2) quad[1] = 1; if(quad[0] == 1) { translation[0] = mouseCoordinates[0] - tooltipDims[0] - margin[0]; } else { translation[0] = mouseCoordinates[0] + margin[0]; } if(quad[1] == 1) { translation[1] = mouseCoordinates[1] - tooltipDims[1] - margin[1]; } else { translation[1] = mouseCoordinates[1] + margin[1]; } } return output; -
TommyCoin80 revised this gist
Jan 12, 2018 . 1 changed file with 3 additions and 3 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -17,6 +17,7 @@ <script src="https://d3js.org/d3.v4.min.js"></script> <script src="tooltip.js"></script> </head> <body> </body> <script> @@ -69,9 +70,8 @@ .attr("width", x.bandwidth()) .attr("height", function(d) { return height - y(d.count)}) .attr("fill", function(d) { return color(d.name)}) .each(tt.attachEvents); svg.append("g") .attr("transform", "translate(0," + height + ")") -
TommyCoin80 revised this gist
Jan 12, 2018 . No changes.There are no files selected for viewing
-
TommyCoin80 revised this gist
Jan 12, 2018 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -54,7 +54,7 @@ var color = d3.scaleOrdinal(d3.schemeCategory10) .domain(x.domain()) var tt = d3.tooltip() .setFrameOfReference(svg) .setExtent([[0,0],[width,height]]) .setTips(["name","description"],["Bar Name: ","Description: "]) -
TommyCoin80 revised this gist
Jan 12, 2018 . No changes.There are no files selected for viewing
-
TommyCoin80 revised this gist
Jan 12, 2018 . 1 changed file with 139 additions and 148 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -1,149 +1,140 @@ d3.tooltip = function() { var frameOfReference = d3.select("svg").select("g"), extent = [[0,0],[960,500]], tips = [], tipNames = [], bBox, margin = [10,10], padding = [4,4], translation = [0,0], tooltipDims = [0,0], fontSize = '1em'; var tooltipGroup = d3.select(null), tooltipRect = d3.select(null), tooltipText = d3.select(null); var output = { displayTooltip:displayTooltip, hideTooltip:hideTooltip, init:init, moveTooltip:moveTooltip, setFrameOfReference:setFrameOfReference, setExtent:setExtent, setTips:setTips } function updateTooltipDims() { var bb = tooltipText.node().getBBox(); tooltipDims = [bb.width + padding[0]*2, bb.height + padding[1]*2]; } function updateTranslation() { var mouseCoordinates = d3.mouse(frameOfReference.node()); var quad = [0,0]; if(mouseCoordinates[0] > (extent[1][0] - extent[0][0])/2) quad[0] = 1; if(mouseCoordinates[1] > (extent[1][1] - extent[0][1])/2) quad[1] = 1; if(quad[0] == 1) { translation[0] = mouseCoordinates[0] - tooltipDims[0] - margin[0]; } else { translation[0] = mouseCoordinates[0] + margin[0]; } if(quad[1] == 1) { translation[1] = mouseCoordinates[1] - tooltipDims[1] - margin[1]; } else { translation[1] = mouseCoordinates[1] + margin[1]; } } function setFrameOfReference(x) { frameOfReference = x || frameOfReference; return output; } function setExtent(x) { extent = x || extent; return output; } function setTips(x,y) { tips = x || tips; tipNames = y || tips; return output; } function init() { tooltipGroup.remove(); tooltipGroup = d3.select(frameOfReference.node().parentNode) .append("g") .attr("transform",frameOfReference.attr("transform")) .append("g") .style("display","none"); tooltipRect = tooltipGroup.append("rect") .attr("width",100) .attr("height",100) .style("fill","black") .style("fill-opacity",.70) tooltipText = tooltipGroup.append("text") .style("fill", "white") .style("font-size",fontSize); return output; } function displayTooltip(d) { tooltipGroup.style("display",null); tooltipText.selectAll("tspan") .remove(); tooltipText.attr("y", padding[1]) .selectAll("tspan") .data(tips) .enter() .append("tspan") .attr("x",padding[0]) .attr("dy",fontSize) .text(function(e,i) { return tipNames[i] + ' ' + d[e]}); updateTooltipDims(); tooltipRect.attr("width", tooltipDims[0]) .attr("height", tooltipDims[1]) updateTranslation(); tooltipGroup.attr("transform","translate(" + translation[0] + "," + translation[1] + ")") } function hideTooltip() { tooltipGroup.style("display","none") } function moveTooltip() { updateTranslation(); tooltipGroup.attr("transform","translate(" + translation[0] + "," + translation[1] + ")"); } return output; } -
TommyCoin80 revised this gist
Jan 11, 2018 . No changes.There are no files selected for viewing
-
TommyCoin80 revised this gist
Jan 11, 2018 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -54,7 +54,7 @@ var color = d3.scaleOrdinal(d3.schemeCategory10) .domain(x.domain()) var tt = tooltip() .setFrameOfReference(svg) .setExtent([[0,0],[width,height]]) .setTips(["name","description"],["Bar Name: ","Description: "]) -
TommyCoin80 revised this gist
Jan 11, 2018 . 1 changed file with 6 additions and 4 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -1,4 +1,5 @@ window.tooltip = (function(d3) { function tooltip() { // Activation example // var tt = toolTip() // .setFrameOfReference(svg) @@ -11,7 +12,7 @@ function toolTip() { tipNames = [], bBox, margin = [10,10], padding = [4,4], translation = [0,0], tooltipDims = [0,0], fontSize = '1em'; @@ -102,7 +103,7 @@ function toolTip() { } function displayTooltip(d) { tooltipGroup.style("display",null); tooltipText.selectAll("tspan") @@ -144,4 +145,5 @@ function toolTip() { return output; } return tooltip; }(d3)); -
TommyCoin80 revised this gist
Jan 11, 2018 . 1 changed file with 5 additions and 3 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -102,6 +102,8 @@ function toolTip() { } function displayTooltip(d) { tooltipGroup.style("display",null); tooltipText.selectAll("tspan") .remove(); @@ -123,9 +125,8 @@ function toolTip() { updateTranslation(); tooltipGroup.attr("transform","translate(" + translation[0] + "," + translation[1] + ")") } @@ -142,4 +143,5 @@ function toolTip() { } return output; }
-
TommyCoin80 revised this gist
Jan 10, 2018 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -125,7 +125,7 @@ function toolTip() { tooltipGroup.attr("transform","translate(" + translation[0] + "," + translation[1] + ")") .style("display",null); } -
Building blocks revised this gist
Jan 10, 2018 . 1 changed file with 0 additions and 0 deletions.There are no files selected for viewing
LoadingSorry, something went wrong. Reload?Sorry, we cannot display this file.Sorry, this file is invalid so it cannot be displayed. -
TommyCoin80 created this gist
Jan 10, 2018 .There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1 @@ 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,3 @@ This is my first attempt at a reusable function for creating tooltips on D3 charts. Built with [blockbuilder.org](http://blockbuilder.org) 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,85 @@ <!DOCTYPE html> <meta charset="utf-8"> <head> <link href='https://fonts.googleapis.com/css?family=Play' rel='stylesheet' type='text/css'> <style> body { margin:auto; font-family: 'Play', sans-serif; } text { font-family: 'Play', sans-serif; } </style> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="tooltip.js"></script> <body> </body> <script> var data = [ {name:'A',count:64,description:"This is column A!"}, {name:'B',count:32,description:"This is column B!"}, {name:'C',count:16,description:"This is column C!"}, {name:'D',count:8,description:"This is column D!"}, {name:'E',count:4,description:"This is column E!"}, {name:'F',count:2,description:"This is column F!"}, ]; var margin = {top:20, left:50, bottom:50, right:20}; var height = 500 - margin.top - margin.bottom, width = 960 - margin.left - margin.right; var svg = d3.select("body") .append("svg") .attr("height", height + margin.top + margin.bottom) .attr("width", width + margin.left + margin.right) .style("cursor","default") .append("g") .attr("transform","translate(" + margin.left + "," + margin.top + ")"); var x = d3.scaleBand() .domain(data.map(function(d) { return d.name;})) .range([0,width]) .padding(.1); var y = d3.scaleLinear() .domain([0,70]) .range([height,0]); var color = d3.scaleOrdinal(d3.schemeCategory10) .domain(x.domain()) var tt = toolTip() .setFrameOfReference(svg) .setExtent([[0,0],[width,height]]) .setTips(["name","description"],["Bar Name: ","Description: "]) .init(); svg.selectAll(".bar") .data(data) .enter() .append("rect") .attr("x", function(d) { return x(d.name)}) .attr("y", function(d) { return y(d.count)}) .attr("width", x.bandwidth()) .attr("height", function(d) { return height - y(d.count)}) .attr("fill", function(d) { return color(d.name)}) .on("mouseenter", tt.displayTooltip) .on("mouseleave", tt.hideTooltip) .on("mousemove", tt.moveTooltip); svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)) svg.append("g") .call(d3.axisLeft(y)); </script> 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,145 @@ function toolTip() { // Activation example // var tt = toolTip() // .setFrameOfReference(svg) // .setTips(d3.keys(data[0])) // .init(); var frameOfReference = d3.select("svg").select("g"), extent = [[0,0],[960,500]], tips = [], tipNames = [], bBox, margin = [10,10], padding = [4,4]; translation = [0,0], tooltipDims = [0,0], fontSize = '1em'; var tooltipGroup = d3.select(null), tooltipRect = d3.select(null), tooltipText = d3.select(null); var output = { displayTooltip:displayTooltip, hideTooltip:hideTooltip, init:init, moveTooltip:moveTooltip, setFrameOfReference:setFrameOfReference, setExtent:setExtent, setTips:setTips } function updateTooltipDims() { var bb = tooltipText.node().getBBox(); tooltipDims = [bb.width + padding[0]*2, bb.height + padding[1]*2]; } function updateTranslation() { var mouseCoordinates = d3.mouse(frameOfReference.node()); var quad = [0,0]; if(mouseCoordinates[0] > (extent[1][0] - extent[0][0])/2) quad[0] = 1; if(mouseCoordinates[1] > (extent[1][1] - extent[0][1])/2) quad[1] = 1; if(quad[0] == 1) { translation[0] = mouseCoordinates[0] - tooltipDims[0] - margin[0]; } else { translation[0] = mouseCoordinates[0] + margin[0]; } if(quad[1] == 1) { translation[1] = mouseCoordinates[1] - tooltipDims[1] - margin[1]; } else { translation[1] = mouseCoordinates[1] + margin[1]; } } function setFrameOfReference(x) { frameOfReference = x || frameOfReference; return output; } function setExtent(x) { extent = x || extent; return output; } function setTips(x,y) { tips = x || tips; tipNames = y || tips; return output; } function init() { tooltipGroup.remove(); tooltipGroup = d3.select(frameOfReference.node().parentNode) .append("g") .attr("transform",frameOfReference.attr("transform")) .append("g") .style("display","none"); tooltipRect = tooltipGroup.append("rect") .attr("width",100) .attr("height",100) .style("fill","black") .style("fill-opacity",.70) tooltipText = tooltipGroup.append("text") .style("fill", "white") .style("font-size",fontSize); return output; } function displayTooltip(d) { tooltipText.selectAll("tspan") .remove(); tooltipText.attr("y", padding[1]) .selectAll("tspan") .data(tips) .enter() .append("tspan") .attr("x",padding[0]) .attr("dy",fontSize) .text(function(e,i) { return tipNames[i] + ' ' + d[e]}); updateTooltipDims(); tooltipRect.attr("width", tooltipDims[0]) .attr("height", tooltipDims[1]) updateTranslation(); tooltipGroup.attr("transform","translate(" + translation[0] + "," + translation[1] + ")") .style("display",null); return output; } function hideTooltip() { tooltipGroup.style("display","none") } function moveTooltip() { updateTranslation(); tooltipGroup.attr("transform","translate(" + translation[0] + "," + translation[1] + ")"); } return output; }