|
|
|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<title>CS590DV Final Project Visualization Template</title> |
|
<meta charset="UTF-8"> |
|
<link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/bootstrap.min.css"> |
|
<link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css" /> |
|
<script src="https://dc-js.github.io/dc.js/js/d3.js"></script> |
|
<script src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script> |
|
<script src="https://dc-js.github.io/dc.js/js/dc.js"></script> |
|
<script src="https://rawgit.com/crossfilter/reductio/master/reductio.js"></script> |
|
<script src="https://npmcdn.com/universe@latest/universe.js"></script> |
|
<script src="https://www.lactame.com/lib/ml/2.0.0/ml.min.js"></script> |
|
|
|
<style> .dc-chart g.row text {fill: black;} |
|
#ch1{ |
|
width:425px; |
|
height:415px; |
|
margin: 1%; |
|
padding:0; |
|
border:0; |
|
align:center; |
|
float:left; |
|
} |
|
#ch2{ |
|
width:425px; |
|
height:415px; |
|
margin: 1%; |
|
padding:0; |
|
border:0; |
|
float:left; |
|
} |
|
#opt { |
|
width: 8em; |
|
font-size: 10px; |
|
margin: 2px; |
|
padding: 0px; |
|
} |
|
#sec { |
|
width: 30%; |
|
height:60px; |
|
float:left; |
|
font-size: 10px; |
|
} |
|
#annotate{ |
|
width:100%; |
|
font-size:10px; |
|
color:black ; |
|
overflow:scroll; |
|
height:120px |
|
} |
|
h1{ |
|
align:center; |
|
color:crimson; |
|
} |
|
h2{ |
|
align:center; |
|
color:crimson; |
|
} |
|
h5{ |
|
font-size: 10px; |
|
margin: 2px; |
|
padding: 0px; |
|
} |
|
.dropdown { |
|
border: 1px solid #ccc; |
|
width: 8em; |
|
font-size: 10px; |
|
border-radius: 3px; |
|
overflow: visible; |
|
} |
|
input{ |
|
width: 4.5em; |
|
font-size: 10px; |
|
} |
|
.form{ |
|
width:10%; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body><div class="container" style="width:1000"> |
|
<div align="center"><h1 style="h1">CS590DV Final Project Visualization Template</h1></div> |
|
|
|
<script> |
|
var var1="age"; |
|
var var2="job"; |
|
var var3="marital"; |
|
var var4="month"; |
|
var var5="weekday"; |
|
var var6="Post Hour"; var var0="Paid"; |
|
var var7="Lifetime Post Total Reach"; |
|
var var8="Lifetime Post Total Impressions"; |
|
var var9="Lifetime Engaged Users"; |
|
var var10="Lifetime Post Consumers"; |
|
var var11="Lifetime Post Consumptions"; |
|
var var12="Lifetime Post Impressions by people who have liked your Page"; |
|
var var13="Lifetime Post reach by people who like your Page"; |
|
var var14="Lifetime People who have liked your Page and engaged with your post"; |
|
var var15="comment"; |
|
var var16="like"; |
|
var var17="euribor3m"; |
|
var var18="employees"; |
|
var mydata; |
|
</script> |
|
|
|
<div> |
|
<div id="ch1"> |
|
<div align="center"><h2>Pie Chart</h2></div> |
|
<div id="sec"> |
|
<h5>Piechart variable</h5> |
|
<select id="opt1" name="pie_var1" class="dropdown" onchange="draw_graphs()"> |
|
<option selected="selected" value="marital">marital</option> |
|
<option value="job">job</option> |
|
<option value="month">month</option> |
|
<option value="weekday">weekday</option> |
|
<option value="Post Hour">Post Hour</option> |
|
<option value="Paid">Paid</option> |
|
</select> |
|
</div> |
|
<div id="sec"> |
|
<h5>Groupby variable</h5> |
|
<select id="opt2" name="pie_var2" class="dropdown" onchange="draw_graphs()"> |
|
<option selected value="euribor3m">euribor3m</option> |
|
<option value="like">like</option> |
|
<option value="employees">employees</option> |
|
<option value="Lifetime Post Total Impressions">Lifetime Post Total Impressions</option> |
|
<option value="Lifetime Post Total Reach">Lifetime Post Total Reach</option> |
|
<option value="Lifetime Engaged Users">Lifetime Engaged Users</option> |
|
<option value="Lifetime Post Consumers">Lifetime Post Consumers</option> |
|
<option value="Lifetime Post Consumptions">Lifetime Post Consumptions</option> |
|
<option value="Lifetime Post Impressions by people who have liked your Page">Lifetime Post Impressions by people who have liked your Page</option> |
|
<option value="Lifetime Post reach by people who like your Page">Lifetime Post reach by people who like your Page</option> |
|
<option value="Lifetime People who have liked your Page and engaged with your post">Lifetime People who have liked your Page and engaged with your post</option> |
|
</select> |
|
</div> |
|
<div id="sec"> |
|
<h5>Measure option</h5> |
|
<select id="measureoption_pie" name="measure" class="dropdown" onchange="draw_graphs()"> |
|
<option selected value="average">Average</option> |
|
<option value="sum">Sum</option> |
|
<option value="count">Count</option> |
|
</select> |
|
</div> |
|
<div id="piechart11"></div> |
|
<div id="annotate"> |
|
<p>Majority(2/3) posts are unpaid contributions.Only 1/3 posts are paid.<br>Categpry 1 posts are shared less that other categories.<br>Paid posts gets liked more than unpaid post.The average number of shares is almost same for both paid and unpaid post.</p> |
|
</div> |
|
</div> |
|
|
|
<div id="ch2"> |
|
<div align="center" ><h2>Scatter Plot </h2></div> |
|
<div id="sec"> |
|
<h5>X Variable</h5> |
|
<select id="opt3" name="scatter_x" class="dropdown" onchange="draw_graphs()"> |
|
<option value="euribor3m">euribor3m</option> |
|
<option value="like">like</option> |
|
<option value="employees">employees</option> |
|
<option value="Lifetime Post Total Impressions">Lifetime Post Total Impressions</option> |
|
<option value="Lifetime Post Total Reach">Lifetime Post Total Reach</option> |
|
<option value="Lifetime Engaged Users">Lifetime Engaged Users</option> |
|
<option value="Lifetime Post Consumers">Lifetime Post Consumers</option> |
|
<option value="Lifetime Post Consumptions">Lifetime Post Consumptions</option> |
|
<option value="Lifetime Post Impressions by people who have liked your Page">Lifetime Post Impressions by people who have liked your Page</option> |
|
<option value="Lifetime Post reach by people who like your Page">Lifetime Post reach by people who like your Page</option> |
|
<option selected value="Lifetime People who have liked your Page and engaged with your post">Lifetime People who have liked your Page and engaged with your post</option> |
|
</select> |
|
</div> |
|
<div id="sec"> |
|
<h5>Y Variable</h5> |
|
<select id="opt4" name="scatter_y" class="dropdown" onchange="draw_graphs()"> |
|
<option selected value="euribor3m">euribor3m</option> |
|
<option value="like">like</option> |
|
<option value="employees">employees</option> |
|
<option value="Lifetime Post Total Impressions">Lifetime Post Total Impressions</option> |
|
<option value="Lifetime Post Total Reach">Lifetime Post Total Reach</option> |
|
<option value="Lifetime Engaged Users">Lifetime Engaged Users</option> |
|
<option value="Lifetime Post Consumers">Lifetime Post Consumers</option> |
|
<option value="Lifetime Post Consumptions">Lifetime Post Consumptions</option> |
|
<option value="Lifetime Post Impressions by people who have liked your Page">Lifetime Post Impressions by people who have liked your Page</option> |
|
<option value="Lifetime Post reach by people who like your Page">Lifetime Post reach by people who like your Page</option> |
|
<option value="Lifetime People who have liked your Page and engaged with your post">Lifetime People who have liked your Page and engaged with your post</option> |
|
</select> |
|
</div> |
|
<div id="scatter11"></div> |
|
<div id="annotate"> |
|
<p>Life time post consumption has positive correlation with people who liked and engaged with post. Category 1 posts that have high consumption have few people liked and engaged with post. The average number of share is also low.</p> |
|
</div> |
|
</div> |
|
|
|
<div id="ch1"> |
|
<div align="center"><h2>Histogram</h2></div> |
|
<div id="sec"> |
|
<h5>Histogram variable</h5> |
|
<select id="opt5" name="bar_var" class="dropdown" onchange="draw_graphs()"> |
|
<option selected value="euribor3m">euribor3m</option> |
|
<option value="like">like</option> |
|
<option value="employees">employees</option> |
|
<option value="Lifetime Post Total Impressions">Lifetime Post Total Impressions</option> |
|
<option value="Lifetime Post Total Reach">Lifetime Post Total Reach</option> |
|
<option value="Lifetime Engaged Users">Lifetime Engaged Users</option> |
|
<option value="Lifetime Post Consumers">Lifetime Post Consumers</option> |
|
<option value="Lifetime Post Consumptions">Lifetime Post Consumptions</option> |
|
<option value="Lifetime Post Impressions by people who have liked your Page">Lifetime Post Impressions by people who have liked your Page</option> |
|
<option value="Lifetime Post reach by people who like your Page">Lifetime Post reach by people who like your Page</option> |
|
<option value="Lifetime People who have liked your Page and engaged with your post">Lifetime People who have liked your Page and engaged with your post</option> |
|
<option value="marital">marital</option> |
|
<option value="job">job</option> |
|
<option value="month">month</option> |
|
<option value="weekday">weekday</option> |
|
<option value="Post Hour">Post Hour</option> |
|
<option value="Paid">Paid</option> |
|
</select> |
|
</div> |
|
<div id="sec"> |
|
<h5>Bin Width</h5> |
|
<form name="bar_var" class="form" method="get"> |
|
<input id="opt6" type="number" name="number" value=1 onchange="draw_graphs()"> |
|
</form> |
|
</div> |
|
<div id="hist11"></div> |
|
<div id="annotate"> |
|
<p> Measures of lifetime post total consumption, total reach, engaged users,total impressions are right skewed. This confirms that posts that have high user consumption,reach occur less often.</p> |
|
</div> |
|
</div> |
|
|
|
<div id="ch2"> |
|
<div align="center" ><h2>Row Chart</h2></div> |
|
<div id="sec"> |
|
<h5>Rowchart variable</h5> |
|
<select id="opt7" name="row_var1" class="dropdown" onchange="draw_graphs()"> |
|
<option selected="selected" value="job">job</option> |
|
<option value="marital">marital</option> |
|
<option value="month">month</option> |
|
<option value="weekday">weekday</option> |
|
<option value="Post Hour">Post Hour</option> |
|
<option value="Paid">Paid</option> |
|
</select> |
|
</div> |
|
<div id="sec"> |
|
<h5>Groupby variable</h5> |
|
<select id="opt8" name="row_var2" class="dropdown" onchange="draw_graphs()"> |
|
<option selected value="euribor3m">euribor3m</option> |
|
<option value="employees">employees</option> |
|
<option value="Lifetime Post Total Impressions">Lifetime Post Total Impressions</option> |
|
<option value="Lifetime Post Total Reach">Lifetime Post Total Reach</option> |
|
<option value="Lifetime Engaged Users">Lifetime Engaged Users</option> |
|
<option value="Lifetime Post Consumers">Lifetime Post Consumers</option> |
|
<option value="Lifetime Post Consumptions">Lifetime Post Consumptions</option> |
|
<option value="Lifetime Post Impressions by people who have liked your Page">Lifetime Post Impressions by people who have liked your Page</option> |
|
<option value="Lifetime Post reach by people who like your Page">Lifetime Post reach by people who like your Page</option> |
|
<option value="Lifetime People who have liked your Page and engaged with your post">Lifetime People who have liked your Page and engaged with your post</option> |
|
</select> |
|
</div> |
|
<div id="sec"> |
|
<h5>Measure option</h5> |
|
<select id="measureoption_row" name="measure_row" class="dropdown" onchange="draw_graphs()"> |
|
<option selected value="average">Average</option> |
|
<option value="sum">Sum</option> |
|
<option value="count">Count</option> |
|
</select> |
|
</div> |
|
<div id="hist21"></div> |
|
<div id="annotate"> |
|
<p> Category 2 post has high lifetime post consumptions. Video posts have highest average for total interaction(and share/like) and link posts have least average for total interaction(and share/like).</p> |
|
</div> |
|
</div> |
|
|
|
<div id="ch1"> |
|
<div align="center" ><h2>Heatmap</h2></div> |
|
<div id="sec"> |
|
<h5>X variable</h5> |
|
<select id="opt9" name="heat_var1" class="dropdown" onchange="draw_graphs()"> |
|
<option selected="selected"value="marital">marital</option> |
|
<option value="job">job</option> |
|
<option value="month">month</option> |
|
<option value="weekday">weekday</option> |
|
<option value="Post Hour">Post Hour</option> |
|
<option value="Paid">Paid</option> |
|
</select> |
|
</div> |
|
<div id="sec"> |
|
<h5>Y variable</h5> |
|
<select id="opt10" name="heat_var2" class="dropdown" onchange="draw_graphs()"> |
|
<option selected="selected" value="job">job</option> |
|
<option value="marital">marital</option> |
|
<option value="month">month</option> |
|
<option value="weekday">weekday</option> |
|
<option value="Post Hour">Post Hour</option> |
|
<option value="Paid">Paid</option> |
|
</select> |
|
</div> |
|
<div id="sec"> |
|
<h5>Groupby</h5> |
|
<select id="opt11" name="heat_var3" class="dropdown" onchange="draw_graphs()"> |
|
<option selected value="euribor3m">euribor3m</option> |
|
<option value="like">like</option> |
|
<option value="employees">employees</option> |
|
<option value="Lifetime Post Total Impressions">Lifetime Post Total Impressions</option> |
|
<option value="Lifetime Post Total Reach">Lifetime Post Total Reach</option> |
|
<option value="Lifetime Engaged Users">Lifetime Engaged Users</option> |
|
<option value="Lifetime Post Consumers">Lifetime Post Consumers</option> |
|
<option value="Lifetime Post Consumptions">Lifetime Post Consumptions</option> |
|
<option value="Lifetime Post Impressions by people who have liked your Page">Lifetime Post Impressions by people who have liked your Page</option> |
|
<option value="Lifetime Post reach by people who like your Page">Lifetime Post reach by people who like your Page</option> |
|
<option value="Lifetime People who have liked your Page and engaged with your post">Lifetime People who have liked your Page and engaged with your post</option> |
|
</select> |
|
</div> |
|
<div id="sec"> |
|
<h5>Measure option</h5> |
|
<select id="measureoption_heat" name="measure_heat" class="dropdown" onchange="draw_graphs()"> |
|
<option selected value="average">Average</option> |
|
<option value="sum">Sum</option> |
|
<option value="count">Count</option> |
|
</select> |
|
</div> |
|
<div id="heatmap11"></div> |
|
<div id="annotate"> |
|
<p> Only category 1 posts have videos. Total interactions, shares, likes increases through the week and peaks by weekday 4 and again reduces. Video posts foloowed by status have highest average for total interaction(and share/like) and link posts have least average for total interaction(and share/like). </p> |
|
</div> |
|
</div> |
|
|
|
<div id="ch2"> |
|
<div align="center" ><h2>Line Chart</h2></div> |
|
<div id="sec"> |
|
<h5>X variable</h5> |
|
<select id="opt12" name="line_var1" class="dropdown" onchange="draw_graphs()"> |
|
<option value="marital">marital</option> |
|
<option value="job">job</option> |
|
<option selected="selected" value="month">month</option> |
|
<option value="weekday">weekday</option> |
|
<option value="Post Hour">Post Hour</option> |
|
<option value="Paid">Paid</option> |
|
</select> |
|
</div> |
|
<div id="sec"> |
|
<h5>Y variable</h5> |
|
<select id="opt13" name="line_var2" class="dropdown" onchange="draw_graphs()"> |
|
<option value="euribor3m">euribor3m</option> |
|
<option selected="selected" value="like">like</option> |
|
<option value="employees">employees</option> |
|
<option value="Lifetime Post Total Impressions">Lifetime Post Total Impressions</option> |
|
<option value="Lifetime Post Total Reach">Lifetime Post Total Reach</option> |
|
<option value="Lifetime Engaged Users">Lifetime Engaged Users</option> |
|
<option value="Lifetime Post Consumers">Lifetime Post Consumers</option> |
|
<option value="Lifetime Post Consumptions">Lifetime Post Consumptions</option> |
|
<option value="Lifetime Post Impressions by people who have liked your Page">Lifetime Post Impressions by people who have liked your Page</option> |
|
<option value="Lifetime Post reach by people who like your Page">Lifetime Post reach by people who like your Page</option> |
|
<option value="Lifetime People who have liked your Page and engaged with your post">Lifetime People who have liked your Page and engaged with your post</option> |
|
</select> |
|
</div> |
|
<div id="sec"> |
|
<h5>Series</h5> |
|
<select id="opt14" name="line_var3" class="dropdown" onchange="draw_graphs()"> |
|
<option value="job">job</option> |
|
<option value="marital">marital</option> |
|
<option value="month">month</option> |
|
<option value="weekday">weekday</option> |
|
<option value="Post Hour">Post Hour</option> |
|
<option selected="selected" value="Paid">Paid</option> |
|
</select> |
|
</div> |
|
<div id="sec"> |
|
<h5>Measure option</h5> |
|
<select id="measureoption_line" name="measure_heat" class="dropdown" onchange="draw_graphs()"> |
|
<option selected value="average">Average</option> |
|
<option value="sum">Sum</option> |
|
<option value="count">Count</option> |
|
</select> |
|
</div> |
|
<div id="line11"></div> |
|
<div id="annotate"> |
|
<p> Paid posts likes increases during months 9-12 where as the likes for unpaid posts decreases. Months 4-5 and 9 have peaks in average likes. This suggests these are time of high activity. Only photo posts are liked and other types of posts are only shared.<br> Paid category 3 posts are not liked at all. </p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<script type="text/javascript"> |
|
var var1= "age"; |
|
var var2= "job"; |
|
var var3= "marital"; |
|
var var4="month"; |
|
var var5="weekday"; |
|
var var6="Post Hour"; var var0="Paid"; |
|
var var7="Lifetime Post Total Reach"; |
|
var var8="Lifetime Post Total Impressions"; |
|
var var9="Lifetime Engaged Users"; |
|
var var10= "Lifetime Post Consumers"; |
|
var var11="Lifetime Post Consumptions"; |
|
var var12="Lifetime Post Impressions by people who have liked your Page"; |
|
var var13="Lifetime Post reach by people who like your Page"; |
|
var var14="Lifetime People who have liked your Page and engaged with your post"; |
|
var var15="comment"; |
|
var var16="like"; |
|
var var17="euribor3m"; |
|
var var18="employees"; |
|
var mydata; |
|
var pie_var2=document.getElementById("opt2").value |
|
|
|
|
|
function draw_graphs(){ |
|
d3.csv("dataset_Facebook_no_na.csv", function(dataset) { |
|
dataset.forEach(function(d) { |
|
d[var1]=+d[var1]; |
|
d[var5]=+d[var5]; |
|
d[var6]=+d[var6]; |
|
d[var7]=+d[var7]; |
|
d[var8]=+d[var8]; |
|
d[var9]=+d[var9]; |
|
d[var10]=+d[var10]; |
|
d[var11]=+d[var11]; |
|
d[var12]=+d[var12]; |
|
d[var13]=+d[var13]; |
|
d[var14]=+d[var14]; |
|
d[var15]=+d[var15]; |
|
d[var16]=+d[var16]; |
|
d[var17]=+d[var17]; |
|
d[var18]=+d[var18]; |
|
}); // parsedata |
|
|
|
|
|
function remove_empty_bins(source_group) { |
|
return { |
|
all:function () { |
|
return source_group.all().filter( |
|
function(d) { return d.value != 0;}); |
|
}}; |
|
} |
|
|
|
// define dc charts |
|
var pieChart = dc.pieChart("#piechart11"), |
|
histChart = dc.barChart("#hist11"), |
|
rowChart = dc.rowChart("#hist21"), |
|
scatterplot=dc.scatterPlot("#scatter11"), |
|
heatmapChart = dc.heatMap("#heatmap11"), |
|
lineChart=dc.seriesChart("#line11"); |
|
|
|
var pie_var1=document.getElementById("opt1").value, |
|
pie_var2=document.getElementById("opt2").value, |
|
measure_pie=document.getElementById("measureoption_pie").value, |
|
scatter_x=document.getElementById("opt3").value, |
|
scatter_y=document.getElementById("opt4").value, |
|
bar_var=document.getElementById("opt5").value, |
|
row_var1 = document.getElementById("opt7").value, |
|
row_var2=document.getElementById("opt8").value, |
|
measure_row=document.getElementById("measureoption_row").value, |
|
heat_var1 = document.getElementById("opt9").value, |
|
heat_var2=document.getElementById("opt10").value, |
|
heat_var3=document.getElementById("opt11").value, |
|
measure_heat=document.getElementById("measureoption_heat").value, |
|
line_var1 = document.getElementById("opt12").value, |
|
line_var2=document.getElementById("opt13").value, |
|
line_var3=document.getElementById("opt14").value, |
|
measure_line=document.getElementById("measureoption_line").value; |
|
|
|
var binwidth=+document.getElementById("opt6").value; |
|
|
|
var ndx = crossfilter(dataset), |
|
pieDim = ndx.dimension(function(d) {return d[pie_var1];}), |
|
histDim = ndx.dimension(function(d) {return Math.floor(d[bar_var]);}), |
|
rowDim = ndx.dimension(function(d) {return d[row_var1];}), |
|
scatterDim=ndx.dimension(function(d){return [+d[scatter_x],+d[scatter_y]];}), |
|
heatDim=ndx.dimension(function(d){return[d[heat_var1],d[heat_var2]];}), |
|
lineDim=ndx.dimension(function(d){return[d[line_var3],+d[line_var1]];}), |
|
scattergroup=scatterDim.group(), |
|
scattergroup1=remove_empty_bins(scattergroup), |
|
linegroup=lineDim.group().reduceSum(function(d) { return +d[line_var2]; }); |
|
|
|
var piegroup=pieDim.group().reduce( |
|
/* callback for when data is added to the current filter results */ |
|
function (p, v) { |
|
++p.count; |
|
p.sum+= +v[pie_var2]; |
|
p.average = Math.round(p.sum / p.count); |
|
return p; |
|
}, |
|
/* callback for when data is removed from the current filter results */ |
|
function (p, v) { |
|
--p.count; |
|
p.sum-= +v[pie_var2]; |
|
p.average = Math.round(p.sum / p.count); |
|
return p; |
|
}, |
|
/* initialize p */ |
|
function () { |
|
return { |
|
count: 0, |
|
sum: 0, |
|
average: 0 |
|
}; |
|
} |
|
); |
|
|
|
var histrange=d3.extent(dataset,function(d){return +d[bar_var];}); |
|
var histDim = ndx.dimension(function(d) { |
|
// Threshold |
|
var threshold = d[bar_var]; |
|
if (threshold <= histrange[0]) threshold = histrange[0]; |
|
if (threshold >= histrange[1]) threshold = histrange[1] - binwidth; |
|
return binwidth * Math.floor(threshold / binwidth); |
|
}); |
|
var histgroup = histDim.group(); |
|
|
|
var rowgroup=rowDim.group().reduce( |
|
/* callback for when data is added to the current filter results */ |
|
function (p, v) { |
|
++p.count; |
|
p.sum+= +v[row_var2]; |
|
p.average = Math.round(p.sum / p.count); |
|
return p; |
|
}, |
|
/* callback for when data is removed from the current filter results */ |
|
function (p, v) { |
|
--p.count; |
|
p.sum-= +v[row_var2]; |
|
p.average = Math.round(p.sum / p.count); |
|
return p; |
|
}, |
|
/* initialize p */ |
|
function () { |
|
return { |
|
count: 0, |
|
sum: 0, |
|
average: 0 |
|
}; |
|
} |
|
); |
|
|
|
var heatgroup=heatDim.group().reduce( |
|
/* callback for when data is added to the current filter results */ |
|
function (p, v) { |
|
++p.count; |
|
p.sum+= +v[heat_var3]; |
|
p.average = Math.round(p.sum / p.count); |
|
return p; |
|
}, |
|
/* callback for when data is removed from the current filter results */ |
|
function (p, v) { |
|
--p.count; |
|
p.sum-= +v[heat_var3]; |
|
p.average = Math.round(p.sum / p.count); |
|
return p; |
|
}, |
|
/* initialize p */ |
|
function () { |
|
return { |
|
count: 0, |
|
sum: 0, |
|
average: 0 |
|
}; |
|
} |
|
); |
|
|
|
var linegroup=lineDim.group().reduce( |
|
/* callback for when data is added to the current filter results */ |
|
function (p, v) { |
|
++p.count; |
|
p.sum+= +v[line_var2]; |
|
p.average = Math.round(p.sum / p.count); |
|
return p; |
|
}, |
|
/* callback for when data is removed from the current filter results */ |
|
function (p, v) { |
|
--p.count; |
|
p.sum-= +v[line_var2]; |
|
p.average = Math.round(p.sum / p.count); |
|
return p; |
|
}, |
|
/* initialize p */ |
|
function () { |
|
return { |
|
count: 0, |
|
sum: 0, |
|
average: 0 |
|
}; |
|
} |
|
); |
|
|
|
pieChart |
|
.width(500).height(200) |
|
.dimension(pieDim) |
|
.group(piegroup) |
|
.valueAccessor(function(p){return p.value[measure_pie];}) |
|
.legend(dc.legend()) |
|
.title(function(d) { |
|
return pie_var1 +": "+ (d.key) + "\n" + |
|
measure_pie+ " of "+pie_var2 +": "+ ( d.value[measure_pie]);}) |
|
.innerRadius(50); |
|
|
|
histChart |
|
.width(300).height(200) |
|
.dimension(histDim) |
|
.group(histgroup) |
|
.yAxisLabel("Frequency") |
|
.xAxisLabel(bar_var) |
|
.x(d3.scale.linear().domain(d3.extent(dataset,function(d){return +d[bar_var];}))) |
|
.centerBar(false) |
|
.xUnits(dc.units.fp.precision(binwidth)) |
|
.elasticX(true) |
|
.elasticY(true); |
|
histChart.xAxis().tickFormat(d3.format("s")); |
|
histChart.yAxis().ticks(10); |
|
|
|
rowChart |
|
.width(500).height(200) |
|
.dimension(rowDim) |
|
.group(rowgroup) |
|
.valueAccessor(function(p){return p.value[measure_row];}) |
|
.rowsCap(16) |
|
.title(function(d) { |
|
return row_var1 +": "+ (d.key) + "\n " + |
|
measure_row+ " of "+row_var2 +": "+ ( d.value[measure_row]);}) |
|
.elasticX(true); |
|
|
|
scatterplot |
|
.width(500) |
|
.height(200) |
|
.x(d3.scale.linear().domain( [0, 1.1*d3.max(dataset, function(d) { return d[scatter_x]; })] )) |
|
.y(d3.scale.linear().domain( [0, 1.1*d3.max(dataset, function(d) { return d[scatter_y]; })] )) |
|
.yAxisLabel(scatter_y) |
|
.xAxisLabel(scatter_x) |
|
.clipPadding(10) |
|
.dimension(scatterDim) |
|
.excludedOpacity(0.5) |
|
.group(scattergroup) |
|
.margins().left += 20; |
|
scatterplot.yAxis().tickFormat(d3.format("s")); |
|
scatterplot.xAxis().tickFormat(d3.format("s")) ; |
|
|
|
heatmapChart |
|
.width(300) |
|
.height(200) |
|
.dimension(heatDim) |
|
.group(heatgroup) |
|
.keyAccessor(function(d) { return +d.key[0]; }) |
|
.valueAccessor(function(d) { return d.key[1]; }) |
|
.colorAccessor(function(d) { return +d.value[measure_heat]; }) |
|
.title(function(d) { |
|
return heat_var1 +": "+ d.key[0] + "\n" + |
|
heat_var2 + ": "+ d.key[1] + "\n" + |
|
heat_var3 +": "+ ( d.value[measure_heat]);}) |
|
.colors(d3.scale.linear().domain([d3.min(heatmapChart.data(),heatmapChart.colorAccessor()),d3.max(heatmapChart.data(),heatmapChart.colorAccessor())]).range(['beige', 'red'])) |
|
.legend(dc.legend()); |
|
heatmapChart.xBorderRadius(0); |
|
heatmapChart.yBorderRadius(0); |
|
var myvar1=function(d) { return Math.min(+d.value[measure_heat]); }; |
|
|
|
lineChart |
|
.width(500) |
|
.height(200) |
|
.chart(function(c) { return dc.lineChart(c).interpolate('linear'); }) |
|
.x(d3.scale.ordinal()) |
|
.xUnits(dc.units.ordinal) |
|
.yAxisLabel(line_var2) |
|
.xAxisLabel(line_var1) |
|
.ordering(function(d){return +d.key[1] ;}) |
|
.elasticY(true) |
|
.dimension(lineDim) |
|
.group(linegroup) |
|
.seriesAccessor(function(d) {return d.key[0];}) |
|
.keyAccessor(function(d) {return d.key[1]}) |
|
.valueAccessor(function(d) {return +d.value[measure_line] ;}) |
|
.renderHorizontalGridLines(true) |
|
.legend(dc.legend().x(300).y(0).itemHeight(10).gap(3).horizontal(2).legendWidth(140).itemWidth(40)); |
|
lineChart.yAxis().tickFormat(function(d) {return d}); |
|
lineChart.margins().left += 20; |
|
lineChart.yAxis().tickFormat(d3.format("s")); |
|
lineChart.xAxis().tickFormat(d3.format("s")) ; |
|
|
|
// Render everything |
|
dc.renderAll(); |
|
}); |
|
}; |
|
|
|
draw_graphs(); |
|
</script> |
|
</div></body> |
|
</html> |
