To visualise a large amount of data points +9000 markers I am switching from Plotly.js 'scatter' type to 'scattergl'.
I use react-plotly.js, and the change from 'scatter' to 'scattergl' almost works. Everything is rendered fine except the markers itself. The axes, hover indications, zoom controls, ... all work.
The screenshots show the difference. Documentation about scattergl is hard to find, but am I just missing some gl specific configuration?
My code to calculate the traces:
const plotData: Partial<PlotData> = {
type: 'scattergl',
mode: 'lines+markers',
x: [...],
y: [...],
};
After a long bug hunt, the solution/bug ended up being a z-index fight. I rendered the plot inside a Leaflet popup which had a canvas z-index definition set. Overriding this solved my render issue.
Related
Take a look at this simple demo project I grabbed from their site:
https://ecomfe.github.io/echarts-examples/public/editor.html?c=dynamic-data2
Only thing I changed is the value of showSymbol. From false to true. So you can see the little dots on the line and how they slowly grow until they reach their final size. Since I can't save my own version of this demo you'll have to do so aswell to see what I mean.
There is a property called animation for series. This will in fact disable the grow animation, but will also disable all other animations connected with this series. For example the smooth transition to the left when new datapoints are added.
I don't want to hide the markers. I want them there, but without that animation.
Does anyone know of a way to achive this?
series: [{
name: '模拟数据',
type: 'line',
showSymbol: true,
hoverAnimation: false,
data: data,
animation: false
}],
animation: true
This can help disable the item animation while keeping animation of the X axis. But I'm afraid there's nothing more we can do with the line animation.
I've been working with Jason Davies' Rotate the World and World Countries examples and incorporating a few other bits and pieces to learn about d3.
An example of what I have come up with so far is here.
The small selector in the top left corner will trigger a new 'trip' to be displayed on the globe and the centroid of the trip will be centered in view. This all works well, as does panning and zooming on the globe with the mouse.
However, there's an issue with the present implementation when one zooms in/out, alters the visible trip, then attempts to pan/zoom again: the zoom defaults back to the level it was before the trip change - resulting in a zoom 'jump' I'd like to remove [To see this behaviour, load my MNWE, zoom in with the mouse wheel perhaps 3 times, click the OK button to load 'J07', click on the globe holding the mouse button down and pan a bit - you'll see the jump I'm referring to.].
I'm pretty sure it's just me not updating the scale of my projection correctly, but I don't know enough to troubleshoot further. Jason has implemented a d3.geo.zoom function, which probably should be capable of fixing the issue. My attempt was to call it in my $("#sub").on("click" ... call via:
d3.select("#map").call(d3.geo.zoom().projection(proj).scale(a/2-10).on("zoom.redraw", function() {
d3.select(this).selectAll("path").attr("d", d3.geo.path().projection(proj));
}));
but that gave spurious results after the fact as well.
Lines 344 and 346:
var sc = d3.interpolate(proj.scale(), a / 2 - 10); //344
return function(i) {
proj.rotate(interp(i)).scale(sc(i)); //346
d3.select("#map").selectAll("path").attr("d", d3.geo.path().projection(proj));
//r.world();
};
are probably where I introduce the bug, as the rotation portion works without issue, it's only the scale additions that cause problems.
This can be solved by defining the zoom behavior in global scope.
m = d3.behavior.zoom();
Then update the zoom behavior with the scale in the transition as shown below this will stop the jump effect you have.
d3.transition().delay(250).duration(2250)
.tween("rotate", function() {
interp.source(proj.rotate()).target(coords).distance();
var sc = d3.interpolate(proj.scale(), a / 2 - 10);
return function(i) {
proj.rotate(interp(i)).scale(sc(i));
m.scale(sc(i));//update the zoom in the zoom behavior this will sop the jumping effect
d3.select("#map").selectAll("path").attr("d", d3.geo.path().projection(proj));
//r.world();
};
});
Working code here
Hope this helps.
I am using highcharts in my app and it has a problem which is: when I scroll the pointer to point in a different place in the chart the whole chart is scrolled while the point still in its position.
For more explanation please try this link in browser and mobile:
http://www.highcharts.com/stock/demo/basic-line
I just need the mobile behave as the browser behaviour.
You need to disable panning and pinchType.
chart: {
panning: false,
pinchType: false
}
Example: http://jsfiddle.net/bL4bqcLv/3/
I think what I am asking is impossible, or at least so complex/hacky it would not be worth it-but in case I am wrong...please let me know.
I have a series of 4 kendo dataviz bar charts, each representing the same set of objects, each chart graphically displaying one property of the objects. What I would like is if a marker on one chart is clicked (so that object is "selected"), to highlight this object's marker on the other 3 charts. See pic for example:
I have looked through the Kendo Dataviz website/docs, inspected the SVG markup, and looked through the object returned on the series click (in Visual Studio), but haven't found anything that could be used to accomplish this. The one thing I have come up with is redrawing all the charts with the selected item "marked" within the data array so when it is redrawn, that item can be redrawn with a different color...but I'd like to avoid redrawing all the charts each time, if possible.
Does anyone have any suggestions? I would greatly appreciate ideas, the least complex the better. Thanks so much!
The closest way I know of achieving this without a redraw would be to use the axis selection property as a selection slider with a restricted width to one column range and prevent resizing. This would simulate a selection highlight without redrawing.
You can also use plotBands property on the CategoryAxis. This is how I am doing it:
$("#chart").data("kendoChart").setOptions({ categoryAxis: { plotBands: [{ from: index, to: index + 1, color: "#ffd0c0", opacity: 0.4 }] } });
Does anyone know how to use the Pixastic plugin and jQuery to where I could have an image fade from color to completely desaturated?
I am trying to avoid saving out two images and fading one out..
i did the inverse... having desaturated images fade in to color. achieved w/ only 1 image in conjuction w/ pixastic and livequery. i basically cloned the images, desaturated one of the copies, and stacked them on top of each other.... fading the top (desaturated) layer out on hover. i'm sure it could be more elegant, but it mostly works. you can see the effect at chicagointerhandball.org on all the "sponsor" logos
$('.sponsors').load(function() {
$('.sponsors').pixastic("desaturate");
}).each(function(index) {
var clone = $(this).clone().removeClass('sponsors').addClass('sponsors-color').css('opacity',.25);
$(this).parent().append(clone);
});
$('.sponsors-color').livequery(function(){
// use the helper function hover to bind a mouseover and mouseout event
$(this).hover(function() {
$(this).stop().animate({"opacity": 1});
}, function() {
$(this).stop().animate({"opacity": 0});
});
}, function() {
// unbind the mouseover and mouseout events
$(this)
.unbind('mouseover')
.unbind('mouseout');
});
Since all those pixastic image effects are generated on the fly I don't think it would be feasible to fade between saturated and desaturated. The saturation level of the image would have to be redrawn at each step of the fade. Your best bet would probably be to have two images, one saturated and one desaturated, and have them placed on top of one another. Then when you hover over one, fade in the other image.
Edit:
Just saw that you were trying to avoid having two images. Well, that's the only solution I can think of but I'd love to see if there were others. Depending on how many images there are, you could generate all the desaturated images on page load, place them on top of saturated images, hide them, and then fade them in on hover. Just a possibility.
you could get the best of both worlds by dynamically creating a duplication and desaturating that image with pixastic. Position the new desaturated image under the original and fade the original out.
You should be able to, it is in their jQuery documentation section.
// convert all images with class="photo" to greyscale
$(".photo").pixastic("desaturate");
Looks like this is possible with the canvas element.
With this you need to mix jQuery and the standard DOM calls. I was having the same issue just today about this. I couldn't get the hover to work cross platform from the examples given here and on their site. So I decided to think for myself on this one. Came up with a solution, hope it works for you:
http://you.arenot.me/2012/03/26/pixastic-desaturate-on-mouseover-mouseenter-mouseleave/