複数のカーネル密度推定は、このように、私は、同時に2つの異なるディストリビューション用の密度推定を示し、プロットを作成しようとしている

Question

をグラフ化CSVファイル。私はマイク・ボストックのblock on kernel density estimationからコードを変更した、と私は何をしたいんプロットを作るために管理しているが、私は手動で二つの別々の密度プロットを指定した場合にのみ - 特に66行から始まる、このJSFiddleを参照してください。

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"); 

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

Iドン：私は、colorドメインに応じて例えば、各濃度領域の色を設定するために使用することができる1つのオブジェクトにデータを取得しようとするmap()で様々な呪文を試してみた

map()が何をするのかをよく理解しているこれは間違いなく機能しません。

データを構造化して、このプロットをあまり壊れにくくする方法を教えてください。最初にあなたのデータを準備し、これは一般的な作りと列の依存関係を削除するには

Answer 1

：

：今

var newData = {}; 
// Columns should be numeric 
data.forEach(function(d) { 
    //iterate over all the keys 
    d3.keys(d).forEach(function(col){ 
     if (!newData[col]) 
      newData[col] = [];//create an array if not present. 
     newData[col].push(+d[col]) 
    }); 
}); 

newDataは、次はこのように色のドメインを作成し、この

{ 
    a:[123, 23, 45 ...], 
    b: [34,567, 45, ...] 
} 

のようなデータを保持します

var color = d3.scale.category10() 
     .domain(d3.keys(newData))//this will return the columns 
     .range(["#a6cee3", "#b2df8a"]); 

最後に、エリアチャートを次のように作成します。

d3.keys(newData).forEach(function(d){ 
    svg.append("path") 
      .datum(kde(newData[d])) 
      .attr("class", "area") 
      .attr("d", area) 
      .style("fill", color(d)); 
}) 

だから、コードは列名とそのジェネリックに依存しません。

作業コードhere