mirror of https://github.com/D4-project/d4-core
238 lines
5.0 KiB
HTML
238 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<!-- Core CSS -->
|
|
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
|
|
|
|
<!-- JS -->
|
|
<script src="{{ url_for('static', filename='js/d3.min.js')}}"></script>
|
|
|
|
<style>
|
|
#div_chart{
|
|
width:600px;
|
|
margin:20px;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
font: inherit;
|
|
font-size: 100%;
|
|
vertical-align: baseline;
|
|
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
|
font-weight: inherit;
|
|
}
|
|
#chart{
|
|
width:600px;
|
|
height:500px;
|
|
}
|
|
.bar{
|
|
fill:#eaeaea;
|
|
}
|
|
text.label{
|
|
fill: #777777;
|
|
color: #777777;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
text.category{
|
|
fill: #666666;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<div id="everything">
|
|
<div id="chart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div id="everything">
|
|
<div id="charter"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
<script>
|
|
////
|
|
//http://bl.ocks.org/charlesdguthrie/11356441, updated and modified
|
|
//updating BarChart
|
|
var setup = function(targetID){
|
|
//Set size of svg element and chart
|
|
var margin = {top: 0, right: 0, bottom: 0, left: 0},
|
|
width = 600 - margin.left - margin.right,
|
|
height = 500 - margin.top - margin.bottom,
|
|
categoryIndent = 4*15 + 5,
|
|
defaultBarWidth = 2000;
|
|
|
|
//Set up scales
|
|
var x = d3.scaleLinear()
|
|
.domain([0,defaultBarWidth])
|
|
.range([0,width]);
|
|
var y = d3.scaleBand()
|
|
.rangeRound([0, height])
|
|
.padding(0.1);
|
|
|
|
d3.select(targetID).selectAll("svg").remove()
|
|
var svg = d3.select(targetID).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 + ")");
|
|
|
|
var settings = {
|
|
margin:margin, width:width, height:height, categoryIndent:categoryIndent,
|
|
svg:svg, x:x, y:y
|
|
}
|
|
return settings;
|
|
}
|
|
|
|
var redrawChart = function(targetID, newdata) {
|
|
|
|
//Import settings
|
|
var margin=settings.margin, width=settings.width, height=settings.height, categoryIndent=settings.categoryIndent,
|
|
svg=settings.svg, x=settings.x, y=settings.y;
|
|
|
|
//Reset domains
|
|
y.domain(newdata.sort(function(a,b){
|
|
return b.value - a.value;
|
|
})
|
|
.map(function(d) { return d.key; }));
|
|
var barmax = d3.max(newdata, function(e) {
|
|
return e.value;
|
|
});
|
|
x.domain([0,barmax]);
|
|
|
|
/////////
|
|
//ENTER//
|
|
/////////
|
|
|
|
//Create chart row and move to below the bottom of the chart
|
|
var chartRow = svg.selectAll("g.chartRow")
|
|
.data(newdata, function(d){ return d.key});
|
|
var newRow = chartRow
|
|
.enter()
|
|
.append("g")
|
|
.attr("class", "chartRow")
|
|
.attr("transform", "translate(0," + height + margin.top + margin.bottom + ")");
|
|
|
|
//bars
|
|
newRow.insert("rect")
|
|
.attr("class","bar")
|
|
.attr("x", 0)
|
|
.attr("opacity",0)
|
|
.attr("height", y.bandwidth())
|
|
.attr("width", function(d) { return x(d.value);})
|
|
|
|
//labels
|
|
newRow.append("text")
|
|
.attr("class","label")
|
|
.attr("y", y.bandwidth()/2)
|
|
.attr("x",0)
|
|
.attr("opacity",0)
|
|
.attr("dy",".35em")
|
|
.attr("dx","0.5em")
|
|
.text(function(d){return d.value;});
|
|
|
|
//text
|
|
newRow.append("text")
|
|
.attr("class","category")
|
|
.attr("text-overflow","ellipsis")
|
|
.attr("y", y.bandwidth()/2)
|
|
.attr("x",categoryIndent)
|
|
.attr("opacity",0)
|
|
.attr("dy",".35em")
|
|
.attr("dx","5em")
|
|
.text(function(d){return d.key});
|
|
|
|
|
|
//////////
|
|
//UPDATE//
|
|
//////////
|
|
|
|
//Update bar widths
|
|
chartRow.select(".bar").transition()
|
|
.duration(300)
|
|
.attr("width", function(d) { return x(d.value);})
|
|
.attr("opacity",1);
|
|
|
|
//Update data labels
|
|
chartRow.select(".label").transition()
|
|
.duration(300)
|
|
.attr("opacity",1)
|
|
.tween("text", function(d) {
|
|
var node = this, i = d3.interpolate(+this.textContent.replace(/\,/g,''), +d.value);
|
|
return function(t) {
|
|
node.textContent = Math.round(i(t));
|
|
};
|
|
});
|
|
|
|
//Fade in categories
|
|
chartRow.select(".category").transition()
|
|
.duration(300)
|
|
.attr("opacity",1);
|
|
|
|
|
|
////////
|
|
//EXIT//
|
|
////////
|
|
|
|
//Fade out and remove exit elements
|
|
chartRow.exit().transition()
|
|
.style("opacity","0")
|
|
.attr("transform", "translate(0," + (height + margin.top + margin.bottom) + ")")
|
|
.remove();
|
|
|
|
|
|
////////////////
|
|
//REORDER ROWS//
|
|
////////////////
|
|
|
|
var delay = function(d, i) { return 200 + i * 30; };
|
|
|
|
chartRow.transition()
|
|
.delay(delay)
|
|
.duration(900)
|
|
.attr("transform", function(d){ return "translate(0," + y(d.key) + ")"; });
|
|
};
|
|
|
|
var pullData = function(settings,callback){
|
|
d3.json("{{ url_for('_json_daily_uuid_stats') }}", function (err, data){
|
|
if (err) return console.warn(err);
|
|
callback(settings,data);
|
|
})
|
|
}
|
|
|
|
//Sort data in descending order
|
|
var formatData = function(data){
|
|
return data.sort(function (a, b) {
|
|
return b.value - a.value;
|
|
})
|
|
.slice(0, 15); // linit to 15 items
|
|
}
|
|
|
|
var redraw = function(settings){
|
|
pullData(settings,redrawChart)
|
|
}
|
|
|
|
//setup
|
|
var settings = setup('#chart');
|
|
redraw(settings)
|
|
|
|
//Interval
|
|
setInterval(function(){
|
|
redraw(settings)
|
|
}, 4000);
|
|
////
|
|
|
|
</script>
|