mirror of https://github.com/CIRCL/lookyloo
chg: make stats graph more generic
Raphaël Vinot
parent
7bba854e0a
commit
48f370f471
|
|
@ -1,20 +0,0 @@
|
|||
.line {
|
||||
fill: none;
|
||||
stroke: #ffab00;
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
fill: none;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.dot {
|
||||
fill: #ffab00;
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.focus circle {
|
||||
fill: none;
|
||||
stroke: steelblue;
|
||||
}
|
||||
|
|
@ -1,61 +1,67 @@
|
|||
"use strict";
|
||||
var margin = {top: 50, right: 50, bottom: 50, left: 50};
|
||||
var margin = {top: 50, right: 150, bottom: 50, left: 50};
|
||||
var width = 1000;
|
||||
var height = 100;
|
||||
var height = 800;
|
||||
|
||||
var xScale = d3.scaleLinear()
|
||||
.domain([0, 12])
|
||||
.range([0, width]);
|
||||
|
||||
d3.json('/json/stats').then(json => {
|
||||
json['years'].forEach(year => {
|
||||
var dataset = [];
|
||||
year['months'].forEach(month => {
|
||||
dataset.push([month['month_number'], month['analysis']]);
|
||||
height = Math.max(month['analysis'] + 50, height);
|
||||
var datasets = []
|
||||
json.years.forEach(year => {
|
||||
var data_year = { label: `Analysis ${year.year}`, x: [], y: [] }
|
||||
year.months.forEach(month => {
|
||||
data_year.x.push(month.month_number)
|
||||
data_year.y.push(month.analysis)
|
||||
});
|
||||
var yScale = d3.scaleLinear()
|
||||
.domain([0, height])
|
||||
.range([height, 0]);
|
||||
|
||||
var line = d3.line()
|
||||
.x(d => { return xScale(d[0]); })
|
||||
.y(d => { return yScale(d[1]); })
|
||||
.curve(d3.curveMonotoneX)
|
||||
|
||||
var svg = d3.select(".graphs").append("svg")
|
||||
.attr("width", width + margin.left + margin.right)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", `translate(${margin.left}, ${margin.top})`);
|
||||
|
||||
svg.append("text")
|
||||
.attr("x", (width / 2))
|
||||
.attr("y", 0 - (margin.top / 2))
|
||||
.attr("text-anchor", "middle")
|
||||
.style("font-size", "20px")
|
||||
.text(year['year']);
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", `translate(0, ${height})`)
|
||||
.call(d3.axisBottom(xScale));
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
.call(d3.axisLeft(yScale));
|
||||
|
||||
svg.append("path")
|
||||
.datum(dataset)
|
||||
.attr("class", "line")
|
||||
.attr("d", line);
|
||||
|
||||
svg.selectAll(".dot")
|
||||
.data(dataset)
|
||||
.enter().append("circle")
|
||||
.attr("class", "dot")
|
||||
.attr("cx", d => { return xScale(d[0]) })
|
||||
.attr("cy", d => { return yScale(d[1]) })
|
||||
.attr("r", 5);
|
||||
datasets.push(data_year)
|
||||
});
|
||||
|
||||
var x_scale = d3.scaleLinear()
|
||||
.domain([0, 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.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; }) ;
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -76,8 +76,3 @@
|
|||
<script src='{{ url_for('static', filename='d3.v6.min.js') }}'></script>
|
||||
<script src='{{ url_for('static', filename='stats_graph.js') }}'></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block styles %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='stats.css') }}">
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue