Reputation: 43

D3.JS Tool tip with a dot plot

<!DOCTYPE html>
<html lang="en">
    <head>
        <h1>  Amount of money spent on gas in a week vs Distance from work(miles)<h1/> 
        <meta charset="utf-8">
        <title>D3: Labels removed</title>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
        <style type="text/css">

            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }

            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }

            .d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}


        </style>

    </head>
    <body>
        <script type="text/javascript">





            //Width and height
            var w = 1000;
            var h = 610;
            var padding = 50;




            //Static dataset
            var dataset = [
                            [63, 45], [60, 43], [10, 12], [95, 60], [30, 15]
                          ];

            /*
            //Dynamic, random dataset
            var dataset = [];                   //Initialize empty array
            var numDataPoints = 50;             //Number of dummy data points to create
            var xRange = Math.random() * 1000;  //Max range of new x values
            var yRange = Math.random() * 1000;  //Max range of new y values
            for (var i = 0; i < numDataPoints; i++) {                   //Loop numDataPoints times
                var newNumber1 = Math.floor(Math.random() * xRange);    //New random integer
                var newNumber2 = Math.floor(Math.random() * yRange);    //New random integer
                dataset.push([newNumber1, newNumber2]);                 //Add new number to array
            }
            */

            //Create scale functions
            var xScale = d3.scale.linear()
                        .domain([0, 100])         // This is what is written on the Axis: from 0 to 100
                        .range([0, w]); 

            var yScale = d3.scale.linear()
                            .domain([0, 100 ])         // This is what is written on the Axis: from 0 to 100
                        .range([h, 0]); 

            var rScale = d3.scale.linear()
                                 .domain([5, 5])
                                 .range([5, 5]);

            //Define X axis
            var xAxis = d3.svg.axis()
                              .scale(xScale)
                              .orient("bottom")
                              .ticks(5);

            //Define Y axis
            var yAxis = d3.svg.axis()
                              .scale(yScale)
                              .orient("left")
                              .ticks(5);

            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            //Create circles
            svg.selectAll("circle")
               .data(dataset)
               .enter()
               .append("circle")
               .attr("cx", function(d) {
                    return xScale(d[0]);
               })
               .attr("cy", function(d) {
                    return yScale(d[1]);
               })
               .attr("r", function(d) {
                    return rScale(d[1]);
               });

                var tip = d3.tip()
                .attr('class', 'd3-tip')
                .offset([-10, 0])
                .html(function(d) {
                return "<strong>dataset:</strong> <span style='color:red'>" + d.dataset + "</span>";})
                 svg.selectAll("circle")



                   svg.selectAll("circle")
      .data(dataset)
    .enter().append("rect")
      .attr("class", "circle")
      .attr("x", function(d) { return x(d.dataset); })
      .attr("width", 0)
      .attr("y", function(d) { return y(d.dataset); })
      .attr("height", function(d) { return height - y(d.dataset); })
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)





                //X AND Y text
                svg.append("text")
                .attr("class", "y label")
                .attr("text-anchor", "end")
                .attr("x", -175)
                .attr("y", 12)
                .attr("transform", "rotate(-90)")
                .text("Distance from work (Miles) ")
                .attr("font-size",'12pt')
                .attr("font-weight","bold");

                  svg.append("text")
                .attr("class", "y label")
                .attr("text-anchor", "end")
                .attr("x", 700)
                .attr("y", 600)
                .text("Amount of money spent on gas in a week ")
                .attr("font-size",'12pt')
                .attr("font-weight","bold");
            /*
            //Create labels
            svg.selectAll("text")
               .data(dataset)
               .enter()
               .append("text")
               .text(function(d) {
                    return d[0] + "," + d[1];
               })
               .attr("x", function(d) {
                    return xScale(d[0]);
               })
               .attr("y", function(d) {
                    return yScale(d[1]);
               })
               .attr("font-family", "sans-serif")
               .attr("font-size", "11px")
               .attr("fill", "red");
               */

            //Create X axis
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0," + (h - padding) + ")")
                .call(xAxis);

            //Create Y axis
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + padding + ",0)")
                .call(yAxis);


function type(d) {
  d.dataset = +d.dataset;
  return d;


}


        </script>
    </body>
</html>

Hello im trying to add a tool tip to my circles. When I run the code I dont get an error in my console which makes me think that it works but it does not. I think im missing something simple but I am in general not sure. Would really appreciate any help on this issue. the var.tip part is where I think the biggest problem is at

Upvotes: 0

Answers (1)

Mehdi

Reputation: 7403

There are a few problems in the code:

the tooltip plugin should be bound to the data visualization, as documented in the quick usage instructions:

/* Invoke the tip in the context of your visualization */ vis.call(tip)

In your case, svg.call(tip) should be executed before the creation of the circles.

For some reason, the mouseover and mouseout event listeners are attached to some rectangles (classed circle), instead of being attached to the circles.
The tooltips are filled using d.dataset, which is inexistent, hence undefined. Assuming that you want to display the x, y coordinates, d may be used instead.

The snippet below illustrates the fixes.

P.S. You may want to use a more recent version of d3 and of the tooltip plugin, in order to benefit from latest bug fixes and other enhancements.

//Width and height
    			var w = 1000;
    			var h = 610;
    			var padding = 50;
    			
    
    			 
    		
    			//Static dataset
    			var dataset = [
    							[63, 45], [60, 43], [10, 12], [95, 60], [30, 15]
    						  ];
    			
    			//Create scale functions
    			var xScale = d3.scale.linear()
    			            .domain([0, 100])         // This is what is written on the Axis: from 0 to 100
                            .range([0, w]); 
    
    			var yScale = d3.scale.linear()
    			                .domain([0, 100 ])         // This is what is written on the Axis: from 0 to 100
                            .range([h, 0]); 
    
    			var rScale = d3.scale.linear()
    								 .domain([5, 5])
    								 .range([5, 5]);
    
    			//Define X axis
    			var xAxis = d3.svg.axis()
    							  .scale(xScale)
    							  .orient("bottom")
    							  .ticks(5);
    
    			//Define Y axis
    			var yAxis = d3.svg.axis()
    							  .scale(yScale)
    							  .orient("left")
    							  .ticks(5);
    
    			//Create SVG element
    			var svg = d3.select("body")
    						.append("svg")
    						.attr("width", w)
    						.attr("height", h);
    
    
    
    			    var tip = d3.tip()
                    //.attr('class', 'd3-tip')
                    //.offset([-10, 0])
                    .html(function(d) {
                    return "<strong>dataset:</strong> <span style='color:red'>" + d + "</span>";})
                    
                     svg.call(tip)
                     
    			//Create circles
    			svg.selectAll("circle")
    			   .data(dataset)
    			   .enter()
    			   .append("circle")
    			   .attr("cx", function(d) {
    			   		return xScale(d[0]);
    			   })
    			   .attr("cy", function(d) {
    			   		return yScale(d[1]);
    			   })
    			   .attr("r", function(d) {
    			   		return rScale(d[1]);
    			   })
          .on('mouseover', tip.show)
          .on('mouseout', tip.hide)
    
    
    
    
                       svg.selectAll("circle")
          .data(dataset)
        .enter().append("rect")
          .attr("class", "circle")
          .attr("x", function(d) { return x(d.dataset); })
          .attr("width", 0)
          .attr("y", function(d) { return y(d.dataset); })
          .attr("height", function(d) { return height - y(d.dataset); })
    
    
        
    
    
                    //X AND Y text
                    svg.append("text")
    			    .attr("class", "y label")
    			    .attr("text-anchor", "end")
    			    .attr("x", -175)
    			    .attr("y", 12)
    			    .attr("transform", "rotate(-90)")
    			    .text("Distance from work (Miles) ")
    			    .attr("font-size",'12pt')
    			    .attr("font-weight","bold");
    
    			      svg.append("text")
    			    .attr("class", "y label")
    			    .attr("text-anchor", "end")
    			    .attr("x", 700)
    			    .attr("y", 600)
    			    .text("Amount of money spent on gas in a week ")
    			    .attr("font-size",'12pt')
    			    .attr("font-weight","bold");
    		
    		  				
    			//Create X axis
    			svg.append("g")
    				.attr("class", "axis")
    				.attr("transform", "translate(0," + (h - padding) + ")")
    				.call(xAxis);
    			
    			//Create Y axis
    			svg.append("g")
    				.attr("class", "axis")
    				.attr("transform", "translate(" + padding + ",0)")
    				.call(yAxis);
    
    				
    function type(d) {
      d.dataset = +d.dataset;
      return d;
    				
    
    }

.axis path,
    			.axis line {
    				fill: none;
    				stroke: black;
    				shape-rendering: crispEdges;
    			}
    			
    			.axis text {
    				font-family: sans-serif;
    				font-size: 11px;
    			}
    
    			.d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }

<script src="https://d3js.org/d3.v3.min.js"></script>
    		<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

Upvotes: 1

D3.JS Tool tip with a dot plot

Answers (1)

Related Questions