D3.js d3.nest（）を使用して棒グラフでデータをグループ化する

私はd3.jsを学んでいて、JavaScriptのレベルは基本的です。助けてくれてありがとう、非常に感謝します。D3.js d3.nest（）を使用して棒グラフでデータをグループ化する

総クリック数。キャンペーン。

"Campaign"と "Clicked"という列を持つCSVファイルがあります。「クリックされた」列は、値で構成されます。キャンペーンごとのクリック数を表示します。私はNo Clickを気にしない。クリック数をカウントし、各データメンバーにカウントを格納する関数を作成しました。私はyのドメインを設定するためにd.countを使います。 y軸とx軸が正しく表示されます。バーの値は表示されません。 Iは、次の2行のコードが正しくないと仮定：

.ATTR（ "y" は、コンソールで

unction(d) { return y(d.key); }) 
.attr("height" 
, function(d) { return height - y(d.key); });

fは私はこのエラーを取得する：

d3.v4.min

.js:2 Error: attribute height: Expected length, "NaN". d3.v4.min.j

s:2 Error: attribute height: Expected length, "NaN"

「Clicked」と「No Click」の2つの値を持つため、d3.nest（）関数の値「No Click」を除外しなければならないとしますか？

キャンペーンごとにクリック数を表示するにはどうすればよいですか？私は何が欠けていますか？あなたのnested_dataで2つのレベルのグループ化を使用して、スケールの計算のためだけ "をクリックし、" グループを使用する必要が

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>barChart</title> 
</head> 
<style> /* set the CSS */ 

.bar { fill: steelblue; } 

</style> 
<body> 

<!-- load the d3.js library --> 
<script src="d3.v4.js"></script>  
<script src="https://d3js.org/d3.v4.min.js"></script> 
<!--<script src="d3.min.js"></script>--> 

<script> 

// set the dimensions and margins of the graph 
var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

// set the ranges 
var x = d3.scaleBand() 
      .range([0, width]) 
      .padding(0.1); 
var y = d3.scaleLinear() 
      .range([height, 0]); 

// append the svg object to the body of the page 
// append a 'group' element to 'svg' 
// moves the 'group' element to the top left margin 
var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")"); 

// get the data 
    d3.csv("EmailMarketingCampaign_Data.csv") 
    .row(function(d){ return {Campaign: (d.Campaign), Clicked: (d.Clicked)}; }) 
    .get(function(error,data){ 
    console.log(data[0]); 

// format all data from strings 
    data.forEach(function(d) { 
    d.data = +d.data; 
    }); 

// Array [ Object, Object ] Key: Clicked, Key: No Clicked 
    var nested_data = d3.nest() 
    .key(function(d) { return d.Clicked; }) 
    .rollup(function(values) { 
    return values.length; 
    }) 
    .entries(data);   
    console.log(nested_data); 

// count all clicked to set range for y axis 

     var countObj = {}; 

     // count Clicked 
     data.forEach(function(d) { 
     var Clicked = d.Clicked; 
     if(countObj[Clicked] === undefined) { 
     countObj[Clicked] = 0; 
     } else { 
     countObj[Clicked] = countObj[Clicked] + 1; 
     } 
     }); 
     // now store the count in each data member 
     data.forEach(function(d) { 
     var Clicked = d.Clicked; 
     d.count = countObj[Clicked]; 
     }); 
     console.log(countObj); 


    // Scale the range of the data in the domains 
    x.domain(data.map(function(d) { return d.Campaign; })); 
    y.domain([0, d3.max(data, function(d) { return d.count; })]); 

    // append the rectangles for the bar chart 
    svg.selectAll(".bar") 
     .data(data) 
    .enter().append("rect") 

     .attr("class", "bar") 
     .attr("x", function(d) { return x(d.Campaign); }) 
     .attr("width", x.bandwidth()) 

     .attr("y", function(d) { return y(d.key); }) 
     .attr("height", function(d) { return height - y(d.key); }); 



    // add the x Axis 
    svg.append("g") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x)); 

    // add the y Axis 
    svg.append("g") 
     .call(d3.axisLeft(y)); 

}); 

</script> 
</body> 

</html>

EmailMarketingCampaign_Data.csv

カルシウム

mpaign,Click_Date,Start,End,Clicked,clickedFlag,Customer ID,weekDay,Age,Country,Demographic,Gender JAN SALES,30/12/2012,30/12/2012,29/01/2013,Clicked,1,10,Sun,30,UK,Adult,Male JAN SALES,31/12/2012,30/12/2012,29/01/2013,Clicked,1,11,Mon,26,UK,Adult,Female JAN SALES,01/01/2013,30/12/2012,29/01/2013,Clicked,1,12,Tue,59,UK,Adult,Male JAN SALES,02/01/2013,30/12/2012,29/01/2013,Clicked,1,13,Wed,3,UK,Child,Male JAN SALES,03/01/2013,30/12/2012,29/01/2013,Clicked,1,14,Thu,59,Germany,Adult,Female JAN SALES,04/01/2013,30/12/2012,29/01/2013,No Click,0,15,Fri,39,UK,Adult,Male JAN SALES,05/01/2013,30/12/2012,29/01/2013,Clicked,1,16,Sat,19,UK,Adult,Male JAN SALES,07/01/2013,30/12/2012,29/01/2013,No Click,0,18,Mon,25,UK,Adult,Male JAN SALES,08/01/2013,30/12/2012,29/01/2013,Clicked,1,19,Tue,6,UK,Child,Male JAN SALES,09/01/2013,30/12/2012,29/01/2013,Clicked,1,20,Wed,55,Germany,Adult,Female JAN SALES,10/01/2013,30/12/2012,29/01/2013,Clicked,1,21,Thu,19,UK,Adult,Male JAN SALES,11/01/2013,30/12/2012,29/01/2013,No Click,0,22,Fri,32,UK,Adult,Male JAN SALES,12/01/2013,30/12/2012,29/01/2013,Clicked,1,23,Sat,18,UK,Adult,Female JAN SALES,14/01/2013,30/12/2012,29/01/2013,Clicked,1,25,Mon,7,UK,Child,Male JAN SALES,30/12/2012,30/12/2012,29/01/2013,Clicked,1,32,Sun,59,France,Adult,Female JAN SALES,31/12/2012,30/12/2012,29/01/2013,Clicked,1,33,Mon,28,France,Adult,Male JAN SALES,01/01/2013,30/12/2012,29/01/2013,Clicked,1,34,Tue,31,UK,Adult,Male JAN SALES,02/01/2013,30/12/2012,29/01/2013,No Click,0,35,Wed,3,France,Child,Female JAN SALES,03/01/2013,30/12/2012,29/01/2013,Clicked,1,36,Thu,38,France,Adult,Male JAN SALES,04/01/2013,30/12/2012,29/01/2013,Clicked,1,37,Fri,50,France,Adult,Male JAN SALES,05/01/2013,30/12/2012,29/01/2013,Clicked,1,38,Sat,57,France,Adult,Female JAN SALES,06/01/2013,30/12/2012,29/01/2013,Clicked,1,39,Sun,38,France,Adult,Male JAN SALES,07/01/2013,30/12/2012,29/01/2013,Clicked,1,40,Mon,31,UK,Adult,Male JAN SALES,08/01/2013,30/12/2012,29/01/2013,No Click,0,41,Tue,33,France,Adult,Female JAN SALES,09/01/2013,30/12/2012,29/01/2013,Clicked,1,42,Wed,34,France,Adult,Male JAN SALES,10/01/2013,30/12/2012,29/01/2013,Clicked,1,43,Thu,59,France,Adult,Male JAN SALES,11/01/2013,30/12/2012,29/01/2013,No Click,0,44,Fri,13,France,Teen,Female JAN SALES,12/01/2013,30/12/2012,29/01/2013,Clicked,1,45,Sat,2,France,Child,Male JAN SALES,13/01/2013,30/12/2012,29/01/2013,Clicked,1,46,Sun,39,UK,Adult,Male JAN SALES,30/12/2012,30/12/2012,29/01/2013,Clicked,1,54,Sun,18,France,Adult,Male JAN SALES,01/01/2013,30/12/2012,29/01/2013,Clicked,1,55,Tue,13,France,Teen,Male JAN SALES,11/01/2013,30/12/2012,29/01/2013,Clicked,1,56,Fri,50,France,Adult,Female JAN SALES,11/01/2013,30/12/2012,29/01/2013,No Click,0,57,Fri,19,France,Adult,Male JAN SALES,03/01/2013,30/12/2012,29/01/2013,Clicked,1,58,Thu,22,USA,Adult,Male JAN SALES,04/01/2013,30/12/2012,29/01/2013,Clicked,1,59,Fri,11,USA,Child,Female JAN SALES,05/01/2013,30/12/2012,29/01/2013,No Click,0,60,Sat,56,USA,Adult,Male JAN SALES,11/01/2013,30/12/2012,29/01/2013,Clicked,1,61,Fri,7,USA,Child,Male JAN SALES,07/01/2013,30/12/2012,29/01/2013,Clicked,1,62,Mon,9,USA,Child,Female JAN SALES,08/01/2013,30/12/2012,29/01/2013,Clicked,1,63,Tue,43,France,Adult,Male JAN SALES,09/01/2013,30/12/2012,29/01/2013,Clicked,1,64,Wed,2,France,Child,Male JAN SALES,11/01/2013,30/12/2012,29/01/2013,Clicked,1,66,Fri,32,USA,Adult,Male JAN SALES,12/01/2013,30/12/2012,29/01/2013,Clicked,1,67,Sat,4,USA,Child,Male JAN SALES,13/01/2013,30/12/2012,29/01/2013,Clicked,1,68,Sun,47,USA,Adult,Female JAN SALES,14/01/2013,30/12/2012,29/01/2013,No Click,0,69,Mon,49,USA,Adult,Male Unknown,01/02/2013,,,No Click,0,2,Fri,33,France,Adult,Female Unknown,01/03/2013,,,Clicked,1,3,Fri,17,Germany,Teen,Male Unknown,06/03/2013,,,Clicked,1,17,Wed,1,UK,Child,Female Unknown,13/02/2013,,,Clicked,1,24,Wed,5,UK,Child,Male Unknown,14/03/2013,,,Clicked,1,47,Thu,22,France,Adult,Female Unknown,10/04/2013,,,Clicked,1,65,Wed,11,USA,Child,Female XMAS,28/12/2012,23/12/2012,29/12/2012,Clicked,1,1,Fri,24,UK,Adult,Male XMAS,24/12/2012,23/12/2012,29/12/2012,Clicked,1,4,Mon,18,UK,Adult,Male XMAS,25/12/2012,23/12/2012,29/12/2012,Clicked,1,5,Tue,19,UK,Adult,Female XMAS,26/12/2012,23/12/2012,29/12/2012,No Click,0,6,Wed,58,UK,Adult,Male XMAS,27/12/2012,23/12/2012,29/12/2012,Clicked,1,7,Thu,16,Germany,Teen,Male XMAS,28/12/2012,23/12/2012,29/12/2012,Clicked,1,8,Fri,26,UK,Adult,Female XMAS,29/12/2012,23/12/2012,29/12/2012,No Click,0,9,Sat,37,UK,Adult,Male XMAS,24/12/2012,23/12/2012,29/12/2012,Clicked,1,26,Mon,19,Germany,Adult,Female XMAS,25/12/2012,23/12/2012,29/12/2012,Clicked,1,27,Tue,43,UK,Adult,Male XMAS,26/12/2012,23/12/2012,29/12/2012,No Click,0,28,Wed,20,UK,Adult,Male XMAS,27/12/2012,23/12/2012,29/12/2012,Clicked,1,29,Thu,19,France,Adult,Female XMAS,28/12/2012,23/12/2012,29/12/2012,Clicked,1,30,Fri,58,France,Adult,Male XMAS,29/12/2012,23/12/2012,29/12/2012,No Click,0,31,Sat,7,France,Child,Male XMAS,24/12/2012,23/12/2012,29/12/2012,No Click,0,48,Mon,3,France,Child,Male XMAS,25/12/2012,23/12/2012,29/12/2012,Clicked,1,49,Tue,25,France,Adult,Male XMAS,26/12/2012,23/12/2012,29/12/2012,Clicked,1,50,Wed,18,France,Adult,Female XMAS,27/12/2012,23/12/2012,29/12/2012,No Click,0,51,Thu,5,France,Child,Male XMAS,28/12/2012,23/12/2012,29/12/2012,Clicked,1,52,Fri,1,UK,Child,Male XMAS,29/12/2012,23/12/2012,29/12/2012,Clicked,1,53,Sat,0,France,Child,Female

screenshot

出典

2017-04-25 user7720911

とデータバインディング。

var dataString = "Campaign,Click_Date,Start,End,Clicked,clickedFlag,Customer ID,weekDay,Age,Country,Demographic,Gender \nEXTORTION,30/12/2012,30/12/2012,29/01/2013,Clicked,1,10,Sun,30,UK,Adult,Male \nSALES,31/12/2012,30/12/2012,29/01/2013,Clicked,1,11,Mon,26,UK,Adult,Female \nSALES,01/01/2013,30/12/2012,29/01/2013,Clicked,1,12,Tue,59,UK,Adult,Male \nSALES,02/01/2013,30/12/2012,29/01/2013,Clicked,1,13,Wed,3,UK,Child,Male \nSALES,03/01/2013,30/12/2012,29/01/2013,Clicked,1,14,Thu,59,Germany,Adult,Female \nSALES,04/01/2013,30/12/2012,29/01/2013,No Click,0,15,Fri,39,UK,Adult,Male \nSALES,05/01/2013,30/12/2012,29/01/2013,Clicked,1,16,Sat,19,UK,Adult,Male \nSALES,07/01/2013,30/12/2012,29/01/2013,No Click,0,18,Mon,25,UK,Adult,Male \nSALES,08/01/2013,30/12/2012,29/01/2013,Clicked,1,19,Tue,6,UK,Child,Male \nSALES,09/01/2013,30/12/2012,29/01/2013,Clicked,1,20,Wed,55,Germany,Adult,Female \nSALES,10/01/2013,30/12/2012,29/01/2013,Clicked,1,21,Thu,19,UK,Adult,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,No Click,0,22,Fri,32,UK,Adult,Male \nSALES,12/01/2013,30/12/2012,29/01/2013,Clicked,1,23,Sat,18,UK,Adult,Female \nSALES,14/01/2013,30/12/2012,29/01/2013,Clicked,1,25,Mon,7,UK,Child,Male \nSALES,30/12/2012,30/12/2012,29/01/2013,Clicked,1,32,Sun,59,France,Adult,Female \nSALES,31/12/2012,30/12/2012,29/01/2013,Clicked,1,33,Mon,28,France,Adult,Male \nSALES,01/01/2013,30/12/2012,29/01/2013,Clicked,1,34,Tue,31,UK,Adult,Male \nSALES,02/01/2013,30/12/2012,29/01/2013,No Click,0,35,Wed,3,France,Child,Female \nSALES,03/01/2013,30/12/2012,29/01/2013,Clicked,1,36,Thu,38,France,Adult,Male \nSALES,04/01/2013,30/12/2012,29/01/2013,Clicked,1,37,Fri,50,France,Adult,Male \nSALES,05/01/2013,30/12/2012,29/01/2013,Clicked,1,38,Sat,57,France,Adult,Female \nSALES,06/01/2013,30/12/2012,29/01/2013,Clicked,1,39,Sun,38,France,Adult,Male \nSALES,07/01/2013,30/12/2012,29/01/2013,Clicked,1,40,Mon,31,UK,Adult,Male \nSALES,08/01/2013,30/12/2012,29/01/2013,No Click,0,41,Tue,33,France,Adult,Female \nSALES,09/01/2013,30/12/2012,29/01/2013,Clicked,1,42,Wed,34,France,Adult,Male \nSALES,10/01/2013,30/12/2012,29/01/2013,Clicked,1,43,Thu,59,France,Adult,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,No Click,0,44,Fri,13,France,Teen,Female \nSALES,12/01/2013,30/12/2012,29/01/2013,Clicked,1,45,Sat,2,France,Child,Male \nSALES,13/01/2013,30/12/2012,29/01/2013,Clicked,1,46,Sun,39,UK,Adult,Male \nSALES,30/12/2012,30/12/2012,29/01/2013,Clicked,1,54,Sun,18,France,Adult,Male \nSALES,01/01/2013,30/12/2012,29/01/2013,Clicked,1,55,Tue,13,France,Teen,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,Clicked,1,56,Fri,50,France,Adult,Female \nSALES,11/01/2013,30/12/2012,29/01/2013,No Click,0,57,Fri,19,France,Adult,Male \nSALES,03/01/2013,30/12/2012,29/01/2013,Clicked,1,58,Thu,22,USA,Adult,Male \nSALES,04/01/2013,30/12/2012,29/01/2013,Clicked,1,59,Fri,11,USA,Child,Female \nSALES,05/01/2013,30/12/2012,29/01/2013,No Click,0,60,Sat,56,USA,Adult,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,Clicked,1,61,Fri,7,USA,Child,Male \nSALES,07/01/2013,30/12/2012,29/01/2013,Clicked,1,62,Mon,9,USA,Child,Female \nSALES,08/01/2013,30/12/2012,29/01/2013,Clicked,1,63,Tue,43,France,Adult,Male \nSALES,09/01/2013,30/12/2012,29/01/2013,Clicked,1,64,Wed,2,France,Child,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,Clicked,1,66,Fri,32,USA,Adult,Male \nSALES,12/01/2013,30/12/2012,29/01/2013,Clicked,1,67,Sat,4,USA,Child,Male \nSALES,13/01/2013,30/12/2012,29/01/2013,Clicked,1,68,Sun,47,USA,Adult,Female \nSALES,14/01/2013,30/12/2012,29/01/2013,No Click,0,69,Mon,49,USA,Adult,Male" 
 
// set the dimensions and margins of the graph 
 
var margin = { 
 
    top: 20, 
 
    right: 20, 
 
    bottom: 30, 
 
    left: 40 
 
    }, 
 
    width = 300 - margin.left - margin.right, 
 
    height = 200 - margin.top - margin.bottom; 
 

 
// set the ranges 
 
var x = d3.scaleBand() 
 
    .range([0, width]) 
 
    .padding(0.1); 
 
var y = d3.scaleLinear() 
 
    .range([height, 0]); 
 

 
// append the svg object to the body of the page 
 
// append a 'group' element to 'svg' 
 
// moves the 'group' element to the top left margin 
 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", 
 
    "translate(" + margin.left + "," + margin.top + ")"); 
 

 
// get the data 
 
var data = d3.csvParse(dataString); 
 

 
//console.log(data[0]); 
 

 
// format all data from strings 
 
data.forEach(function(d) { 
 
    d.data = +d.data; 
 
}); 
 

 
// Array [ Object, Object ] Key: Clicked, Key: No Clicked 
 
var nested_data = d3.nest() 
 
    .key(function(d) { 
 
    return d.Clicked; 
 
    }) 
 
    .key(function(d) { 
 
    return d.Campaign 
 
    }) 
 
    .rollup(function(values) { 
 
    return values.length; 
 
    }) 
 
    .entries(data); 
 

 
var clicked_data = nested_data.find(d => d.key == "Clicked").values 
 

 
// Scale the range of the data in the domains 
 
x.domain(clicked_data.map(function(d) { 
 
    return d.key; 
 
})); 
 
y.domain([0, d3.max(clicked_data, function(d) { 
 
    return d.value; 
 
})]); 
 

 
// append the rectangles for the bar chart 
 
svg.selectAll(".bar") 
 
    .data(clicked_data) 
 
    .enter().append("rect") 
 

 
    .attr("class", "bar") 
 
    .attr("x", function(d) { 
 
    return x(d.key); 
 
    }) 
 
    .attr("width", x.bandwidth()) 
 

 
    .attr("y", function(d) { 
 
    return y(d.value); 
 
    }) 
 
    .attr("height", function(d) { 
 
    return height - y(d.value); 
 
    }); 
 

 

 

 
// add the x Axis 
 
svg.append("g") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(d3.axisBottom(x)); 
 

 
// add the y Axis 
 
svg.append("g") 
 
    .call(d3.axisLeft(y));

<script src="https://d3js.org/d3.v4.min.js"></script>

出典

2017-04-25 18:33:56 thedude

私は行方不明のリンクの多くを持っていた見ることができます。あなたの提案に基づいてコードを修正しました。これは機能します。ありがとう、私はこれを自分で解決することはできませんでした。同じnested_dataを使用して、x軸を「Click_Date」、y軸の「Clicked」値をとした1行（d3.lineジェネレータ）のclicked_dataを3つのキャンペーンで表示しようとしています。未定義。私はd3.line（）とパスを使用しています。 console.logにこのエラーが表示されます。エラー：属性d：予想される番号 "MNaN、0Z"。 "console.log"とすると、clicked_dataが次のように読み取られていることがわかります。コード。私はここに、このビットに仕事をしなければならないと仮定します。

svg.append("path") .data([clicked_data]) .attr("class", "line") .attr("d", valueline);

// set the dimensions and margins of the graph 
var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

// parse the date/time 
var parseTime = d3.timeParse("%d-%b-%y"); 

// set the ranges 
var x = d3.scaleTime().range([0, width]); 
var y = d3.scaleLinear().range([height, 0]); 

// define the line 
var valueline = d3.line() 
    .x(function(d) { return x(d.key); }) 
    .y(function(d) { return y(d.value); }); 
console.log(valueline); 

// append the svg obgect to the body of the page 
// appends a 'group' element to 'svg' 
// moves the 'group' element to the top left margin 
var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")"); 

// Get the data 
d3.csv("EmailMarketingCampaign_Data.csv", function(error, data) { 
    if (error) throw error; 

/* function convert(d) { 
    return { 
    date: new Date(d.Click_Date), 
    value: +d.value   // convert string to number 
    }; 
} */ 

    // format the data 
    data.forEach(function(d) { 
     d.Click_Date = parseTime(d.Click_Date); 
     d.value = +d.value; 
    }); 

    /* Two level grouping in nested_data: Clicked and Campaign */ 

var nested_data = d3.nest() 
    .key(function(d) { 
    return d.Clicked; 
    }) 
    .key(function(d) { 
    return d.Click_Date 
    }) 
    .rollup(function(values) { 
    return values.length; 
    }) 
    .entries(data); 

/* Get values from key "Clicked" and put in clicked_date */ 

var clicked_data = nested_data.find(d => d.key == "Clicked").values 

console.log(clicked_data); 

    // Scale the range of the data 
    x.domain(d3.extent(clicked_data, function(d) { return d.key; })); 
    y.domain([0, d3.max(clicked_data, function(d) { return d.value; })]); 

    // Add the valueline path. 
    svg.append("path") 
     .data([clicked_data]) 
     .attr("class", "line") 
     .attr("d", valueline); 

    // Add the X Axis 
    svg.append("g") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x)); 

    // Add the Y Axis 
    svg.append("g") 
     .call(d3.axisLeft(y)); 

});

var dataString = "Campaign,Click_Date,Start,End,Clicked,clickedFlag,Customer ID,weekDay,Age,Country,Demographic,Gender \nEXTORTION,30/12/2012,30/12/2012,29/01/2013,Clicked,1,10,Sun,30,UK,Adult,Male \nSALES,31/12/2012,30/12/2012,29/01/2013,Clicked,1,11,Mon,26,UK,Adult,Female \nSALES,01/01/2013,30/12/2012,29/01/2013,Clicked,1,12,Tue,59,UK,Adult,Male \nSALES,02/01/2013,30/12/2012,29/01/2013,Clicked,1,13,Wed,3,UK,Child,Male \nSALES,03/01/2013,30/12/2012,29/01/2013,Clicked,1,14,Thu,59,Germany,Adult,Female \nSALES,04/01/2013,30/12/2012,29/01/2013,No Click,0,15,Fri,39,UK,Adult,Male \nSALES,05/01/2013,30/12/2012,29/01/2013,Clicked,1,16,Sat,19,UK,Adult,Male \nSALES,07/01/2013,30/12/2012,29/01/2013,No Click,0,18,Mon,25,UK,Adult,Male \nSALES,08/01/2013,30/12/2012,29/01/2013,Clicked,1,19,Tue,6,UK,Child,Male \nSALES,09/01/2013,30/12/2012,29/01/2013,Clicked,1,20,Wed,55,Germany,Adult,Female \nSALES,10/01/2013,30/12/2012,29/01/2013,Clicked,1,21,Thu,19,UK,Adult,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,No Click,0,22,Fri,32,UK,Adult,Male \nSALES,12/01/2013,30/12/2012,29/01/2013,Clicked,1,23,Sat,18,UK,Adult,Female \nSALES,14/01/2013,30/12/2012,29/01/2013,Clicked,1,25,Mon,7,UK,Child,Male \nSALES,30/12/2012,30/12/2012,29/01/2013,Clicked,1,32,Sun,59,France,Adult,Female \nSALES,31/12/2012,30/12/2012,29/01/2013,Clicked,1,33,Mon,28,France,Adult,Male \nSALES,01/01/2013,30/12/2012,29/01/2013,Clicked,1,34,Tue,31,UK,Adult,Male \nSALES,02/01/2013,30/12/2012,29/01/2013,No Click,0,35,Wed,3,France,Child,Female \nSALES,03/01/2013,30/12/2012,29/01/2013,Clicked,1,36,Thu,38,France,Adult,Male \nSALES,04/01/2013,30/12/2012,29/01/2013,Clicked,1,37,Fri,50,France,Adult,Male \nSALES,05/01/2013,30/12/2012,29/01/2013,Clicked,1,38,Sat,57,France,Adult,Female \nSALES,06/01/2013,30/12/2012,29/01/2013,Clicked,1,39,Sun,38,France,Adult,Male \nSALES,07/01/2013,30/12/2012,29/01/2013,Clicked,1,40,Mon,31,UK,Adult,Male \nSALES,08/01/2013,30/12/2012,29/01/2013,No Click,0,41,Tue,33,France,Adult,Female \nSALES,09/01/2013,30/12/2012,29/01/2013,Clicked,1,42,Wed,34,France,Adult,Male \nSALES,10/01/2013,30/12/2012,29/01/2013,Clicked,1,43,Thu,59,France,Adult,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,No Click,0,44,Fri,13,France,Teen,Female \nSALES,12/01/2013,30/12/2012,29/01/2013,Clicked,1,45,Sat,2,France,Child,Male \nSALES,13/01/2013,30/12/2012,29/01/2013,Clicked,1,46,Sun,39,UK,Adult,Male \nSALES,30/12/2012,30/12/2012,29/01/2013,Clicked,1,54,Sun,18,France,Adult,Male \nSALES,01/01/2013,30/12/2012,29/01/2013,Clicked,1,55,Tue,13,France,Teen,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,Clicked,1,56,Fri,50,France,Adult,Female \nSALES,11/01/2013,30/12/2012,29/01/2013,No Click,0,57,Fri,19,France,Adult,Male \nSALES,03/01/2013,30/12/2012,29/01/2013,Clicked,1,58,Thu,22,USA,Adult,Male \nSALES,04/01/2013,30/12/2012,29/01/2013,Clicked,1,59,Fri,11,USA,Child,Female \nSALES,05/01/2013,30/12/2012,29/01/2013,No Click,0,60,Sat,56,USA,Adult,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,Clicked,1,61,Fri,7,USA,Child,Male \nSALES,07/01/2013,30/12/2012,29/01/2013,Clicked,1,62,Mon,9,USA,Child,Female \nSALES,08/01/2013,30/12/2012,29/01/2013,Clicked,1,63,Tue,43,France,Adult,Male \nSALES,09/01/2013,30/12/2012,29/01/2013,Clicked,1,64,Wed,2,France,Child,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,Clicked,1,66,Fri,32,USA,Adult,Male \nSALES,12/01/2013,30/12/2012,29/01/2013,Clicked,1,67,Sat,4,USA,Child,Male \nSALES,13/01/2013,30/12/2012,29/01/2013,Clicked,1,68,Sun,47,USA,Adult,Female \nSALES,14/01/2013,30/12/2012,29/01/2013,No Click,0,69,Mon,49,USA,Adult,Male" 
 
// set the dimensions and margins of the graph 
 
var margin = { 
 
    top: 20, 
 
    right: 20, 
 
    bottom: 30, 
 
    left: 40 
 
    }, 
 
    width = 300 - margin.left - margin.right, 
 
    height = 200 - margin.top - margin.bottom; 
 

 
// set the ranges 
 
var x = d3.scaleBand() 
 
    .range([0, width]) 
 
    .padding(0.1); 
 
var y = d3.scaleLinear() 
 
    .range([height, 0]); 
 

 
// append the svg object to the body of the page 
 
// append a 'group' element to 'svg' 
 
// moves the 'group' element to the top left margin 
 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", 
 
    "translate(" + margin.left + "," + margin.top + ")"); 
 

 
// get the data 
 
var data = d3.csvParse(dataString); 
 

 
//console.log(data[0]); 
 

 
// format all data from strings 
 
data.forEach(function(d) { 
 
    d.data = +d.data; 
 
}); 
 

 
// Array [ Object, Object ] Key: Clicked, Key: No Clicked 
 
var nested_data = d3.nest() 
 
    .key(function(d) { 
 
    return d.Clicked; 
 
    }) 
 
    .key(function(d) { 
 
    return d.Campaign 
 
    }) 
 
    .rollup(function(values) { 
 
    return values.length; 
 
    }) 
 
    .entries(data); 
 

 
var clicked_data = nested_data.find(d => d.key == "Clicked").values 
 

 
// Scale the range of the data in the domains 
 
x.domain(clicked_data.map(function(d) { 
 
    return d.key; 
 
})); 
 
y.domain([0, d3.max(clicked_data, function(d) { 
 
    return d.value; 
 
})]); 
 

 
// append the rectangles for the bar chart 
 
svg.selectAll(".bar") 
 
    .data(clicked_data) 
 
    .enter().append("rect") 
 

 
    .attr("class", "bar") 
 
    .attr("x", function(d) { 
 
    return x(d.key); 
 
    }) 
 
    .attr("width", x.bandwidth()) 
 

 
    .attr("y", function(d) { 
 
    return y(d.value); 
 
    }) 
 
    .attr("height", function(d) { 
 
    return height - y(d.value); 
 
    }); 
 

 

 

 
// add the x Axis 
 
svg.append("g") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(d3.axisBottom(x)); 
 

 
// add the y Axis 
 
svg.append("g") 
 
    .call(d3.axisLeft(y));

<script src="https://d3js.org/d3.v4.min.js"></script>

出典

2017-04-26 15:58:40 user7720911

D3.js d3.nest（）を使用して棒グラフでデータをグループ化する

総クリック数。キャンペーン。

EmailMarketingCampaign_Data.csv

答えて

関連する問題