Using code from a previous post I was able to add a search bar that highlights specific points on a scatter plot in plotly using R, which worked well in 2 dimensions. However, I have now produced a 3 dimensional plot with the same data and the code for the search bar no longer works. Is it possible to have a search bar in a 3 dimensional plot, and if so is there a way to alter the following code to achieve that?
p <- plot_ly(carsDf, x = ~Comp.1 , y = ~Comp.2, text = rownames(carsDf),
mode = "markers", color = ~cluster_name, marker = list(size = 11), type = 'scatter', mode = 'markers')
p <- htmlwidgets::appendContent(p, htmltools::tags$input(id='inputText', value='Merc', ''), htmltools::tags$button(id='buttonSearch', 'Search'))
p <- htmlwidgets::appendContent(p, htmltools::tags$script(HTML(
'document.getElementById("buttonSearch").addEventListener("click", function()
{
var i = 0;
var j = 0;
var found = [];
var myDiv = document.getElementsByClassName("js-plotly-plot")[0]
var data = JSON.parse(document.querySelectorAll("script[type=\'application/json\']")[0].innerHTML);
for (i = 0 ;i < data.x.data.length; i += 1) {
for (j = 0; j < data.x.data[i].text.length; j += 1) {
if (data.x.data[i].text[j].indexOf(document.getElementById("inputText").value) !== -1) {
found.push({curveNumber: i, pointNumber: j});
}
}
}
Plotly.Fx.hover(myDiv, found);
}
);')))
htmlwidgets::saveWidget(p, paste('pca', ".html", sep=""))
p
Thanks
Related
Goal:
In my plot, I would like to have different colors for the border and the area of an area band. The plot was created with echarts4r using the e_band2() function.
Problem:
In the documentation I read that area bands can be customized through the itemStyle argument of the function. This works fine for all the other options (borderWidth, borderType, shadowBlur, shadowColor) I tested, but not for borderColor. However, the borderColor option seems to work at least partially, because the symbol in the legend has the desired border color, but not the area band in the plot. Does anyone know if there is another way to change the border color or is this a bug?
Reprex:
library(echarts4r)
library(dplyr)
data(EuStockMarkets)
as.data.frame(EuStockMarkets) |>
dplyr::slice_head(n = 200) |>
dplyr::mutate(day = 1:dplyr::n()) |>
e_charts(day) |>
e_band2(DAX, SMI, itemStyle = list(
borderWidth = 1,
color = "green",
borderColor = "red"
)) |>
e_y_axis(scale = TRUE)
For some reason, it's hardcoded to ignore your style settings for the stroke color (in SVG, that's the lines) by echarts4r.
However, you can change it back.
I've taken the code from the echarts4r package for the JS function renderBand and modified it to use the settings that are defined in the plot call (which is what you wanted and expected).
Note that I've made this a string.
renderBands2 <- "
function renderBands2(params, api) {
if (params.context.rendered) return;
params.context.rendered = true;
/* set polygon vertices */
let points = [];
let i = 0;
while (typeof api.value(0,i) != 'undefined' && !isNaN(api.value(0,i))) {
points.push(api.coord([api.value(0,i), api.value(1,i)])); /* lo */
i++;
}
for (var k = i-1; k > -1 ; k--) {
points.push(api.coord([api.value(0,k), api.value(2,k)])); /* up */
}
return {
type: 'polygon',
shape: {
points: echarts.graphic.clipPointsByRect(points, {
x: params.coordSys.x, y: params.coordSys.y,
width: params.coordSys.width, height: params.coordSys.height
})}, style: api.style()
};
}"
Apply this to your plot with htmlwidgets::onRender. This calls for the plot to be re-rendered with this new function for the data series.
as.data.frame(EuStockMarkets) |>
dplyr::slice_head(n = 200) |>
dplyr::mutate(day = 1:dplyr::n()) |>
e_charts(day) |>
e_band2(DAX, SMI, itemStyle = list(
borderWidth = 1, color = "green", borderColor = "red")) |>
e_y_axis(scale = TRUE) %>%
htmlwidgets::onRender(paste0(
"function(el, data) {
", renderBands2,
"
chart = get_e_charts(el.id);
opts = chart.getOption();
opts.series[0].renderItem = renderBands2;
chart.setOption(opts, true); /* all better! */
}"))
I have a MapChart of the world with no color (grey by default for countries and white for the oceans):
My code:
var container = am4core.create("concatChart", am4core.Container);
container.width = am4core.percent(100);
container.height = am4core.percent(100);
this.mapChart = container.createChild(am4maps.MapChart);
this.mapChart.geodata = am4geodata_continentsHigh;
this.mapChart.projection = new am4maps.projections.Miller();
var polygonSeries = this.mapChart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
I added some colors by adding these lines to my code :
this.mapChart.backgroundSeries.mapPolygons.template.polygon.fill = am4core.color("#91c2dc");
this.mapChart.backgroundSeries.mapPolygons.template.polygon.fillOpacity = 1;
polygonSeries.mapPolygons.template.fill = am4core.color("#FFFFFF");
polygonSeries.mapPolygons.template.strokeOpacity = 0;
but it is actually bugged, it seems like the world map is cut:
https://stackblitz.com/edit/am-charts-emkfjj?file=src/app/app.component.ts
I added more information in the code.
I would like to change the shape and size of the clicked point in the below plot. How to achieve it? For this toy plot, I have reduced the number of points from original 100k to 2k. So, the expected solution should be highly scalable and do not deviate from the original plot i.e., all the colors before and after the update of the click point should be the same.
library(shiny)
library(plotly)
df <- data.frame(X=runif(2000,0,2), Y=runif(2000,0,20),
Type=c(rep(c('Type1','Type2'),600),
rep(c('Type3','Type4'),400)),
Val=sample(LETTERS,2000,replace=TRUE))
# table(df$Type, df$Val)
ui <- fluidPage(
title = 'Select experiment',
sidebarLayout(
sidebarPanel(
checkboxGroupInput("SelType", "Select Types to plot:",
choices = unique(df$Type),
selected = NA)
),
mainPanel(
plotlyOutput("plot", width = "400px"),
verbatimTextOutput("click")
)
)
)
server <- function(input, output, session) {
output$plot <- renderPlotly({
if(length(input$SelType) != 0){
df <- subset(df, Type %in% input$SelType)
p <- ggplot(df, aes(X, Y, col = as.factor(Val))) +
geom_point()
}else{
p <- ggplot(df, aes(X, Y, col = as.factor(Val))) +
geom_point()
}
ggplotly(p) %>% layout(height = 800, width = 800)
})
output$click <- renderPrint({
d <- event_data("plotly_click")
if (is.null(d)) "Click events appear here (double-click to clear)"
else cat("Selected point associated with value: ", d$Val)
})
}
shinyApp(ui, server)
A related question has been asked here, but that approach of highlighting the point with a color does not work(when the number of levels of a variable is high, it is difficult to hard code a color which might be already present in the plot).
Plotly's restyle function won't help us here but we can still use the onclick event together with a little bit of JavaScript. The code has acceptable performance for 10,000 points.
We can get the point which was clicked on in JavaScript using:
var point = document.getElementsByClassName('scatterlayer')[0].getElementsByClassName('scatter')[data.points[0].curveNumber].getElementsByClassName('point')[data.points[0].pointNumber];
(scatterlayer is the layer where all the scatterplot elements are located,
scatter[n] is the n-th scatter plot and point[p] is the p-th point in it)
Now we just make this point a lot bigger (or whatever other shape/transformation you want):
point.setAttribute('d', 'M10,0A10,10 0 1,1 0,-10A10,10 0 0,1 10,0Z');
In order to get the possibility to revert everything, we store the unaltered info about the point together with the rest of the Plotly information:
var plotly_div = document.getElementsByClassName('plotly')[0];
plotly_div.backup = {curveNumber: data.points[0].curveNumber,
pointNumber: data.points[0].pointNumber,
d: point.attributes['d'].value
}
and later we can restore the point:
var old_point = document.getElementsByClassName('scatterlayer')[0].getElementsByClassName('scatter')[plotly_div.backup.curveNumber].getElementsByClassName('point')[plotly_div.backup.pointNumber]
old_point.setAttribute('d', plotly_div.backup.d);
Now we can add all the code to the plotly widget.
javascript <- "
function(el, x){
el.on('plotly_click', function(data) {
var point = document.getElementsByClassName('scatterlayer')[0].getElementsByClassName('scatter')[data.points[0].curveNumber].getElementsByClassName('point')[data.points[0].pointNumber];
var plotly_div = document.getElementsByClassName('plotly')[0];
if (plotly_div.backup !== undefined) {
var old_point = document.getElementsByClassName('scatterlayer')[0].getElementsByClassName('scatter')[plotly_div.backup.curveNumber].getElementsByClassName('point')[plotly_div.backup.pointNumber]
if (old_point !== undefined) {
old_point.setAttribute('d', plotly_div.backup.d);
}
}
plotly_div.backup = {curveNumber: data.points[0].curveNumber,
pointNumber: data.points[0].pointNumber,
d: point.attributes['d'].value,
style: point.attributes['style'].value
}
point.setAttribute('d', 'M10,0A10,10 0 1,1 0,-10A10,10 0 0,1 10,0Z');
});
}"
[...]
ggplotly(p) %>% onRender(javascript)
Alternatively you could make a new SVG element based on the location of the clicked point but in the color and shape you would like.
You can try it here without R/Shiny.
//create some random data
var data = [];
for (var i = 0; i < 10; i += 1) {
data.push({x: [],
y: [],
mode: 'markers',
type: 'scatter'});
for (var p = 0; p < 200; p += 1) {
data[i].x.push(Math.random());
data[i].y.push(Math.random());
}
}
//create the plot
var myDiv = document.getElementById('myDiv');
Plotly.newPlot(myDiv, data, layout = { hovermode:'closest'});
//add the same click event as the snippet above
myDiv.on('plotly_click', function(data) {
//let's check if some traces are hidden
var traces = document.getElementsByClassName('legend')[0].getElementsByClassName('traces');
var realCurveNumber = data.points[0].curveNumber;
for (var i = 0; i < data.points[0].curveNumber; i += 1) {
if (traces[i].style['opacity'] < 1) {
realCurveNumber -= 1
}
}
data.points[0].curveNumber = realCurveNumber;
var point = document.getElementsByClassName('scatterlayer')[0].getElementsByClassName('scatter')[data.points[0].curveNumber].getElementsByClassName('point')[data.points[0].pointNumber];
var plotly_div = document.getElementsByClassName('plotly')[0];
if (plotly_div.backup !== undefined) {
var old_point = document.getElementsByClassName('scatterlayer')[0].getElementsByClassName('scatter')[plotly_div.backup.curveNumber].getElementsByClassName('point')[plotly_div.backup.pointNumber]
if (old_point !== undefined) {
old_point.setAttribute('d', plotly_div.backup.d);
}
}
plotly_div.backup = {curveNumber: data.points[0].curveNumber,
pointNumber: data.points[0].pointNumber,
d: point.attributes['d'].value,
style: point.attributes['style'].value
}
point.setAttribute('d', 'M10,0A10,10 0 1,1 0,-10A10,10 0 0,1 10,0Z');
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv">
I am trying to increase the font size of the x and y axis in the plot created using
NVD3 and rCharts. Here is my code for the plot. Any help is appreciated.
n1 <- nPlot(pValues~Chr,data=dat,type="scatterChart",height=400,width=750)
n1$chart(tooltipContent= "#! function(key, x, y, e){
return '<b>ID:</b> ' + e.point.ID
} !#")
n1$chart(forceY = c(0,8))
n1$chart(forceX = c(0,10))
#n1$chart(color = '#! function(d){return d.pValues} !#')
n1$xAxis(axisLabel = 'Chromosome')
n1$yAxis(axisLabel = '-log P value')
Actually, I think I discovered a solution thanks to this stack overflow discussion. Let me know if it works for you. Change the font-size to whatever you would like. You could also provide a full set of CSS to change style, location, color, etc.
dat <- data.frame(
pValues = runif(20,0,5),
Chr = 1:20,
ID = sample(LETTERS[1:20])
)
n1 <- nPlot(pValues~Chr,data=dat,type="scatterChart",height=400,width=750)
n1$chart(tooltipContent= "#! function(key, x, y, e){
return '<b>ID:</b> ' + e.point.ID
} !#")
n1$chart(forceY = c(0,8))
n1$chart(forceX = c(0,10))
#n1$chart(color = '#! function(d){return d.pValues} !#')
n1$xAxis(axisLabel = 'Chromosome')
n1$yAxis(axisLabel = '-log P value')
n1
n1$setTemplate(afterScript = '<script>
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".nv-axislabel { font-size: 15px; }";
document.body.appendChild(css);
</script>'
)
n1
n1$chart(margin = list(left=100))
n1
### as stated in comments, x is basically unworkable but this kind of works
n1$xAxis(
axisLabel = 'Chromosome'
,tickFormat = "#!function(d){return d + " " }!#" #add space to the number
,rotateLabels=90 #rotate tick labels
)
n1$setTemplate(afterScript = '<script>
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".nv-x .nv-axislabel { font-size: 50px; }";
document.body.appendChild(css);
css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".nv-y .nv-axislabel { font-size: 50px; }";
document.body.appendChild(css);
</script>'
)
n1$chart(margin=list(left=100,bottom=100))
n1
In ZedGraph, how do I show text labels for each point and in the XAxis all together?
If I do
myPane.XAxis.Type = AxisType.Text;
myPane.XAxis.Scale.TextLabels = array_of_string;
I get labels on the XAxis like this
And if I do
for (int i = 0; i < myCurve.Points.Count; i++)
{
PointPair pt = myCurve.Points[i];
// Create a text label from the Y data value
TextObj text = new TextObj(
pt.Y.ToString("f0"), pt.X, pt.Y + 0.1,
CoordType.AxisXYScale, AlignH.Left, AlignV.Center);
text.ZOrder = ZOrder.A_InFront;
text.FontSpec.Angle = 0;
myPane.GraphObjList.Add(text);
}
I get labels on the curve, like this
But if I do both at the same time, labels on the curve disappear.
Is there a way to combine both kind of labels?
I've changed my answer after you clarified the question.
You just have to remember to position the labels correctly:
<%
System.Collections.Generic.List<ZedGraphWebPointPair> points = new System.Collections.Generic.List<ZedGraphWebPointPair>();
for (int i = 0; i < 15; i++)
{
// Let's have some fun with maths
points.Add(new ZedGraphWebPointPair
{
X = i,
Y = Math.Pow(i - 10, 2) * -1 + 120
});
}
System.Collections.Generic.List<string> XAxisLabels = new System.Collections.Generic.List<string>();
TestGraph.CurveList.Add(new ZedGraphWebLineItem { Color = System.Drawing.Color.Red });
TestGraph.XAxis.Scale.FontSpec.Size = 9;
int j = 1;
foreach (ZedGraphWebPointPair point in points)
{
// Add the points we calculated
TestGraph.CurveList[0].Points.Add(point);
// Add the labels for the points
TestGraph.GraphObjList.Add(new ZedGraphWebTextObj
{
Location =
{
CoordinateFrame = ZedGraph.CoordType.XChartFractionYScale,
// Make sure we position them according to the CoordinateFrame
X = Convert.ToSingle(j) / points.Count - 0.05f,
Y = Convert.ToSingle(point.Y) + 3f,
AlignV = ZedGraph.AlignV.Top
},
Text = point.Y.ToString(),
FontSpec = { Angle = 90, Size = 9, Border = { IsVisible = false } }
});
// Add the labels for the XAxis
XAxisLabels.Add(String.Format("P{0}", j));
j++;
}
TestGraph.RenderGraph += delegate(ZedGraphWeb zgw, System.Drawing.Graphics g, ZedGraph.MasterPane mp)
{
ZedGraph.GraphPane gp = mp[0];
gp.XAxis.Type = ZedGraph.AxisType.Text;
gp.XAxis.Scale.TextLabels = XAxisLabels.ToArray();
};
%>
That code will produce this graph:
If the axis type is text, the code below is easier to get x-coordinates of the points ;)
for (int tPoint = 0; tPoint < curve.Points.Count; tPoint++)
{
TextObj text = new TextObj(curve.Points[tPoint].Y.ToString(), curve.Points[tPoint].X, curve.Points[tPoint].Y + 10);
}