vukk/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Foo

  
## index.html

<!DOCTYPE html>
<meta charset="utf-8">

<style>
body {
  font: 12px sans-serif;
  margin-left: 20px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.y.axis path {
  display: none;
}

.y.axis line {
  stroke: #777;
  stroke-dasharray: 2,2;
}

/*.nomPeriode {display:none;}*/

text {
  display:block;
  background-color: #FFFFFF;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type="text/javascript">

var periodStart = 2005;
var periodEnd = 2016;

// Dates des périodes historiques
var periods = [
  [1,"JYU", 2011, 2012, "X"],
  [2, "Aalto", 2012, 2014, "X"],
  [3, "NTU", 2014, 2015, "X"],
  [4, "Aalto", 2015, 2016, "X"],
  ];

// Films
var films = [
  [2006,"The Lost Bladesman",2011,""],
  [2007,"Three Kingdoms: Resurrection of the Dragon",2008,""],
  [2008,"Mulan Joins the Army",1939,""],
  [2009,"Mulan",2009,""],
  [2014,"Shaolin Temple",1982,""],
  ];

// On associe chaque film à une période
for (var i = 0; i < films.length; i++) {
  for (var j = 0; j < periods.length; j++) {
    if (films[i][0] >= periods[j][2] && films[i][0] <= periods[j][3]) {
      films[i].push(periods[j][0]);
      break;
    }
  }
}

// On ordonne le tableau selon les dates
films.sort(function(a, b) { return (a[0] < b[0] ? -1 : (a[0] > b[0] ? 1 : 0)); });

// On détermine l'ordre d'affichage des films
var order = 1; var oldVar;
for (var i = 0; i < films.length; i++) {
  order++;
  if (films[i][0] - oldVar > 100 || order >= 27) {
    order = 1;
  }
  films[i].push(order);
  oldVar = films[i][0];
}

// Positionnement de la frise
var margin = {top: 20, right: 150, bottom: 20, left: 1},
width = 2000 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom;

// Frise
var formatNumber = d3.format(" 1f");

var x = d3.scale.linear()
  .domain([periodStart, periodEnd])
  .range([0, width]);

var y = d3.scale.linear()
  .domain([0, 30])
  .range([0, height]);

var xAxis = d3.svg.axis()
  .scale(x)
  .ticks(50)
  .tickFormat(formatNumber)
  .orient("bottom");

var svg = d3.select("body").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 gx = svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

var bar = 30;
// Affichage des périodes
svg.append("g").selectAll("periods")
  .data(periods)
  .enter().append("rect")
  .attr("class", "periods")
  .attr("x", function(d) {return x(d[2]);})
  .attr("y", function(d) {if (d[0] % 2 == 0) return height - (bar + 4); else return height - (bar + 4) * 2;}  )
  .attr("width", function(d) {return x(d[3]) - x(d[2]);})
  .attr("height", bar)
  .attr("fill", function(d) {  return "hsl(" + (360 - d[0] * 19) + ",50%,50%)" });
  //~ .on("mouseover", function(d) { d3.select("#nomPeriode" + d[0]).style("display", "block");})
  //~ .on("mouseout", function(d) { d3.select("#nomPeriode" + d[0]).style("display", "none");});

// Affichage des noms de période
svg.append("g").selectAll(".nomPeriode")
  .data(periods)
  .enter().append("a")
  .attr("xlink:href", function(d) {return d[4];})
  .append("text")
  .text(function(d) {return d[1];})
  .attr("class", "nomPeriode")
  .attr ("id", function(d) {return "nomPeriode" + d[0];})
  .attr("text-anchor", "middle")
  .attr("x", function(d) {return x((d[2] + d[3]) / 2);})
  .attr("y", function(d) {if (d[0] % 2 == 0) return height - (bar + 4); else return height - (bar + 4) * 2;}  )
  .attr("dy", "1.5em")
  .attr("font-weight", "bold");
  //~ .on("mouseover", function(d) { d3.select("#nomPeriode" + d[0]).style("display", "block");})
  //~ .on("mouseout", function(d) { d3.select("#nomPeriode" + d[0]).style("display", "none");});

// On génère des lignes pour les films
svg.append("g").selectAll("ligneFilm")
  .data(films)
  .enter().append("line")
  .attr("class", "ligneFilm")
  .attr("x1", function(d) {return x(d[0]);})
  .attr("y1", function(d) {if (d[4] % 2 == 0) return height - bar; else return height - bar * 2;})
  .attr("x2", function(d) {return x(d[0]);})
  .attr("y2", function(d) {return y(d[5]);})
  .attr("stroke", "grey");

// Affichage des titres de films
var titres = svg.append("g").selectAll("titreFilm")
  .data(films)
  .enter().append("a")
  .attr("xlink:href", function(d){if (d[3] === "") return "http://www.imdb.com/find?q=" + d[1] + " " + d[2] + "&s=tt"; else return d[3];})
  .attr("class", function(d) {return "titreFilm";});
titres.append("text")
  .text(function(d) {return d[1];})
  .attr("text-anchor", "left")
  .attr("x", function(d) {return x(d[0]);}  )
  .attr("y", function(d) {return y(d[5]);} )
  .attr("dy", "0.75em")
  .attr("dx", "0.25em");

</script>

	<!DOCTYPE html>
	<meta charset="utf-8">

	<style>
	body {
	font: 12px sans-serif;
	margin-left: 20px;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.y.axis path {
	display: none;
	}

	.y.axis line {
	stroke: #777;
	stroke-dasharray: 2,2;
	}

	/.nomPeriode {display:none;}/

	text {
	display:block;
	background-color: #FFFFFF;
	}
	</style>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script type="text/javascript">

	var periodStart = 2005;
	var periodEnd = 2016;

	// Dates des périodes historiques
	var periods = [
	[1,"JYU", 2011, 2012, "X"],
	[2, "Aalto", 2012, 2014, "X"],
	[3, "NTU", 2014, 2015, "X"],
	[4, "Aalto", 2015, 2016, "X"],
	];

	// Films
	var films = [
	[2006,"The Lost Bladesman",2011,""],
	[2007,"Three Kingdoms: Resurrection of the Dragon",2008,""],
	[2008,"Mulan Joins the Army",1939,""],
	[2009,"Mulan",2009,""],
	[2014,"Shaolin Temple",1982,""],
	];

	// On associe chaque film à une période
	for (var i = 0; i < films.length; i++) {
	for (var j = 0; j < periods.length; j++) {
	if (films[i][0] >= periods[j][2] && films[i][0] <= periods[j][3]) {
	films[i].push(periods[j][0]);
	break;
	}
	}
	}

	// On ordonne le tableau selon les dates
	films.sort(function(a, b) { return (a[0] < b[0] ? -1 : (a[0] > b[0] ? 1 : 0)); });

	// On détermine l'ordre d'affichage des films
	var order = 1; var oldVar;
	for (var i = 0; i < films.length; i++) {
	order++;
	if (films[i][0] - oldVar > 100 \|\| order >= 27) {
	order = 1;
	}
	films[i].push(order);
	oldVar = films[i][0];
	}

	// Positionnement de la frise
	var margin = {top: 20, right: 150, bottom: 20, left: 1},
	width = 2000 - margin.left - margin.right,
	height = 700 - margin.top - margin.bottom;

	// Frise
	var formatNumber = d3.format(" 1f");

	var x = d3.scale.linear()
	.domain([periodStart, periodEnd])
	.range([0, width]);

	var y = d3.scale.linear()
	.domain([0, 30])
	.range([0, height]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.ticks(50)
	.tickFormat(formatNumber)
	.orient("bottom");

	var svg = d3.select("body").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 gx = svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	var bar = 30;
	// Affichage des périodes
	svg.append("g").selectAll("periods")
	.data(periods)
	.enter().append("rect")
	.attr("class", "periods")
	.attr("x", function(d) {return x(d[2]);})
	.attr("y", function(d) {if (d[0] % 2 == 0) return height - (bar + 4); else return height - (bar + 4) * 2;} )
	.attr("width", function(d) {return x(d[3]) - x(d[2]);})
	.attr("height", bar)
	.attr("fill", function(d) { return "hsl(" + (360 - d[0] * 19) + ",50%,50%)" });
	//~ .on("mouseover", function(d) { d3.select("#nomPeriode" + d[0]).style("display", "block");})
	//~ .on("mouseout", function(d) { d3.select("#nomPeriode" + d[0]).style("display", "none");});

	// Affichage des noms de période
	svg.append("g").selectAll(".nomPeriode")
	.data(periods)
	.enter().append("a")
	.attr("xlink:href", function(d) {return d[4];})
	.append("text")
	.text(function(d) {return d[1];})
	.attr("class", "nomPeriode")
	.attr ("id", function(d) {return "nomPeriode" + d[0];})
	.attr("text-anchor", "middle")
	.attr("x", function(d) {return x((d[2] + d[3]) / 2);})
	.attr("y", function(d) {if (d[0] % 2 == 0) return height - (bar + 4); else return height - (bar + 4) * 2;} )
	.attr("dy", "1.5em")
	.attr("font-weight", "bold");
	//~ .on("mouseover", function(d) { d3.select("#nomPeriode" + d[0]).style("display", "block");})
	//~ .on("mouseout", function(d) { d3.select("#nomPeriode" + d[0]).style("display", "none");});

	// On génère des lignes pour les films
	svg.append("g").selectAll("ligneFilm")
	.data(films)
	.enter().append("line")
	.attr("class", "ligneFilm")
	.attr("x1", function(d) {return x(d[0]);})
	.attr("y1", function(d) {if (d[4] % 2 == 0) return height - bar; else return height - bar * 2;})
	.attr("x2", function(d) {return x(d[0]);})
	.attr("y2", function(d) {return y(d[5]);})
	.attr("stroke", "grey");

	// Affichage des titres de films
	var titres = svg.append("g").selectAll("titreFilm")
	.data(films)
	.enter().append("a")
	.attr("xlink:href", function(d){if (d[3] === "") return "http://www.imdb.com/find?q=" + d[1] + " " + d[2] + "&s=tt"; else return d[3];})
	.attr("class", function(d) {return "titreFilm";});
	titres.append("text")
	.text(function(d) {return d[1];})
	.attr("text-anchor", "left")
	.attr("x", function(d) {return x(d[0]);} )
	.attr("y", function(d) {return y(d[5]);} )
	.attr("dy", "0.75em")
	.attr("dx", "0.25em");

	</script>