Parent child relationship with chart data

287 views
Skip to first unread message

Pavithra R

unread,
Feb 14, 2013, 7:06:10 PM2/14/13
to d3...@googlegroups.com
I am new to D3 and started protoyping on this feature. I have a chart with x and y values loaded from a csv file. Now when I click on a point on this chart, I want another chart to be loaded based on the x value of chart 1.I am not sure on how to link the 2 data.
I tried getting all the data in csv file and created a nest , Right now I have 2 keys the x and y values of chart 1. How do I access it to plot a scatter plot?
Or is there any better way to achieve this? TIA


var line = d3.svg.line()
.x(function(d) { return x(d3.keys(d)[0]); })
.y(function(d) { return y(d3.values(d)[0].key); });

d3.csv("complete.csv", function(csv) {
  var nodes = tree.nodes(makeTree(csv));
.
.
.

  svg.append("path")
      .datum(nodes)
      .attr("class", "line")
      .attr("d", line);

});

function makeTree(csv) {
   var data = d3.nest()
        .key(function(d) {return d.date; })
.key(function(d) {return d.index; })
        .entries(csv);

   return data;
}

Simon Russell

unread,
Feb 14, 2013, 11:24:02 PM2/14/13
to d3...@googlegroups.com
It's not entirely clear (to me at least) what you're actually intending to happen.  Is all the data in one CSV, or are you loading separate CSVs?

Perhaps something on jsFiddle or at least some screenshots or something might help the me (and the others on this list) know what you're intending should happen.


--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Pavithra R

unread,
Feb 15, 2013, 1:09:47 PM2/15/13
to d3...@googlegroups.com
Sorry if my request was too confusing. i need 2 charts on a page, the top chart shows the summary by time. When i click on a point on the first chart, the bottom chart loads other data that is calculated based on the time parameter of the first chart.

sample data for chart 1
time, index
1/2/2013  5:00,34
1/2/2013 15:00,56
1/3/2013  5:00,67
1/5/2013 14:00,3
1/7/2013 12:00,78

sample data for chart 2 
time, day, value
1/2/2013  5:00, -1,  1000
1/2/2013  5:00, -2, 3000
1/2/2013  5:00, -3,  5000
1/2/2013  5:00, -4, 200
1/2/2013  5:00, -5, 100
1/2/2013  15:00, -1,  1000
1/2/2013  15:00, -2, 3000
1/2/2013  15:00, -3,  5000
1/2/2013  15:00, -4, 200
1/2/2013  15:00, -5, 100

So when a user clicks a point, (x,y) - (1/2/2013  5:00,34) on the first chart I want the second chart to load with the data for the date (1/2/2013 ) - that would be a chart with the below values.
time, day, value
1/2/2013  5:00, -1,  1000
1/2/2013  5:00, -2, 3000
1/2/2013  5:00, -3,  5000
1/2/2013  5:00, -4, 200
1/2/2013  5:00, -5, 100

(x,y) - day,value.

I am looking for some example on how to pass parameter using d3. I am open to storing the data in the csv in any form, i.e 2 separate files or just 1.

Simon Russell

unread,
Feb 17, 2013, 5:51:56 PM2/17/13
to d3...@googlegroups.com
Hi there,

Okay, seems reasonably straightforward.  You'll need to separate your "Graph 2" drawing code into "create" and "update" functions.  You'll run the "create" function when the page loads, and the "update" function from the mouse click handler on Graph 1.

Have you got Graph 1 and Graph 2 drawing properly (with Graph 2 with a particular day always selected i.e. not dynamic)?  If so, then the next step would be to get a mouse click handler on Graph 1, and pop up an alert or write to console.log with the selected day.  Then you're probably not far away from having it work.

Pavithra R

unread,
Feb 18, 2013, 12:00:32 AM2/18/13
to d3...@googlegroups.com
I have got graph 1 and 2 drawing properly based on 2 seperate csv files. for graph 2 currently i just have 1 date value populated in csv, I am unable to filter for selected value based on a parameter.
Also i am not sure on how to pass the parameters based on mouse click and also how to get the passed parameter in the other function. Could you point me to some examples or give an idea on how  to do it? Thanks in advance for the help.

Simon Russell

unread,
Feb 18, 2013, 12:27:19 AM2/18/13
to d3...@googlegroups.com
Well, to begin with I'd get Graph 2 working with a filter properly.  (Or, depending on your data, you may not need to filter; just draw it at a different zoom level; the stuff you're interested in will be off the screen.)

As for "how to pass parameters", you're going to have to post some code; assuming your graph drawing code is in a function, you just need to add a parameter or two to the function definition, and call it with those parameters.  That particular bit isn't really d3 -- it's just Javascript.

Pavithra R

unread,
Mar 5, 2013, 3:20:52 PM3/5/13
to d3...@googlegroups.com
Hi Simon,
Thanks a lot for the help. I am able to draw the second graph based on the parameters passed. However i am unable to add on-click attribute to each point on the first graph. How do i get the point clicked event added and get its value using Javascript or D3. 

This is the function used to draw the first graph.

 function drawfirstgraph(){
d3.csv("test2.csv", function(error, data) {
  data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.index = +d.index;
  });
console.log(data); 
   x.domain(d3.extent(data ,function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.index; }));


  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 1)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("HoleIndex");

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line)
});}

TIA
Pavithra

Henry McDaniel

unread,
Mar 5, 2013, 6:33:58 PM3/5/13
to d3...@googlegroups.com
This may or may not be helpful but: What I've done with area charts is to use d3's mouse functions to find where on the chart the mouse is pointed. Then I use my own lookup function (javascript) to determine the nearest relevant data/answer based on that.  I found this necessary for area charts since an onclick isn't precise enough (depending on how far apart your data points are) and I wanted to show a popup that provides info about other areas near the same X axis point. The lookup function could use the actual chart elements or some internal data representation.

Pavithra R

unread,
Mar 6, 2013, 12:50:15 PM3/6/13
to d3...@googlegroups.com
Could you provide me some sample code or examples taht I can look at. i am quite new to this and find it a bit difficult to follow.

Pavithra


On Tue, Mar 5, 2013 at 4:33 PM, Henry McDaniel <he...@sunsetrainbow.com> wrote:
This may or may not be helpful but: What I've done with area charts is to use d3's mouse functions to find where on the chart the mouse is pointed. Then I use my own lookup function (javascript) to determine the nearest relevant data/answer based on that.  I found this necessary for area charts since an onclick isn't precise enough (depending on how far apart your data points are) and I wanted to show a popup that provides info about other areas near the same X axis point. The lookup function could use the actual chart elements or some internal data representation.


--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/XfK_W36xL3I/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.

Pavithra R

unread,
Mar 6, 2013, 6:05:03 PM3/6/13
to d3...@googlegroups.com
I actually got the code almost working. but for the second graph, When I click on a point I want the previously drawn graph to be erased and a new graph created. Currently the graphs are drawn over each other.

Pavithra

Simon Russell

unread,
Mar 6, 2013, 6:24:15 PM3/6/13
to d3...@googlegroups.com
Hi there,

Glad to hear you got it working. As Henry suggested, there's nothing
like a "point" to hang an onclick handler off -- you basically need to
figure out where the mouse was based on using the invert() function of
the relevant scale.

Without being able to see your code, my guess would be that you're
adding a new path when you're updating the graph, rather than updating
the existing path. You could solve that by deleting the existing one,
but probably a more pleasant experience for the user would be just to
update the existing one. (i.e. replace the "d" attribute of the path
with your newly rendered data.)

Here's a handy (and new!) tutorial:
http://www.jeromecukier.net/blog/2013/03/05/d3-tutorial-at-strata-redux/
> You received this message because you are subscribed to the Google Groups
> "d3-js" group.
> To unsubscribe from this group and stop receiving emails from it, send an

Pavithra R

unread,
Mar 7, 2013, 12:58:38 PM3/7/13
to d3...@googlegroups.com
Thanks a lot for all the help. I got it working. 

Pavithra

subbum...@gmail.com

unread,
Mar 29, 2018, 2:55:10 AM3/29/18
to d3-js
hi,
I am creating link between the charts.in this i click to first chart the remaining charts updated based on filter.
now how to apply parent child relation to multiple charts   .
In this relation i am  having so many doubts which one to take parent chart and also charts will be generated different data set
Reply all
Reply to author
Forward
0 new messages