This is a simple bar graph written using d3.js v4.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.
forked from d3noob's block: Simple bar graph in v4
forked from jwang1616's block: final
forked from jwang1616's block: final
forked from jwang1616's block: final
forked from jwang1616's block: final
forked from jwang1616's block: final
forked from jwang1616's block: final
forked from jwang1616's block: final
forked from jwang1616's block: final
forked from jwang1616's block: final
forked from jwang1616's block: final
forked from jwang1616's block: final
forked from jwang1616's block: final
xxxxxxxxxx
<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://cdn.jsdelivr.net/gh/crossfilter/reductio/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="Post Month";
var var5="Post 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="share";
var var18="Total Interactions";
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="Post Month">Post Month</option>
<option value="Post Weekday">Post 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="share">share</option>
<option value="like">like</option>
<option value="Total Interactions">Total Interactions</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="share">share</option>
<option value="like">like</option>
<option value="Total Interactions">Total Interactions</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="share">share</option>
<option value="like">like</option>
<option value="Total Interactions">Total Interactions</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="share">share</option>
<option value="like">like</option>
<option value="Total Interactions">Total Interactions</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="Post Month">Post Month</option>
<option value="Post Weekday">Post 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="Post Month">Post Month</option>
<option value="Post Weekday">Post 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="share">share</option>
<option value="like">like</option>
<option value="Total Interactions">Total Interactions</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="Post Month">Post Month</option>
<option value="Post Weekday">Post 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="Post Month">Post Month</option>
<option value="Post Weekday">Post 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="share">share</option>
<option value="like">like</option>
<option value="Total Interactions">Total Interactions</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="Post Month">Post Month</option>
<option value="Post Weekday">Post 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="share">share</option>
<option selected="selected" value="like">like</option>
<option value="Total Interactions">Total Interactions</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="Post Month">Post Month</option>
<option value="Post Weekday">Post 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="Post Month";
var var5="Post 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="share";
var var18="Total Interactions";
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[var4]=+d[var4];
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>
Updated missing url https://rawgit.com/crossfilter/reductio/master/reductio.js to https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.js
https://dc-js.github.io/dc.js/js/d3.js
https://dc-js.github.io/dc.js/js/crossfilter.js
https://dc-js.github.io/dc.js/js/dc.js
https://rawgit.com/crossfilter/reductio/master/reductio.js
https://npmcdn.com/universe@latest/universe.js
https://www.lactame.com/lib/ml/2.0.0/ml.min.js