console
var trendData = [0.000190353077, 0.000364385816, 0.617169202];
var data = [{"score":null,"value":0.6202124357223511,"version":"1.0"},{"score":null,"value":0.6212450265884399,"version":"1.1"},{"score":null,"value":0.615913450717926,"version":"1.2"},{"score":null,"value":0.6159054636955261,"version":"1.3"},{"score":null,"value":0.6200280785560608,"version":"1.4"},{"score":null,"value":0.6315444111824036,"version":"1.5"},{"score":null,"value":0.6338903307914734,"version":"1.6"},{"score":null,"value":0.6327632665634155,"version":"1.6.1"},{"score":null,"value":0.6375644207000732,"version":"1.7"},{"score":65.3521,"value":0.6359522938728333,"version":"1.8"}]
var typeCriterionData = {"average_ripple_degree":{"averageValue":8.006811380386353,"standardDevitionValue":1.485579252243042,"versions":"","upValue":9.492390632629395,"name":"average_ripple_degree","downValue":6.5212321281433105},
"efficiency":{"averageValue":0.002657031058333814,"standardDevitionValue":0.00011353997979313135,"versions":"","upValue":0.0027705710381269455,"name":"efficiency","downValue":0.002543491078540683},
"Propagation":{"averageValue":0.34415818750858307,"standardDevitionValue":0.02638109028339386,"versions":"","upValue":0.37053927779197693,"name":"Propagation","downValue":0.3177770972251892},
"density":{"averageValue":0.001590172469150275,"standardDevitionValue":0.00015099317533895373,"versions":"","upValue":0.0017411656444892287,"name":"density","downValue":0.0014391792938113213},
"directionality":{"averageValue":0.9971920251846313,"standardDevitionValue":0.0009689927101135254,"versions":"","upValue":0.9981610178947449,"name":"directionality","downValue":0.9962230324745178},
"outdegree_assortativity_coefficient":{"averageValue":0.021385250613093376,"standardDevitionValue":0.04005868546664715,"versions":"","upValue":0.061443936079740524,"name":"outdegree_assortativity_coefficient","downValue":-0.018673434853553772},
"effective_diameter":{"averageValue":2.5,"standardDevitionValue":0.5,"versions":"","upValue":3,"name":"effective_diameter","downValue":2},"maximum_coreness":{"averageValue":4.5,"standardDevitionValue":0.5,"versions":"","upValue":5,"name":"maximum_coreness","downValue":4},"standard_structured_entropy":{"averageValue":0.9408111572265625,"standardDevitionValue":0.011526525020599365,"versions":"","upValue":0.9523376822471619,"name":"standard_structured_entropy","downValue":0.9292846322059631},
"Modularity":{"averageValue":0.6869038343429565,"standardDevitionValue":0.005529165267944336,"versions":"","upValue":0.6924329996109009,"name":"Modularity","downValue":0.6813746690750122},
"average_degree":{"averageValue":3.065023899078369,"standardDevitionValue":0.4098470211029053,"versions":"","upValue":3.4748709201812744,"name":"average_degree","downValue":2.655176877975464},
"clustering_coefficient":{"averageValue":0.05642326548695564,"standardDevitionValue":0.01899571344256401,"versions":"","upValue":0.07541897892951965,"name":"clustering_coefficient","downValue":0.03742755204439163},
"Complexity":{"averageValue":0.22331925481557846,"standardDevitionValue":0.009060658514499664,"versions":"","upValue":0.23237991333007812,"name":"Complexity","downValue":0.2142585963010788},
"Hierarchy":{"averageValue":0.3737349957227707,"standardDevitionValue":0.005277648568153381,"versions":"","upValue":0.3790126442909241,"name":"Hierarchy","downValue":0.3684573471546173},
"OE":{"averageValue":1.628799319267273,"standardDevitionValue":0.042377591133117676,"versions":"","upValue":1.6711769104003906,"name":"OE","downValue":1.5864217281341553},
"basic_cycles":{"averageValue":626.7921142578125,"standardDevitionValue":322.22705078125,"versions":"","upValue":949.0191650390625,"name":"basic_cycles","downValue":304.5650634765625},
"module_partition":{"averageValue":0.7035777866840363,"standardDevitionValue":0.024936765432357788,"versions":"","upValue":0.728514552116394,"name":"module_partition","downValue":0.6786410212516785}}
var title = "Modularity"
var chartID = "Modularity_trend"
var ndx = crossfilter(data);
var max = -10000;
var min = 10000;
verNumber = data.length;
for (var i = 0; i < data.length; i++) {
max = Math.max(max, data[i].value);
min = Math.min(min, data[i].value);
};
var upValue = max;
var downValue = min;
var typeData = typeCriterionData[title];
var upValue = typeData["upValue"];
var downValue = typeData["downValue"];
max = Math.max(max, upValue);
min = Math.min(min, downValue);
var xDim = ndx.dimension(function(d) {return d.version;});
var hits = xDim.group().reduceSum(function(d) {return d.value;});
var lineChart = dc.lineChart("#" + chartID);
chartWidth = 600;
chartHeight = 300;
chartMargins = {left : 60,top : 10,right : 40,bottom : 40};
g_width = chartWidth - chartMargins.left - chartMargins.right;
g_height = chartHeight - chartMargins.top - chartMargins.bottom;
lineChart
.width(chartWidth)
.height(chartHeight)
.dimension(xDim)
.group(hits)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.y(d3.scale.linear().domain([ min, max ]))
.brushOn(false)
.xAxisLabel('verision')
.yAxisLabel(title)
.renderDataPoints(true)
.clipPadding(30)
.margins(chartMargins)
.on(
'renderlet',
function(chart) {
var upy = typeCriterionData[title]["upValue"];
var numver = chart.x().range().length;
var updata = [ {
x : chart.x().range()[0],
y : chart.y()(upy)
}, {
x : chart.x().range()[numver - 1],
y : chart.y()(upy)
} ];
var upline = d3.svg.line()
.x(function(d) {return d.x;})
.y(function(d) {return d.y;});
var upchartBody = chart.select('g.chart-body');
var uppath = upchartBody.selectAll('path.extra')
.data([ updata ]);
uppath.enter()
.append('path')
.attr('class','averextra')
.attr('stroke', 'red')
.attr('id', 'averline')
.attr("stroke-width", 1)
.style("stroke-dasharray", ("10,3"));
uppath.attr('d', upline);
var downy = typeCriterionData[title]["downValue"];
var downdata = [ {
x : chart.x().range()[0],
y : chart.y()(downy)
}, {
x : chart.x().range()[numver - 1],
y : chart.y()(downy)
} ];
var downline = d3.svg.line()
.x(function(d) {return d.x;})
.y(function(d) {return d.y;});
var downchartBody = chart.select('g.chart-body');
var downpath = downchartBody
.selectAll('path.extra')
.data([ downdata ]);
downpath.enter().append('path')
.attr('class','downextra')
.attr('stroke', 'red')
.attr('id', 'downline')
.attr("stroke-width", 1)
.style("stroke-dasharray", ("10,3"));
downpath.attr('d', downline);
var avery = typeCriterionData[title]["averageValue"];
var averdata = [ {
x : chart.x().range()[0],
y : chart.y()(avery)
}, {
x : chart.x().range()[numver - 1],
y : chart.y()(avery)
} ];
var averline = d3.svg.line()
.x(function(d) {return d.x;})
.y(function(d) {return d.y;});
var averchartBody = chart.select('g.chart-body');
var averpath = averchartBody
.selectAll('path.extra')
.data([ averdata ]);
averpath.enter().append('path')
.attr('class','averextra')
.attr('stroke', 'red')
.attr('id', 'averline')
.attr("stroke-width", 1);
averpath.attr('d', averline);
var a = trendData[0];
var b = trendData[1];
var c = trendData[2];
var trendPlotData = d3.range(0, verNumber, 0.01)
.map(function(v) {return {
x: v,y: a*v*v+b*v+c};
});
var x_scale = d3.scale.linear()
.domain([0,verNumber])
.range([0, g_width]);
var y_scale = d3.scale.linear()
.domain([min,max])
.range([g_height,0]);
var trendLine = d3.svg.line()
.x(function(d) {return x_scale(d.x);})
.y(function(d) {return y_scale(d.y);})
.interpolate("cardinal");
var trendChartBody = chart.select('g.chart-body');
var trendPath = trendChartBody
.selectAll('path.extra')
.data([trendPlotData]);
trendPath.enter().append('path')
.attr('class','trendextra')
.attr('stroke', '#FF7F50')
.attr('id', 'averline')
.attr("stroke-width", 1)
.attr('fill', 'none');
trendPath.attr('d', trendLine);
});
lineChart.render();
<div id ="Modularity_trend" ></div><br>