Adding error bars to d3 scatter plot

[Nate]

Hi folks,

Has anyone worked out an example in d3 placing error bars on a scatter/point plot? Most of the examples I have seen appear to plot mean values, but don't present a measure of the error or variability around those means.

I'd like to be able to plot that variability as well.

Thanks,

Nate

[Chris Rich]

I have a reusable component done that adds error bars.  I'm away from my office right now, but If you can wait a couple days I can post it.

Chris

[Chris Rich]

Looking at some existing box plots could also get you started.

http://strongriley.github.com/d3/ex/box.html

[Nathan Miller]

Thanks Chris that would be great! I was thinking about it last night and also realized it might be possible to pull from the boxplot code. When you get back to the office I'd like to see the reusable component that you have as well.

Thanks,

Nate

--
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.
 
 

[Nathan Miller]

Hi Chris,

I was wondering if you could post your resusable component that adds error bars to d3 plots. I'd  be interested in having a look at what you put together.

Thanks,

Nate

[Francois Mercier]

Hi Nate,

Here are some examples of plots including error bars (or error bands) together with mean values (or any other central tendency metric):

- basic: http://bl.ocks.org/iaindillingham/4318672

- (not so) basic: http://bl.ocks.org/IPWright83/4047002

- more advanced: http://www.woodchanges.com/ 

and a boxplot: http://www.willwyatt.com/dummy/

HTH,

Best, 

F

[Chris Rich]

Ack!  Completely forgot.  I'll try and get it posted tomorrow.

[Chris Rich]

Hey Nate,

  Sorry for the delay.  So, here is an scatterplot example of an errorbar component I made a while back.  It's messy, but should get you started.

http://bl.ocks.org/chrisbrich/5044999

  xValue and yValue are the keys for the x/y data in each point.  Similarly for xError and yError.  oldXScale and oldYScake are useful if the domain or range of your x/y scale are changing dynamically.  I can probably think of smarter defaults, so you don't need to specify parameters for everything, but haven't gotten that far yet.  Let me know if you have any questions.  Hopefully it's useful.

Chris

[Chris Rich]

Hmm... also just realized that you might be wanting to do the analysis on the fly.  I think the reusable component would still work, you would just need to make the appropriate key functions.  In the way that I use it the error analysis is done beforehand.

Chris

[Nathan Miller]

Thanks Chris and Francois,

I'm pretty new to looking at JS functions so figuring out the structure of the errorbar.js (Chris) and quartile.js (Francois' first example) has been a challenge though both were annotated. Ultimately, I would like the errorbar analysis to be done on the fly, but for now I'm going have the error included in the dataset for simplicity. I've started digging through both sets of examples, but have made some progress in understanding some of what the code is doing, but building from your example Chris using random data, I end up with slightly odd errorbars. The lower "y" error bar is the correct height/length, but the upper one is really, quite tall http://bl.ocks.org/natemiller/f2faa97c0bd4af49b5bb

I've tried going through the errorbar.js code to see how the upper bound is set and why it might be so overinflated, but I don't have a full enough understanding of JavaScript to piece together how everything is working. I understand about 1/2 the method it seems. If you have a moment can you look at the example and maybe clarify where this error arises?

Thanks for sharing the code,

Nate

--
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/8ma8325MCwM/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.

[Chris Rich]

Well that is weird!  It looks like the problem is because your x/y/s values are strings.  Not sure why that made the scales all wonky.

http://bl.ocks.org/chrisbrich/0759cd5d7cab4db4610b

Here I just changed the JSON data so they are numbers and it works fine.  Hope that helps.

Chris