mirror of https://github.com/CIRCL/lookyloo
81 lines
3.0 KiB
JavaScript
81 lines
3.0 KiB
JavaScript
"use strict";
|
|
var margin = {top: 50, right: 150, bottom: 50, left: 50};
|
|
var width = 1000;
|
|
var height = 800;
|
|
|
|
|
|
d3.json('/json/stats').then(json => {
|
|
var datasets = []
|
|
json.years.forEach(year => {
|
|
var submissions_year = { label: `Submissions ${year.year}`, x: [], y: [] }
|
|
var unique_urls_year = { label: `Unique URLs ${year.year}`, x: [], y: [] }
|
|
year.months.forEach(month => {
|
|
submissions_year.x.push(month.month_number)
|
|
unique_urls_year.x.push(month.month_number)
|
|
|
|
submissions_year.y.push(month.submissions)
|
|
unique_urls_year.y.push(month.uniq_urls)
|
|
});
|
|
datasets.push(submissions_year)
|
|
datasets.push(unique_urls_year)
|
|
});
|
|
|
|
var x_scale = d3.scaleLinear()
|
|
.domain([1, 12])
|
|
.range([0, width]);
|
|
var y_scale = d3.scaleLinear()
|
|
.domain([ 0,
|
|
d3.max(datasets, function(d) { return d3.max(d.y); })
|
|
])
|
|
.range([height, 0]);
|
|
|
|
var x_axis = d3.axisBottom(x_scale);
|
|
var y_axis = d3.axisLeft(y_scale);
|
|
var line = d3.line()
|
|
.x(d => { return x_scale(d[0]); })
|
|
.y(d => { return y_scale(d[1]); });
|
|
|
|
var svg = d3.select(".graphs").append("svg")
|
|
.attr("width", width + margin.right + margin.left)
|
|
.attr("height", height + margin.top + margin.bottom)
|
|
.append("g")
|
|
.attr("transform", `translate(${margin.left}, ${margin.top})`);
|
|
|
|
svg.append("g")
|
|
.attr("class", "x axis")
|
|
.attr("transform", `translate(0, ${height})`)
|
|
.call(x_axis);
|
|
|
|
svg.append("g")
|
|
.attr("class", "y axis")
|
|
.call(y_axis);
|
|
|
|
var data_lines = svg.selectAll(".d3_xy_chart_line")
|
|
.data(datasets.map(d => {return d3.zip(d.x, d.y);}))
|
|
.enter().append("g")
|
|
.attr("class", "d3_xy_chart_line");
|
|
|
|
data_lines.append("path")
|
|
.attr("class", "line")
|
|
.attr("d", line)
|
|
.attr("stroke", (_, i) => {return d3.schemeCategory10[i];});
|
|
|
|
data_lines.selectAll(".dot")
|
|
.data(datasets.map(d => {return d3.zip(d.x, d.y);}).flat())
|
|
.enter().append("circle") // Uses the enter().append() method
|
|
.attr("class", "dot") // Assign a class for styling
|
|
.attr("cx", function(d) { return x_scale(d[0]) })
|
|
.attr("cy", function(d) { return y_scale(d[1]) })
|
|
.attr("r", 3);
|
|
|
|
data_lines.append("text")
|
|
.datum((d, i) => { return {name: datasets[i].label, final: d[d.length-1]}; })
|
|
.attr("transform", d => {
|
|
return ( `translate(${x_scale(d.final[0])}, ${y_scale(d.final[1])})` ) ; })
|
|
.attr("x", 3)
|
|
.attr("dy", ".35em")
|
|
.attr("fill", (_, i) =>{ return d3.schemeCategory10[i]; })
|
|
.text(d => { return d.name; }) ;
|
|
|
|
});
|