110 lines
3.0 KiB
HTML
110 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
/* set the CSS */
|
|
/* .line {
|
|
fill: none;
|
|
stroke: steelblue;
|
|
stroke-width: 2px;
|
|
} */
|
|
|
|
.chart rect {
|
|
fill: steelblue;
|
|
stroke: none;
|
|
}
|
|
|
|
text {
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<!-- <svg width="960" height="600"></svg> -->
|
|
<!-- load the d3.js library -->
|
|
<svg class="chart"></svg>
|
|
<script src="https://d3js.org/d3.v4.min.js"></script>
|
|
<script src="js/lib/intercom.js"></script>
|
|
<script>
|
|
var data,
|
|
xDomain,
|
|
yDomain;
|
|
|
|
var intercom = Intercom.getInstance();
|
|
intercom.on("passedData", function (d) {
|
|
data = [];
|
|
var tmp = d.distribution;
|
|
for (var i = 0; i < d.l; i++) {
|
|
data.push({"index": i, "size": tmp[i]});
|
|
}
|
|
xDomain = d.l;
|
|
yDomain = d.maxSize;
|
|
showData(data);
|
|
});
|
|
|
|
// set the dimensions and margins of the graph
|
|
var margin = { top: 20, right: 20, bottom: 90, left: 70 },
|
|
width = 1500 - margin.left - margin.right,
|
|
height = 600 - margin.top - margin.bottom;
|
|
|
|
// 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 chart = d3.select(".chart")
|
|
.attr("width", width + margin.left + margin.right)
|
|
.attr("height", height + margin.top + margin.bottom)
|
|
.append("g")
|
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
|
|
|
function showData(data) {
|
|
|
|
d3.selectAll(".bar").remove();
|
|
d3.selectAll(".xAxis").remove();
|
|
d3.selectAll(".yAxis").remove();
|
|
|
|
// set the ranges
|
|
var x = d3.scaleLinear().range([0, width]).domain([0, xDomain]);
|
|
var y = d3.scaleLinear().range([height, 0]).domain([0, yDomain]);
|
|
|
|
var barWidth = width / data.length;
|
|
|
|
// Add the X Axis
|
|
chart.append("g")
|
|
.attr("class", "xAxis")
|
|
.attr("transform", "translate(0," + height + ")")
|
|
.call(d3.axisBottom(x));
|
|
|
|
// Add the Y Axis
|
|
chart.append("g")
|
|
.attr("class", "yAxis")
|
|
.call(d3.axisLeft(y));
|
|
|
|
chart.selectAll(".bar")
|
|
.data(data)
|
|
.enter().append("rect")
|
|
.attr("class", "bar")
|
|
.attr("x", function (d) { return x(d.index); })
|
|
.attr("y", function (d) { return y(d.size); })
|
|
.attr("height", function (d) { return height - y(d.size); })
|
|
.attr("width", barWidth);
|
|
}
|
|
|
|
// Add x axis label
|
|
chart.append("text")
|
|
.attr("transform",
|
|
"translate(" + (width / 2) + " ," +
|
|
(height + margin.top + 30) + ")")
|
|
.style("text-anchor", "middle")
|
|
.style("font-size", "22px")
|
|
.text("Points");
|
|
|
|
// Add y axis label
|
|
chart.append("text")
|
|
.attr("transform", "rotate(-90)")
|
|
.attr("y", 0 - margin.left)
|
|
.attr("x", 0 - (height / 2))
|
|
.attr("dy", "1em")
|
|
.style("text-anchor", "middle")
|
|
.style("font-size", "22px")
|
|
.text("Number of neighbours");
|
|
</script>
|
|
</body> |