StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POD3.js - Multiple Series (columns) of Data on ScatterPlot at Y Axis
text
Body
copied!<p>The subject of this question might not give the true scenario, please read all below, thanks.</p> <p>I am developing a Scatter Plot based on following data (JSON - in a file simple.json):</p> <pre><code>{ "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"} ] } </code></pre> <p>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). </p> <p>Here comes the problem:</p> <p>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.</p> <p>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?</p> <p>Please suggest something. I am sure I am lacking some key points.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload