change hover display in scatterplot

[ssridhar21]

Hello,

I was wondering how to change the hover text for points on a nPlot scatterplot? Also my plot defaults to points being in blue shades. I was wondering how to change this? Any input would be greatly appreciated!

Thanks, Sri

[timelyportfolio]

For hover customization, see if this discussion helps. If you are familiar with chrome devtools, you can set some breakpoints and see what is supplied and can be changed. Let me know if still unclear.

For colors, this discussion with this live example might help.

[ramnathv]

Thanks for digging out the links @timelyportfolio. I am not thinking that it might be a good idea to create a tagged list of useful examples/discussions that have already been posted. Thoughts?

[timelyportfolio]

I could see a lot of value in that. Something like a FAQ or How do I? with your fancy rCharts viewer live edit plugged in. Trick will be making it prominent enough. My guess is repetition will help make it known.

[timelyportfolio]

@ssridhar21, were you able to get it to work?

[ssridhar21]

Sorry for the delayed response. I more or less got it to work but had a couple of additional questions. 1) The tooltipContent function worked great, but I was still seeing the default x/y mouseover values near the axes. Is there a way to disable this display? 2) If I wanted to include any additional information from the data frame in the tooltipContent function, how to I reference it? 3) Is there a way to change the color of points without grouping? e.g. If I make a scatterplot without grouping points by another attribute

Thanks again @ramnathv and @timelyportfolio for the extremely helpful suggestions.

[timelyportfolio]

I put this example quickly to demonstrate the answers. live example & code

disable tooltips on x and y axis

p2$chart( tooltipXContent = NA, tooltipYContent = NA)

include additional information in tooltip

This can be accessed through the graph argument to the tooltipContent function. Here is an ugly way showing all the values in graph.point. These could easily be styled with html and css.

p2$chart(
    tooltipContent = '#! function(x,y,e,graph){
      return d3.entries(graph.point).map(function(key){
            return key.key +  \': \' +  key.value;
        }).join(\',\');
    } !#'
)

change color without grouping

Not that I know of directly with nvd3, but this could be achieved after we draw the nvd3 chart through d3.selectAll(...).style("fill",...).

[ramnathv]

@timelyportfolio Nice use of the online playground to show live examples. I need to think of a way to display a README.md and other details so that you can share more than just code.

[ssridhar21]

Thanks @timelyportfolio and @ramnathv for this great feedback. I've been exploring other plots within rCharts as well and have been getting more familiar with them. I recently started playing with the correlation matrix plot (http://rcharts.io/viewer/?7073094#.U0bNA_ldWSo) and had a similar question about tooltipContent... with scatterplots you've used $chart and set up a tooltip function. To change tooltip content with the correlation matrix, would we do something similar?

Specifically, I want to change the # of decimal places of the R value being displayed, since my matrix is highly correlated. Also I was wondering the best way to customize the legend content as well.

Thanks again for all the great feedback!

[patilv]

@ssridhar21 : That correlation matrix example was generated using polycharts. It was tweaked from a heatmap example that @ramnathv had created some where.

1. If I had to do it, would generate the correlations such that they are restricted to two decimals (http://stackoverflow.com/questions/5453109/how-to-round-all-values-in-a-matrix)
2. A discussion on tooltip customization and an example for polycharts can be found here: https://github.com/ramnathv/rCharts/issues/77

[ssridhar21]

Thanks for the suggestion @patilv... Normally I would round, but I wanted to display to 5 decimals. I think the default tool tip only displays 2.

[timelyportfolio]

Thanks so much for jumping in @patilv. Your example is very nice. I'm glad it found new life.

I hate to be mistaken for a dimple salesperson, but its licensing, feature set, and activity is very encouraging.

I put this simple example together if nothing else for a comparison. The tooltips are much more customizable but require JS. I'm happy to put a template together if someone wants to nudge me in that direction.

rCharts viewer, code

Just for someone searching github issues, I'll also paste the code below.

#forked from https://gist.github.com/patilv/7073094

library(rCharts)
library(reshape2)
findata=read.csv("https://raw.github.com/patilv/rChartsTutorials/master/findata.csv")
# These are data regarding NCAA athletic department expenses at public universities. Please see the blog post where these charts were originally used 
# regarding more details on the origins of these data.: http://analyticsandvisualization.blogspot.com/2013/10/subsidies-revenues-and-expenses-of-ncaa.html
findata=findata[,-c(1:3)] # removing first dummy column - the csv quirk - second column on Rank, and third column on School. Retaining only numeric vars here
corrmatrix<-cor(findata) #store corr matrix
# The following steps are generic and can all be placed in a function with some tweaks to customize output 
corrdata=as.data.frame(corrmatrix)
corrdata$Variable1=names(corrdata)
corrdatamelt=melt(corrdata,id="Variable1")
names(corrdatamelt)=c("Variable1","Variable2","CorrelationCoefficient")
corrmatplot = dPlot(
  Variable2 ~ Variable1
  ,z = "CorrelationCoefficient"
  ,data = corrdatamelt
  ,type = 'bubble'
  ,height = 350
  ,width = 500
  ,bounds = list( x = 150, y = 50, width = 330, height = 200)
)
corrmatplot$yAxis ( type= "addCategoryAxis" )
corrmatplot$zAxis (
  type= "addMeasureAxis"
  , outputFormat = "0.5f"
  , overrideMin = -1
  , overrideMax = 1
)
corrmatplot$colorAxis(
  type = "addColorAxis"
  ,colorSeries = 'CorrelationCoefficient'
  ,palette = c('red','white','blue')
)
corrmatplot

[timelyportfolio]

Also, should add that type = "bar" will work in the above example. We just then have to manually create the tooltip which again is not hard, but I need a nudge.

[patilv]

@timelyportfolio: This is cool. What would you need in terms of a nudge, besides the promise of a beer whenever we meet? Dimple is great. Going back to a conversation for another issue, there are multiple ways to implement the same chart using different libraries supported by rCharts. The catch is whether there should be a focus on specific ones like dimple or nvd3 and highcharts where there is better documentation. As soon as this semester is over, I am planning on checking the package out further and start my documentation for a class on visualization I am teaching in the fall. Dimple will be my first.

[ramnathv]

@patilv This is the same discussion that I was having with @timelyportfolio. My take is to prioritize dimplejs, nvd3, morrisjs and rickshaw since they are open source and free-to-use libraries. The next set would be polycharts and highcharts. I will be putting together a template for documenting a library so that there is consistency in the documentation. It will be awesome if you can help, given that you have worked with most of the libraries in rCharts.

[patilv]

@ramnathv and @timelyportfolio : Most definitely.Please do let me know when you have this template ready.

[patilv]

@ssridhar21 : The example @timelyportfolio provided with dimple takes care of the number of decimal points issue. Unless you "really love" polycharts and can't live with dimple, that might be an good solution to your issue.

[timelyportfolio]

ok, I have been nudged. I hope to have a least something by tomorrow but doubt it will be in finished form.

[timelyportfolio]

See my stupidity in dimplejs issue68. I just missed that tickFormat in dimplejs or outputFormat in rCharts works with a color axis just like it does with x, y, and z. Simple enough change to the chart template in the pulled dimple_layer branch, and we can do both bar and bubble with the formatting we expect. I updated the original example and added a bar example.

I am still thinking this can be improved. Not sure I'll finish before bedtime.

[timelyportfolio]

As promised, not real proud of it and not impressive but something. This should provide a template for nearly infinite customization. Here is the example with a custom tooltip.

To recreate any of these, see the code here.

[patilv]

@timelyportfolio: This is really cool. I noticed that the issue description of "change hover display in scatterplot" does not do justice to the examples laid out here (discussion on heatmap/correlation matrix in polycharts, conversion to dimple with bubbles and bars, as well as tooltip customization. It really might be useful to buildup on the FAQ or "How do I idea" that @ramnathv and you were discussing earlier in this issue.

[timelyportfolio]

Good thought @patilv . Although this is not a "How do I", I made a live example using real financial data here.

[patilv]

@timelyportfolio: That is terrific. dimple all the way.