Skip to content

Instantly share code, notes, and snippets.

@TommyCoin80
Last active January 25, 2018 15:12

Revisions

  1. TommyCoin80 revised this gist Jan 25, 2018. 1 changed file with 32 additions and 13 deletions.
    45 changes: 32 additions & 13 deletions tooltip.js
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,15 @@
    d3.tooltip = function() {

    var frameOfReference,
    extent = [[0,0],[960,500]],
    tips = [],
    tipNames = [],
    margin = [10,10],
    padding = [4,4],
    translation = [0,0],
    tooltipDims = [0,0],
    fontSize = 1;
    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 + "em");
    .style("font-size",fontSize);

    };

    @@ -43,14 +45,27 @@ d3.tooltip = function() {
    tooltipText.selectAll("tspan")
    .remove();

    tooltipText.attr("y", padding[1] - fontSize)
    tooltipText.attr("y", padding[1])
    .selectAll("tspan")
    .data(tips)
    .enter()
    .append("tspan")
    .attr("x",padding[0])
    .attr("dy","1em")
    .text(function(e,i) { return tipNames[i] + ' ' + d[e]});
    .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) {
    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 {
  2. TommyCoin80 revised this gist Jan 25, 2018. 1 changed file with 3 additions and 4 deletions.
    7 changes: 3 additions & 4 deletions index.html
    Original 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(1) // sets the font size for the tooltip
    .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
    .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 + ")")
  3. TommyCoin80 revised this gist Jan 17, 2018. No changes.
  4. TommyCoin80 revised this gist Jan 17, 2018. 1 changed file with 8 additions and 3 deletions.
    11 changes: 8 additions & 3 deletions tooltip.js
    Original 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", displayTooltip)
    .on("mouseleave", hideTooltip)
    .on("mousemove", moveTooltip);
    .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)});

    }

  5. TommyCoin80 revised this gist Jan 17, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original 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)})
    .attr("fill", function(d) { return color(d.name)})
    .each(tooltip.events); // attaches the tooltips mouseenter/leave/move events

    svg.append("g")
  6. TommyCoin80 revised this gist Jan 15, 2018. 1 changed file with 49 additions and 67 deletions.
    116 changes: 49 additions & 67 deletions tooltip.js
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    d3.tooltip = function() {

    var frameOfReference = d3.select("svg").select("g"),
    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();

    var output = {
    attachEvents:attachEvents,
    init:init,
    setFrameOfReference:setFrameOfReference,
    setExtent:setExtent,
    setFontSize:setFontSize,
    setMargin:setMargin,
    setPadding:setPadding,
    setTips:setTips
    }
    frameOfReference = context.node()

    function attachEvents() {
    tooltipGroup = context.append("g")
    .style("display","none");

    d3.select(this)
    .on("mouseenter", displayTooltip)
    .on("mouseleave", hideTooltip)
    .on("mousemove", moveTooltip);
    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 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 + "em");

    return output;

    }


    function moveTooltip() {

    updateTranslation();

    tooltipGroup.attr("transform","translate(" + translation[0] + "," + translation[1] + ")");
    }

    function setExtent(x) {

    extent = x || extent;
    return output;
    tooltip.events = function() {

    }
    d3.select(this)
    .on("mouseenter", displayTooltip)
    .on("mouseleave", hideTooltip)
    .on("mousemove", moveTooltip);

    function setFontSize(x) {
    fontSize = x || fontSize;
    return output;
    }

    tooltip.extent = function(_extent){

    function setFrameOfReference(x) {
    extent = _extent || extent;
    return tooltip;

    frameOfReference = x || frameOfReference;
    return output;
    }

    tooltip.fontSize = function(_fontSize) {
    fontSize = _fontSize || fontSize;
    return tooltip;
    }

    function setMargin(x) {
    margin = x || margin;
    return output;

    tooltip.margin = function(_margin) {
    margin = _margin || margin;
    return tooltip;
    }

    function setPadding(x) {
    padding = x || padding;
    return output;
    tooltip.padding = function(_padding) {
    padding = _padding || padding;
    return tooltip;
    }

    function setTips(x,y) {
    tooltip.tips = function(_tips,_tipNames) {

    tips = x || tips;
    tipNames = y || tips;
    return output;
    tips = _tips || tips;
    tipNames = _tipNames || tips;
    return tooltip;

    }

    @@ -144,7 +123,8 @@ d3.tooltip = function() {

    function updateTranslation() {

    var mouseCoordinates = d3.mouse(frameOfReference.node());
    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 output;
    }


    return tooltip;
    }
  7. TommyCoin80 revised this gist Jan 15, 2018. 1 changed file with 15 additions and 12 deletions.
    27 changes: 15 additions & 12 deletions index.html
    Original 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()
    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 tt = d3.tooltip()
    .setFrameOfReference(svg)
    .setExtent([[0,0],[width,height]])
    .setTips(["name","description"],["Bar Name: ","Description: "])
    .setFontSize(1)
    .setPadding([8,4])
    .setMargin([20,20])
    .init();


    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(tt.attachEvents);

    .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>
  8. TommyCoin80 revised this gist Jan 15, 2018. No changes.
  9. TommyCoin80 revised this gist Jan 12, 2018. 1 changed file with 24 additions and 5 deletions.
    29 changes: 24 additions & 5 deletions tooltip.js
    Original 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 = '1em';
    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])
    tooltipText.attr("y", padding[1] - fontSize)
    .selectAll("tspan")
    .data(tips)
    .enter()
    .append("tspan")
    .attr("x",padding[0])
    .attr("dy",fontSize)
    .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);
    .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;
  10. TommyCoin80 revised this gist Jan 12, 2018. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions index.html
    Original 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")
  11. TommyCoin80 revised this gist Jan 12, 2018. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion tooltip.js
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,6 @@ d3.tooltip = function() {
    extent = [[0,0],[960,500]],
    tips = [],
    tipNames = [],
    bBox,
    margin = [10,10],
    padding = [4,4],
    translation = [0,0],
  12. TommyCoin80 revised this gist Jan 12, 2018. 1 changed file with 64 additions and 57 deletions.
    121 changes: 64 additions & 57 deletions tooltip.js
    Original file line number Diff line number Diff line change
    @@ -16,58 +16,52 @@ d3.tooltip = function() {
    tooltipText = d3.select(null);

    var output = {
    displayTooltip:displayTooltip,
    hideTooltip:hideTooltip,
    attachEvents:attachEvents,
    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 attachEvents() {

    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];
    }
    d3.select(this)
    .on("mouseenter", displayTooltip)
    .on("mouseleave", hideTooltip)
    .on("mousemove", moveTooltip);

    if(quad[1] == 1) {
    translation[1] = mouseCoordinates[1] - tooltipDims[1] - margin[1];
    } else {
    translation[1] = mouseCoordinates[1] + margin[1];
    }
    }

    function setFrameOfReference(x) {
    function displayTooltip(d) {

    frameOfReference = x || frameOfReference;
    return output;
    tooltipGroup.style("display",null);

    }
    tooltipText.selectAll("tspan")
    .remove();

    function setExtent(x) {
    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]});

    extent = x || extent;
    return output;
    updateTooltipDims();

    tooltipRect.attr("width", tooltipDims[0])
    .attr("height", tooltipDims[1])

    updateTranslation();

    tooltipGroup.attr("transform","translate(" + translation[0] + "," + translation[1] + ")")

    }

    function setTips(x,y) {
    function hideTooltip() {

    tips = x || tips;
    tipNames = y || tips;
    return output;
    tooltipGroup.style("display","none")

    }

    @@ -96,44 +90,57 @@ d3.tooltip = function() {

    }

    function displayTooltip(d) {
    function moveTooltip() {

    tooltipGroup.style("display",null);
    updateTranslation();

    tooltipText.selectAll("tspan")
    .remove();
    tooltipGroup.attr("transform","translate(" + translation[0] + "," + translation[1] + ")");
    }

    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]});
    function setExtent(x) {

    updateTooltipDims();
    extent = x || extent;
    return output;

    tooltipRect.attr("width", tooltipDims[0])
    .attr("height", tooltipDims[1])
    }

    updateTranslation();
    function setFrameOfReference(x) {

    frameOfReference = x || frameOfReference;
    return output;

    tooltipGroup.attr("transform","translate(" + translation[0] + "," + translation[1] + ")")

    }

    function hideTooltip() {
    function setTips(x,y) {

    tooltipGroup.style("display","none")
    tips = x || tips;
    tipNames = y || tips;
    return output;

    }

    function moveTooltip() {
    function updateTooltipDims() {
    var bb = tooltipText.node().getBBox();
    tooltipDims = [bb.width + padding[0]*2, bb.height + padding[1]*2];
    }

    updateTranslation();
    function updateTranslation() {

    tooltipGroup.attr("transform","translate(" + translation[0] + "," + translation[1] + ")");
    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;
  13. TommyCoin80 revised this gist Jan 12, 2018. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions index.html
    Original 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)})
    .on("mouseenter", tt.displayTooltip)
    .on("mouseleave", tt.hideTooltip)
    .on("mousemove", tt.moveTooltip);
    .each(tt.attachEvents);


    svg.append("g")
    .attr("transform", "translate(0," + height + ")")
  14. TommyCoin80 revised this gist Jan 12, 2018. No changes.
  15. TommyCoin80 revised this gist Jan 12, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original 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()
    var tt = d3.tooltip()
    .setFrameOfReference(svg)
    .setExtent([[0,0],[width,height]])
    .setTips(["name","description"],["Bar Name: ","Description: "])
  16. TommyCoin80 revised this gist Jan 12, 2018. No changes.
  17. TommyCoin80 revised this gist Jan 12, 2018. 1 changed file with 139 additions and 148 deletions.
    287 changes: 139 additions & 148 deletions tooltip.js
    Original file line number Diff line number Diff line change
    @@ -1,149 +1,140 @@
    window.tooltip = (function(d3) {
    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) {

    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;
    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];
    }
    return tooltip;
    }(d3));

    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;
    }
  18. TommyCoin80 revised this gist Jan 11, 2018. No changes.
  19. TommyCoin80 revised this gist Jan 11, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original 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()
    var tt = tooltip()
    .setFrameOfReference(svg)
    .setExtent([[0,0],[width,height]])
    .setTips(["name","description"],["Bar Name: ","Description: "])
  20. TommyCoin80 revised this gist Jan 11, 2018. 1 changed file with 6 additions and 4 deletions.
    10 changes: 6 additions & 4 deletions tooltip.js
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    function toolTip() {
    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];
    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));
  21. TommyCoin80 revised this gist Jan 11, 2018. 1 changed file with 5 additions and 3 deletions.
    8 changes: 5 additions & 3 deletions tooltip.js
    Original 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] + ")")
    .style("display",null);




    }

    @@ -142,4 +143,5 @@ function toolTip() {
    }

    return output;
    }
    }

  22. TommyCoin80 revised this gist Jan 10, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion tooltip.js
    Original 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);

    return output;


    }

  23. Building blocks revised this gist Jan 10, 2018. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  24. TommyCoin80 created this gist Jan 10, 2018.
    1 change: 1 addition & 0 deletions .block
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: mit
    3 changes: 3 additions & 0 deletions README.md
    Original 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)
    85 changes: 85 additions & 0 deletions index.html
    Original 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>
    145 changes: 145 additions & 0 deletions tooltip.js
    Original 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;
    }