I am working on a project where I have to create a scatterplot with genes denoted by dots. Since there are a lot of genes (20k), they get clustered and are stacked often, even after brushing and zooming in on the brush.
To allow the user to separate them a bit better, I want to implement D3's FishEye plugin, preferably the Cartesian. I implemented the example, but the points are flying outside the screen. My guess is that this happens because if you brush (and zoom in), the scales and axes are updated.
How can I make my FishEye adhere to the current domain of the axes in terms of the distortion range and how can I make the points translate correctly (and not fly outside the screen) ? I have already tried something with the min and maximum x-values, but that doesn't work either.
Related
I want to make a timeline where the user can choose between scrolling to zoom or select a region to zoom.
There are some examples of the first like:
https://bl.ocks.org/mbostock/4015254
Or zooming in on a area with brush:
https://bl.ocks.org/mbostock/f48fcdb929a620ed97877e4678ab15e6
But I cannot find an example that does both. How can I do both? Or are there any examples that I missed?
This is not the most straightforward thing to implement. As you will notice, the brush based zooming does not rely on d3.zoom but instead performs the zooming via listeners that fire on events to do whatever is needed to scale the axes and move the plot elements accordingly.
In comparison, all the scrolling based zoom examples typically rely on d3.zoom which utilizes a d3.zoom() behavior that keeps track of all the transforms performed on the plot while panning/zooming and is solely responsible for updating the various chart elements. The difficulty lies in the fact that the 2 approaches are quite different and if you manually change the chart view via brushing, you need to figure out a way to update the internal zoom transform that d3.zoom references so that it is aware of the changes made via the brush based zoom events.
This is not at all easy to do because d3.zoom was not designed to be fed information from elsewhere and the internal record of transforms that were performed are not meant to be updateable/mutable. You can update the transform via selection.call(zoom.transform, d3.zoomIdentity); but that unfortunately also fires a whole bunch of events related to the actual zoom behavior, which is not something you want since you already handled all the zoom behavior with your brush based zoom. An ugly, but effective workaround that I was able to use to reset the zoom transform was to mutate the actual .__zoom field of the DOM node that is bound to the d3.zoom behavior as follows:
// WARNING: Ugly mutation of __zoom property of pan/scroll-zoom rect to
// reset the transform without having to fire events associated with zoom
// d3.select(".zoom").node().__zoom = {k: 1, x: 0, y: 0}; <-- Fails since __zoom contains other hidden objects
scrollZoom.node().__zoom["k"] = 1;
scrollZoom.node().__zoom["x"] = 0;
scrollZoom.node().__zoom["y"] = 0;
So for example: If you want a 2D brush for rectangle zooming, but also d3.zoom based zooming for panning and mouse-scrolling, then anytime you use the 2D brush to zoom, you will want to reset the d3.zoom transform back to the identity transform as above. This prevents and ugly and jarring jitter in panning/scrolling response when chaining 2D brush based zooming actions with panning/mouse-scrolling actions due to the transform on record with d3.zoom not being in-sync with the view on display (due to the 2D brush based zoom changing the view without d3.zoom's knowledge).
Here is something else that is important to note:
d3.zoom has a limitation in that it currently only supports a common zoom scale for both X and Y axes (Source). This unfortunately means that there is no way to map a 2-D brush based zoom to a d3.zoom based approach since 2D brush based zooming produces different zoom scaling in X and Y. If you want to do things with minimal issues, using a consistent approach, I'd recommend looking into using d3.xyzoom. This is a fork of d3.zoom that implements support for different scales for X and Y axes. This would enable you to calculate the corresponding X and Y zoom scaling and translation values for any 2D brush selection, which you could then feed into d3.zoom, thus enabling you to perform all the zooming using a common approach (which also results in the least amount of code duplication).
That being said, if you are solely interested in a 1-D brush based zoom, you should be able to map that to a d3.zoom approach so that you don't have to deal with 2 different paths for handling the view and scaling of all the axes and other graphical elements in your chart. Here is a good example of this:
https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172
I apologize for the length of this post and if it is a bit rambling. I am working on putting together a block on my work in a couple of days and I'll try to circle back here and post a link when I get around to doing so. I only started learning D3 a week ago, so I'm learning along the way.
Is there a way to create a horizontal bar chart (or modify the row chat)?
The row chart does almost what I want, however I want the y axis to be a continuous variable and it seems the row chart defines the y axis in terms of discrete/ordinal variables.
I was also thinking about rotating the svg with d3. (Rotating the whole div worked, however the brush effect did not rotate too).
I was thinking:
dc.renderAll();
d3.select("body").select("#barChart3").select("svg").attr("transform", function(d) { return "rotate(90)"});
however that erased the whole chart rather than rotating it.
Any suggestions?
Update:
I am having some success with rotating the svg (the brush works), however the graph is being cut off and I can't figure out why...
The two charts are completely different codebases and have different features. The Y axis of a row chart does not even use a scale, so you are quite right that it can't be made continuous in its present form.
It is an eventual goal to merge them, but for now I think rotating is your best bet.
As for the clipping problem you're having, look for the clip-path attribute on the generated SVG. It would need to be rotated as well, but for a quick fix you can probably remove it.
I am building an arc graph where the start and end points of the arcs are times in one day. I have a d3 scale that converts date objects into radians, but I need a scale with four ticks applied around the outside of the graph. I did it with jQuery, and you can see how it's supposed to look below
The problem I'm having is that the jQuery (and myself) is doing a poor job keeping those ticks at equal distances from the graph. Different screen sizes are making this a pain.
Does anyone have any idea how do create d3 time axis that is a circle? I've googled with no results.
Here is a link to the live site
I have a temperature line graph, and I want to draw a red vertical line when the two temperatures (surface temp and dew point) cross. So far what I do is I draw a vertical rectangle on top of my graph at places I calculated it crosses.
It works correctly, but there are a few downsides to this :
The line kind of stands out of the graph ... we can tell I added it later and not in the graph itself;
The pixels are hardcoded, if I change the graph width it might not be good (I could probably fix this, but still)
I would like a little tooltip when I highlight a line, but since it's a simple rectangle, it just sits there and is not dynamic at all.
What would be my best option to integrate this line better un my graphs?
Thanks!
plotLines are your best way to draw the line - http://api.highcharts.com/highcharts#xAxis.plotLines
Two things:
1) The difficult part will be calculating where the lines cross. if they do not cross at a data point, which they most likely won't, there will need to be some guesswork involved, as there is no value you can retrieve from the chart to tell you the axis value where they cross.
2) if you are using separate y axes for these two series, which I assume you must be since they are completely different units and scales, then the point where the lines cross will be COMPLETELY arbitrary and meaningless, as where they cross will be strictly a matter of how the scaling for each axis is set up, and the values have no actual correlation to each other.
My customer has some specific requirements for a graph to show in our web app. We use HighCharts elsewhere in the app for more traditional graphing, but it doesn't seem to work for this situation. Their requirements:
Allow the user to select a background image, set the scale and origin of the coordinate system. We'll graph our points against the user-defined coordinates.
Points can be color coded
Mouse-over boxes show more detail about the points
Support for zooming and panning, scaling the background appropriately
Less importantly:
Support for drawing vectors off the points
Some of this seems basic, but looking around at different graph packages, I was unable to find any with an example of this kind of usage.
I've entertained the thought of just hacking it together in canvas myself, but I've never worked with canvas before so I don't think it would be cost effective. The basics of plotting points with a scaled coordinate system against an image background wouldn't be too hard, but the mouse-over details, zooming and panning sound much more daunting to me.
More info: Right now we use jQuery, HighCharts, and ExtJS for our app. We tried flot in the past but switched to HighCharts after flot didn't meet our needs.
this looks promising:
http://danvk.org/dygraphs/
And this seems to have what You need, but it's not free:
http://www.ejschart.com/