mediatheque
This commit is contained in:
armansansd
Executable
+180
@@ -0,0 +1,180 @@
|
||||
<script type="text/javascript">
|
||||
var data = {{ data|json_encode|raw }};
|
||||
|
||||
let now = Date.now();
|
||||
/*let year_now = new Date().getFullYear() + 0;
|
||||
let futur = new Date( year_now.toString() );
|
||||
|
||||
now = futur.getTime();*/
|
||||
|
||||
let lane_array = []
|
||||
data.forEach(function(e){
|
||||
lane_array.push(e.title)
|
||||
});
|
||||
let datum = new Date('19990');
|
||||
let sec = datum.getTime();
|
||||
|
||||
var lanes = lane_array,
|
||||
laneLength = lanes.length,
|
||||
items = data,
|
||||
timeBegin = sec ,
|
||||
timeEnd = now ;
|
||||
|
||||
// get the d3 lib
|
||||
// append the d3
|
||||
var m = [20, 15, 15, 120], //top right bottom left -> margin
|
||||
w = 960 - m[1] - m[3], // width
|
||||
h = (laneLength * 150) - m[0] - m[2], // height
|
||||
miniHeight = laneLength * 12 + 50,
|
||||
mainHeight = h - miniHeight - 50;
|
||||
|
||||
//scales
|
||||
var x = d3.scaleLinear()
|
||||
.domain([timeBegin, timeEnd])
|
||||
.range([0, w]);
|
||||
|
||||
var x1 = d3.scaleLinear()
|
||||
.range([0, w]);
|
||||
|
||||
var y1 = d3.scaleLinear()
|
||||
.domain([0, laneLength])
|
||||
.range([0, mainHeight]);
|
||||
|
||||
var y2 = d3.scaleLinear()
|
||||
.domain([0, laneLength])
|
||||
.range([0, miniHeight]);
|
||||
|
||||
|
||||
|
||||
//creat the chart body
|
||||
var w_box = w + m[1] + m[3];
|
||||
var h_box = h + m[0] + m[2];
|
||||
var chart = d3.select(".datavis")
|
||||
.append("svg")
|
||||
.attr("viewBox",'0 0 '+ w_box +' '+ h_box )
|
||||
/*.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])*/
|
||||
.attr("class", "chart");
|
||||
|
||||
|
||||
var main = chart.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")")
|
||||
.attr("width", w)
|
||||
.attr("height", mainHeight)
|
||||
.attr("class", "main");
|
||||
|
||||
|
||||
// X axis
|
||||
const xaxis = d3.scaleLinear()
|
||||
.domain([timeBegin, timeEnd])
|
||||
.range([0, w]);
|
||||
|
||||
main.append("g")
|
||||
.attr("transform", "translate(0," + mainHeight + ")")
|
||||
.call(d3.axisBottom(xaxis).ticks(4).tickFormat(d3.timeFormat('%Y')))
|
||||
.selectAll("text")
|
||||
/*.attr("transform", "translate(-10,10)rotate(-45)")*/
|
||||
.style("text-anchor", "center")
|
||||
.style("font-size", 10)
|
||||
.style("fill", "black");
|
||||
|
||||
|
||||
|
||||
|
||||
//main lanes and texts
|
||||
main.append("g").selectAll(".laneLines")
|
||||
.data(items)
|
||||
.enter().append("line")
|
||||
.attr("x1", m[1])
|
||||
.attr("y1", function(d) {return y1(d.lane);})
|
||||
.attr("x2", w)
|
||||
.attr("y2", function(d) {return y1(d.lane);})
|
||||
.attr("stroke", "lightgray")
|
||||
|
||||
main.append("g").selectAll(".laneText")
|
||||
.data(lanes)
|
||||
.enter().append("text")
|
||||
.text(function(d) {return d;})
|
||||
.attr("x", -m[1])
|
||||
.attr("y", function(d, i) {return y1(i + .5);})
|
||||
.attr("dy", ".5ex")
|
||||
|
||||
.attr("text-anchor", "end")
|
||||
.attr("class", "laneText");
|
||||
|
||||
// coalition
|
||||
|
||||
var coa = main.append("g").selectAll("rect")
|
||||
.data(items)
|
||||
.enter().append("rect")
|
||||
.attr("class", "coalition")
|
||||
.attr("x", function(d) {var date = new Date(d.start); console.log(d.start); return x(d.start);})
|
||||
.attr("y", function(d) {return y1(d.lane) + 10;})
|
||||
.attr("height", function(d) {return .8 * y1(1);})
|
||||
.attr("width", function(d) { return x(d.end) - x(d.start);})
|
||||
.attr("pos", function(d) {return d.lane });
|
||||
|
||||
|
||||
// labels
|
||||
/*labels = main.append("g").selectAll("text")
|
||||
.data(items, function (d) { return d.id; })
|
||||
.attr("x", function(d) {return x(d.start + 2);});
|
||||
|
||||
labels.enter().append("text")
|
||||
.text(function(d) {return d.id;})
|
||||
.attr("fill", "White")
|
||||
.attr("x", function(d) {return x(d.start + 2);})
|
||||
.attr("y", function(d) {return y1(d.lane + .5);});*/
|
||||
|
||||
|
||||
|
||||
//ok
|
||||
var act = main.append("g").selectAll("activists")
|
||||
.data(items)
|
||||
.enter()
|
||||
act.selectAll("rects")
|
||||
.data(function(d){ return d.activist })
|
||||
.enter().append("rect")
|
||||
.attr("x", function (d) { return x(d.start) } )
|
||||
.attr("y", function(d, i) { let l = items[d.lane].activist.length; let margin = y1(1)/(l+1) ; /*return y1(d.lane)*/ return y1( d.lane ) + ( margin * (i+1)) - 10 })
|
||||
.attr("height", 15 )
|
||||
.attr("width", function(d) {return x(d.end) - x(d.start);} )
|
||||
.attr("class", "rectangle");
|
||||
|
||||
act.selectAll("name")
|
||||
.data(function(d){ return d.activist })
|
||||
.enter().append("text")
|
||||
.text(function(d) {return d.name;})
|
||||
.attr("class", "name")
|
||||
.attr("x", function(d) {return x(d.start + .4) + 7;})
|
||||
.attr("y", function(d, i) {let l = items[d.lane].activist.length; let margin = y1(1)/(l+1) ; return y1( d.lane ) + ( margin * (i+1) ) + 1 });
|
||||
|
||||
|
||||
//adjust rect size
|
||||
let rect_array = $(".rectangle");
|
||||
$(".name").each(function(i, e){
|
||||
var bbox = this.getBBox();
|
||||
let name_size = bbox.width;
|
||||
let rect_size = $(rect_array[i]).width();
|
||||
if( name_size+ 15 > rect_size){
|
||||
$(rect_array[i]).css("width", name_size + 15);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//chart interaction
|
||||
|
||||
$(".rectangle").on("click", function(){
|
||||
$(".container_info").fadeIn("fast", function(){
|
||||
$(this).css("display", "grid");
|
||||
});
|
||||
});
|
||||
$(".container_info .button").on("click", function(){
|
||||
$(".container_info").fadeOut();
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user