Multiple kernel density estimations in one d3.js chart
<p>I'm trying to make a plot that shows density estimations for two different distributions simultaneously, like this:</p>

<p><a href="https://i.stack.imgur.com/y9vZx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y9vZx.png" alt="enter image description here"></a></p>

<p>The data is in two columns of a CSV file. I've modified code from Mike Bostock's <a href="https://bl.ocks.org/mbostock/4341954" rel="nofollow noreferrer">block on kernel density estimation</a>, and have managed to make a plot that does what I want, but only if I manually specify the two separate density plots -- see this <a href="https://jsfiddle.net/karawoo/hfdggywd/" rel="nofollow noreferrer">JSFiddle</a>, particularly beginning at line 66:</p>

<pre><code>svg.append("path")
    .datum(kde(cola))
    .attr("class", "area")
    .attr("d", area)
    .style("fill", "#a6cee3");

svg.append("path")
    .datum(kde(colb))
    .attr("class", "area")
    .attr("d", area)
    .style("fill", "#b2df8a");
</code></pre>

<p>I've tried various incantations with <code>map()</code> to try to get the data into a single object that can be used to set the color of each density area according to the <code>color</code> domain, e.g.:</p>

<pre><code>var columns = color.domain().map(function(column) {
    return {
        column: column,
        values: data.map(function(d) {
            return {kde: kde(d[column])};
        })
    };
});
</code></pre>

<p>I don't have a great grasp of what <code>map()</code> does, but this definitely does not work. </p>

<p>How can I structure my data to make this plot in a less brittle way?</p>