D3.js - Multiple Series (columns) of Data on ScatterPlot at Y Axis - graph

The subject of this question might not give the true scenario, please read all below, thanks.
I am developing a Scatter Plot based on following data (JSON - in a file simple.json):
{
"docs":
[
{"timestamp":"01","id":"100","quantity":"5","pay":"50","bp":"25","city":"Multan"},
{"timestamp":"02","id":"200","quantity":"10","pay":"100","bp":"50","city":"Lahore"},
{"timestamp":"03","id":"300","quantity":"3","pay":"30","bp":"15","city":"Multan"},
{"timestamp":"04","id":"400","quantity":"5","pay":"50","bp":"25","city":"Multan"},
{"timestamp":"05","id":"500","quantity":"6","pay":"60","bp":"30","city":"Lahore"},
{"timestamp":"06","id":"600","quantity":"15","pay":"150","bp":"75","city":"Islamabad"},
{"timestamp":"07","id":"700","quantity":"14","pay":"140","bp":"70","city":"Islamabad"},
{"timestamp":"08","id":"800","quantity":"18","pay":"180","bp":"90","city":"Islamabad"},
{"timestamp":"09","id":"900","quantity":"7","pay":"70","bp":"35","city":"Lahore"},
{"timestamp":"10","id":"1000","quantity":"20","pay":"200","bp":"100","city":"Islamabad"}
]
}
I am trying to develop a Re-Usable graph, where I can present user with available data columns (from above data). So user can select a certain column (say "id") for X axis and another column (say "quantity") for Y axis (till here everything is perfect and as per expectations). And later user can select another column and can click a button to plot that column on the graph (along with previously added columns).
Here comes the problem:
When I proceed with another column (say "pay") for Y axis, while keeping previously on the graph, new ones get plotted correctly (I am rescaling the axis based on new data as well). But the old ones DO NOT RE-ARRANGED. This is the actual problem. I am thinking to keep track of each column added (by storing column references in a separate array), so every time there's a new column, I will have to redraw the old ones again (should I?). But this doesn't look feasible in terms of D3's power or performance.
For this I also applied an anonymous class "update" to every circle drawn, so that I can pick all "update" circles, but here comes another issue, that how would I know the new place for these circles? Do I need to traverse the data again for that particular series? and have to do that drawing again? For every new series, keeping track of old-ones and redrawing them, will increase the processing over-head turn by turn. Is there any handy solution or built-in (d3's) mechanism to re-adjust previous drawing according to new scale?
Please suggest something. I am sure I am lacking some key points.

Related

Visualising changing rank-ordering when missing data is present

I wish to visualise changes in relative rankings between categories through time, much like this so-called 'subway-style' plot. However, not all categories are present in all time steps.
I have made a preliminary plot (see attached) that is sufficient to interpret the data (one simply needs to look at the crossing lines). However, because not every category is represented in every time slice, lines may traverse the y-axis without any change in rank, which is visually confusing:
Do algorithms exist for minimising the kinks in static ranks when missing data is present? To put it another way, my goal is to maintain straight lines wherever possible (when there is no change in relative rank).

Tableau map shapes overlapped

I am trying to render some geographic data onto the map in Tableau. However, some data points located at the same point, so the shape images of the data points overlaps together. By clicking on a shape, you could only get the top one.
How can we distinguish the overlapped data points in Tableau? I know that we can manually exclude the top data to see another, but is there any other way, for example, make a drop down list in the right click menu to select the overlapped data points?
Thank you!
There are a couple of ways to deal with this issue.
Some choices you can try are:
Add some transparency to the marks by editing the color shelf properties. That way at least you get a visual indication when there are multiple marks stacked on top of each other. This approach can be considered a poor man's heat map if you have many points in different areas as the denser/darker sections will have more marks. (But that just affects the appearance and doesn't help you select and view details for marks that are covered by others)
Add some small pseudo-random jitter to each coordinate using calculated fields. This will be easier when Tableau supports a rand() function, but in the meantime you can get creative enough using other fields and the math function to add a little jitter. The goal here is to slightly shift locations enough that they don't stack exactly, but not enough to matter in precision. Depends on the scale.
Make a grid style heat map where the color indicates the number of data points in each grid. To do this, you'll need to create calculated fields to bin together nearby latitudes or longitudes. Say to round each latitude to a certain number of decimal places, or use the hex bin functions in Tableau. Those calculated fields will need to have a geographic role and be treated as continuous dimensions.
Define your visualization to display one mark for each unique location, and then use color or size to indicate the number of data points at that location, as opposed to a mark for each individual data point

VPython graphs - Clearing the display so a new set of data can be shown

I have a list of data that I want to be animated on the plot, I'm currently using:
graph1=gdots(pos = pvalues) #pvalues is list of points
while t <= t_max:
rate(200)
... #pvalues is updated to new contain the new points
graph1=gdots(pos = pvalues)
What happens here is the old points remain on the plot, so lines are traced out when I want the points to just move. I've tried deleting the graph, making it invisible, but none of it works.
graph1.visible = False
del graph1
Including the above makes no noticeable difference to the display. I've searched a lot about this, but the VPython documentation seems to be annoyingly incomplete.
I realise this is a very old question, however I had the same issue with vpython 7. For me, graph1.delete() removed the associated data points from the graph, and rescaled the axes based on the remaining data (if any). I haven't yet found a way to remove the graph axes themselves (i.e. delete the figure).

Need a fast dataset 2D-viewer/plotter for large datasets

I'm searching a data viewer/plotter for some data I've generated.
Facts
First some facts about the data I've generated:
There are several datasets with about 3 million data points each.
Each dataset currently is stored in ascii format.
Every line represents a point and consists of multiple columns.
The first two columns determine the position of the point (i.e. x and y value) whereas the first column is a timestamp and the second is a normalized float between 0 and 1.
The other columns contain additional data which may be used to colorize the plot or filter the data.
An example data point:
2012-08-08T01:02:03.040 0.0165719281 foobar SUCCESS XX:1
Current Approach
Currently I am generating multiple png files (with gnuplot) with different selection criteria like the following ones for each data set:
Display all points in grey.
Display all points in grey, but SUCCESS in red.
Display all points in grey, but SUCCESS in red, XX:-1 in green; if both SUCCESS and XX:-1 match use blue as coloring.
Drawbacks
With the current approach there are some drawbacks I'd like to have addressed:
I can't easily switch on/off some filters or colorings because I have to generate a new png file every time.
I need to use a limited resolution in my image file because the higher the resolution the slower is the viewer. So I can only zoom in to a limited level of detail.
I don't have the raw data available in the png viewer for each point. Ideally I'd like to have the data visible on selection of a point.
Already tested
I've already tested some other approaches:
Gnuplot itself has a viewer but it can't handle that amount of points efficiently - it is too slow and consumes too much memory.
I've had a quick look at KST, but I couldn't find a way to display 2D data and I don't think it will meet my wishes.
Wishes
I'd like to have a viewer which can operate on the raw data, can displays the points quickly if zoomed out, can also zoom in quickly and as well should resolve the aforementioned drawbacks.
Question
So finally, does anybody know of such a viewer or has another suggestion?
If there isn't a viewer some recommendations for programming it myself are welcome, too.
Thanks in advance
Stefan

Creating a chart in ASP.net

I am working on a project and need to add an additional image using the asp:chart control. Unfortunately, I've never had to use this control before and it's a bit complex to use, so I need some help.
Basically, I need to create a stacked Column chart with two legends and two columns. The first column is "income" and stacks three values. (Wages, interest and other.) The second column is "expenses" and stacks two values. (Mortgage, Other.) Each value has it's own value.
The legend for income should be on the left, the column for expenses to the right. These legends should display the texts and values for it's related value plus a 'Total' label with value.
For this task, I only have to deal with 5 values over two columns but the asp:chart control is huge and I'm drowning in all it's options. And they want it ready yesterday, so no pressure. It's already overdue... :-)
No, it's not homework. If it was, I would have practical documentation and the additional how-to information. Since my Boss expects me to add this, he just gave me absolutely no information to work with, except for the code which already contains several other charts, none of them like this one and all done by previous victims who each used their own coding style. Basically, the project code is a huge mess so useless as documentation. (And amazingly it works, as long as I only use asp:chart for these graphics.)
The biggest problem I'm having is stacking the values correctly. Since I have two columns and 3 values, it could be solved with three series, each with points for column 1 and 2. Unfortunately, this puts income and expense in the same label, which is not what I want.
If I make it 5 series, for every value one point, then the second column doesn't start at the right height. So that won't work either.
You can download Samples for Chart Control from msdn which give you complete in depth knowledge of how to use them
http://archive.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=1591
For learning see these blogs as well
https://web.archive.org/web/20211020203246/https://www.4guysfromrolla.com/articles/072209-1.aspx
http://weblogs.asp.net/scottgu/archive/2008/11/24/new-asp-net-charting-control-lt-asp-chart-runat-quot-server-quot-gt.aspx

Resources