Multiple Plots with Different Y Scales Using D3

Question

I am making multiple line plots using d3 (see functional example http://jsfiddle.net/hSrP7/). However, I would like to have different yscales for each plot. I've tried a syntax such as the following, but without success:

var diseases = ['Maternal_Mortality', 'Child_Mortality', 'Malaria']

    var min = []
        min['Maternal_Mortality'] = .4
        min['Child_Mortality'] = .3
        min['Malaria'] = .1
    var max = []
        max['Maternal_Mortality'] = .7
        max['Child_Mortality'] = .6
        max['Malaria'] = .8

yscale = function(dis) {
       yval = d3.scale.linear().domain([min[dis], max[dis]).range([plotHeight -     
       bottomPadding, topPadding])
       return yval
}

var yaxes = d3.svg.axis()
        .scale(diseases.forEach(function(d) {return yscale(d)}))

Here is the link to the fiddle using this syntax that doesn't work(http://jsfiddle.net/Hn5JX/). Is there a way to pass different yscales to each graph? The graphs that I'm actually working with have much larger differences. Thanks,

Answer 1

You just had a type-o in your javascript. You had forgotten to close the array passed into yscale's domain:

.domain([min[dis], max[dis])  // change to:
.domain([min[dis], max[dis]])

http://jsfiddle.net/Hn5JX/2/

Fixed the fiddle and it's rendering but I'll edit the answer if you're still not seeing what you need.