I am new to D3js and working with the parsets reusable chart (http://www.jasondavies.com/parallel-sets/). I want to make changes to this chart such as adding sort based on thickness of ribbons on mouseover, and overlaying two parallel sets over each other to compare different datasets at once (The one at the back being faded).
Being new to D3js, I am having difficulty in understanding where to start. I am currently trying to understand the code of d3.parsets.js but its not going too well. If anyone has worked with this before and understands the procedure being followed in the code, please help me out.
The best adaptation I've seen of d3.parsets.js is by Hongjian Yang: Airline Vis adapted from d3.parsets.
It may be able to accomplish some of what you're looking for, though I'm not sure you'll readily be able to overlay two datasets (nor am I sure I understand the need to do so).
Related
I've created a matrix chart using D3.js and I'm having a bit of difficulty creating a sort of grouped "axis" (although I'm not sure I can call it an axis?).
This JS Bin shows the current route I've chosen. Essentially what I've done is to create 3 separate lines to create the "axis". Ideally I would like to use the d3.axis object but I'm not sure how I would go about achieving this.
Although this current method does work it feels dirty - I also have concerns about scaling. Does anyone have a better suggestion of how to approach this?
The end result is something along these lines (notice labels below lines):
you can use
.scale(x).tickValues(xVals)
where xVals are the array of values
Here may be this demo will help you
I tried to make Mike Bostocks example of focus + context via brushing (http://bl.ocks.org/mbostock/1667367) make reusable following his convention: bost.ocks. org/mike/chart/ [sorry, I'm not allowed to post more than 2 links yet]
I modified his brushing example a little bit, worked perfect, but I'm failing on making that reusable now. Whenever I try to select something on the context chart, the focus chart zooms in - but never out again.
The code is here: http://plnkr.co/edit/VoEL1eFJI1Xnajzf82Zq?p=preview
Can anyone give me a hint what I'm doing wrong here?
You are using the wrong scale for the brush -- it should be the one assigned to the context chart, xScaleTimeLine in your case. Fixed example here.
On a general note, including data processing (such as parsing dates and formatting numbers) in your reusable chart component is not best practice. I would first process the data itself and then pass it to the chart component such that no further processing needs to be done. A chart component like this can be used even if the data processing required is quite complex (e.g. nesting).
A few days ago I've explored geomaps and, however, it turned out to be easy to change the properties of the elements.
But I have two questions:
I'd like to add rivers and forests on the maps. So Ive considered to set a background image instead of the geomaps figure. But I can't find a way to get this one fixed. Is there a way to set a background picture for a country or region?
How can I change the shape of the "bubbles" when you select a city e.g. "London"? I'd like to change it to a square.
Thanks in advance for your help!
Unfortunately what you're looking for is not available in geocharts in their current implementation.
Using a background image is possible in the sense that you can use CSS to make all shapes in the map transparent, and use a background image in the div to make it appear as if the little circles are being drawn on a map with forest and rivers, but you will run in to two big hurdles:
Your map will need to be identical in size/layout to the Google Maps SVG
If Google ever changes the SVG they use (or the view/projection they use) you will need to edit yours too
This isn't ideal, obviously. You could work around it by creating custom javascript to write rivers and forests on your map, but that is going to be a huge headache (especially if you are using multiple maps/views).
As for the circles, you can't change them to squares without hacking the actual SVG in the background with javascript. While this is definitely possible (if you're really good with SVG/Javascript), it again isn't using any of the fancy features of geocharts, and is more just a custom solution that will have to be updated if/when google updates their API.
Rather than doing it that way, you may want to look in to the same implementation on google maps itself. That will allow you to use custom markers, draw custom shapes, etc. with a lot more flexibility (and a much more stable API).
I am following this example of a difference chart. I've added buttons on my page that make ajax calls to fetch new datasets, and then I redraw the difference charts. There are several difference charts on my page.
Upon redrawing, the rendering of the above/below areas becomes corrupted: x-values have both above and below areas rendered. I'm fairly certain it's not a back-end problem, because the initial load produces a correct chart; changing a parameter messes up the redrawn chart; and going back to the default parameters and redrawing the original chart also produces a corrupted chart. In fact, I can partially make out what's happening: the original time series is present on the new graph. It's almost as if there are three series being graphed.
I think it has to do with .datum. I don't fully understand how it works, since it differs from the standard enter/update/exit methods associated with .data. I've read the documentation, but am still confused. Some possibilities:
The original data is hanging around (even though I clean out the container with $('#chart').html(''))
The .append(g) is adding groups without removing the earlier ones.
The svg.append("clipPath").attr("id", "clip-below") is causing problems, since multiple nodes have the same id (even though again, I'm not sure how this could happen since I remove the nodes before the redraw).
I feel like I'm missing a lot of fundamentals here, even though I've spent a decent amount of time trying to understand the library. Can anyone see anything obvious, or point out some good resources for me to look at?
UPDATE: This has to do with there being two charts on the page. I noticed this when I opened the inspector and closed it. The areas of the bottom chart (the difference chart) had screwed up, and I noticed the new line that it was using to separate the above-area from the below-area looked a lot like one of the lines from the top chart.
Does anybody have experience with dependency issues/namespace collisions when drawing two charts on the same page?
The problem was, the id's for the clipping paths were the same.
I would still like some more resources concerning .datum.
I've encountered such a problem, and hope you guys could help me out here.
I have a plot in my GUI, contained multiple lines with different linspecs and a group of legends.
And I've made a context menu which should allow users to open the EXACTLY same plot(retaining all line settings, title, legends, and so forth) in a new window(default figure, where it is able to save/edit the figure).
However I couldn't find a simple way to migrate the plot, except re-run the plot commands which is quite complicated(plot different data, etc.)
So, I am looking for the solution in the following two ways:
is there a simple way to migrate the plot into new figure window?
or is it possible to save the plot directly with current interface?
For 2, I'd like to clarify that I only want to save the plot, not all GUI interface. I've tried saveas(handle.Plot,...) but it saved the GUI interface as an entity.
I hope the point has been made clear, thanks for your time. Cheers.
For this task you can probably use the builtin Matlab function copyobj which does exactly this (i.e. the first option mentionned in your question).
The following piece of code demonstrates its usage:
h1=figure;
a1=plot((1:100),rand(1,100),'r-');
hold on
plot((1:100),rand(1,100),'b+');
legend({'plot1';'plot2'});
h2=figure;
copyobj(get(h1,'children'),h2);
Hope it works as well in your case.
UPDATE: as far as I understand this, your second solution would involve the saveas function which unfortunately works with the figure environment and not with axes (as you experienced it). So a workaround would probably involve copying the desired axes to a new figure with the method given above and then use saveas.