Fil/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This timeline shows the different times at which different political entities adopted the Gregorian calendar (in red), following its promulgation in 1582. Different colors identify different calendars, the turquoise one being the Julian calendar.
forked from nitaku's block: A timeline of calendars

  
## index.css
svg {
  background-color: white;
  font-family: sans-serif;
  font-size: 10px;
}
.domain {
  fill: none;
}
.border {
  fill: none;
  stroke: white;
  stroke-opacity: 0.3;
  fill: white;
  fill-opacity: 0.2;
  shape-rendering: crispEdges;
}
.axis line {
  stroke: white;
  stroke-opacity: 0.3;
  shape-rendering: crispEdges;
}
.date {
  text-anchor: middle;
}
.date_tick {
  stroke: black;
  shape-rendering: crispEdges;
}

.row .date {
  display: none;
  text-anchor: end;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff;
}
.row:hover .date {
  display: inline;
}
.row:hover .border {
  fill-opacity: 0;
}

.calname {
  text-anchor: middle;
  font-family: Georgia;
  font-size: 56px;
  opacity: 0.2;
  pointer-events: none;
}

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="A timeline of calendars" />
  <title>A timeline of calendars</title>
  <link rel="stylesheet" href="index.css">
  <script src="http://d3js.org/d3.v4.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
</head>
<body>
  <script src="index.js"></script>
</body>
</html>

## index.js
var margin = {top: 40, right: 40, bottom: 30, left: 120},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

var chart = 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 data = [{
	name: 'Stato della Chiesa',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1582
	},
	{
		name: 'gregoriano',
		time_start: 1582,
		time_end: 2014
	}]
},
{
	name: 'Portogallo',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1582
	},
	{
		name: 'gregoriano',
		time_start: 1582,
		time_end: 2014
	}]
},
{
	name: 'Regno di Napoli',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1582
	},
	{
		name: 'gregoriano',
		time_start: 1582,
		time_end: 2014
	}]
},
{
	name: 'Spagna',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1582
	},
	{
		name: 'gregoriano',
		time_start: 1582,
		time_end: 2014
	}]
},
{
	name: 'Venezia',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1582
	},
	{
		name: 'gregoriano',
		time_start: 1582,
		time_end: 2014
	}]
},
{
	name: 'Francia',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1583
	},
	{
		name: 'gregoriano',
		time_start: 1583,
		time_end: 2014
	}]
},
{
	name: 'Baviera',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1583
	},
	{
		name: 'gregoriano',
		time_start: 1583,
		time_end: 2014
	}]
},
{
	name: 'Austria',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1584
	},
	{
		name: 'gregoriano',
		time_start: 1584,
		time_end: 2014
	}]
},
{
	name: 'Ungheria',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1589
	},
	{
		name: 'gregoriano',
		time_start: 1589,
		time_end: 2014
	}]
},
{
	name: 'Svezia',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1592
	},
	{
		name: 'gregoriano',
		time_start: 1592,
		time_end: 1600
	},
	{
		name: 'giuliano',
		time_start: 1600,
		time_end: 1753
	},
	{
		name: 'gregoriano',
		time_start: 1753,
		time_end: 2014
	}]
},
{
	name: 'Prussia',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1610
	},
	{
		name: 'gregoriano',
		time_start: 1610,
		time_end: 2014
	}]
},
{
	name: 'Danimarca',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1700
	},
	{
		name: 'gregoriano',
		time_start: 1700,
		time_end: 2014
	}]
},
{
	name: 'Toscana',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1749
	},
	{
		name: 'gregoriano',
		time_start: 1749,
		time_end: 2014
	}]
},
{
	name: 'Regno Unito',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1752
	},
	{
		name: 'gregoriano',
		time_start: 1752,
		time_end: 2014
	}]
},
{
	name: 'Russia',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1923
	},
	{
		name: 'gregoriano',
		time_start: 1923,
		time_end: 2014
	}]
},
{
	name: 'Giappone',
	calendar: [{
		name: 'giapponese',
		time_start: 1400,
		time_end: 1853
	},
	{
		name: 'gregoriano',
		time_start: 1853,
		time_end: 2014
	}]
},
{
	name: 'Corea',
	calendar: [{
		name: 'coreano',
		time_start: 1400,
		time_end: 1896
	},
	{
		name: 'gregoriano',
		time_start: 1896,
		time_end: 2014
	}]
},
{
	name: 'Cina',
	calendar: [{
		name: 'cinese',
		time_start: 1400,
		time_end: 1912
	},
	{
		name: 'gregoriano',
		time_start: 1912,
		time_end: 2014
	}]
}];

var x = d3.scaleLinear()
  .domain ([1400,2014])
  .range([0, width]);

var countries = _.chain(data)
  .map(function(country){ return country.name; })
  .reverse()
  .value();

var y = d3.scaleBand()
  .domain(countries)
  .rangeRound([height, 0]);

var color = d3.scaleOrdinal()
  .domain(['giuliano','gregoriano','giapponese','coreano','cinese'])
  .range(["#8dd3c7","#fb8072","#80b1d3","#fdb462","#bc80bd","#ccebc5","#ffffb3","#ffed6f","#bebada","#b3de69","#fccde5","#d9d9d9"]);

var xAxis = d3.axisBottom()
  .scale(x)
  .tickFormat(d3.format("4"))
  .tickSize(-height);

var yAxis = d3.axisLeft()
  .scale(y);

var rows = chart.selectAll('.row')
    .data(data, function(country){ return country.name; });

rows.enter().append('g')
    .attr('class', 'row')
    .attr('transform', function(country) { return 'translate(0, ' + y(country.name) + ')'; })
  .append('rect')
    .attr('class','border')
    .attr('width', width)
    .attr('height', y.bandwidth());

chart.selectAll('.row').selectAll('.bar')
    .data(function(country){ console.log(country);return country.calendar; })
.enter().insert('rect',':first-child')
    .attr('class', 'bar')
    .attr('x', function(interval){ return x(interval.time_start); })
    .attr('width', function(interval){ return x(interval.time_end)-x(interval.time_start); })
    .attr('height', y.bandwidth())
    .attr('fill', function(interval){ return color(interval.name); });

chart.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

chart.append("g")
  .attr("class", "y axis")
  .call(yAxis);

// 1582
chart.append('text')
  .attr('class','date')
  .attr('x', x(1582))
  .text('1582')
  .style('font-size', '12px')
  .style('font-weight', 'bold');
chart.append('line')
  .attr('class', 'date_tick')
  .attr('x1', x(1582))
  .attr('x2', x(1582))
  .attr('y1', 2)
  .attr('y2', 7);

// date di cambiamento
rows.selectAll('.date')
    .data(function(country){ return [country.calendar[0].time_end]; })
  .enter().append('text')
    .attr('class','date')
    .text(function(d){ return d; })
    .attr('x', function(d){ return x(d); })
    .attr('y', y.bandwidth()/2 )
    .attr('dx', '-4px')
    .attr('dy', '0.35em');

// nomi calendari
chart.append('text')
  .text('Gregorian')
  .attr('class','calname')
  .attr('x', 550)
  .attr('y', 160);

chart.append('text')
  .text('Julian')
  .attr('class','calname')
  .attr('x', 150)
  .attr('y', 290);
	svg {
	background-color: white;
	font-family: sans-serif;
	font-size: 10px;
	}
	.domain {
	fill: none;
	}
	.border {
	fill: none;
	stroke: white;
	stroke-opacity: 0.3;
	fill: white;
	fill-opacity: 0.2;
	shape-rendering: crispEdges;
	}
	.axis line {
	stroke: white;
	stroke-opacity: 0.3;
	shape-rendering: crispEdges;
	}
	.date {
	text-anchor: middle;
	}
	.date_tick {
	stroke: black;
	shape-rendering: crispEdges;
	}

	.row .date {
	display: none;
	text-anchor: end;
	font-weight: bold;
	text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff;
	}
	.row:hover .date {
	display: inline;
	}
	.row:hover .border {
	fill-opacity: 0;
	}

	.calname {
	text-anchor: middle;
	font-family: Georgia;
	font-size: 56px;
	opacity: 0.2;
	pointer-events: none;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="description" content="A timeline of calendars" />
	<title>A timeline of calendars</title>
	<link rel="stylesheet" href="index.css">
	<script src="http://d3js.org/d3.v4.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
	</head>
	<body>
	<script src="index.js"></script>
	</body>
	</html>
	var margin = {top: 40, right: 40, bottom: 30, left: 120},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var chart = 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 data = [{
	name: 'Stato della Chiesa',
	calendar: [{
	name: 'giuliano',
	time_start: 1400,
	time_end: 1582
	},
	{
	name: 'gregoriano',
	time_start: 1582,
	time_end: 2014
	}]
	},
	{
	name: 'Portogallo',
	calendar: [{
	name: 'giuliano',
	time_start: 1400,
	time_end: 1582
	},
	{
	name: 'gregoriano',
	time_start: 1582,
	time_end: 2014
	}]
	},
	{
	name: 'Regno di Napoli',
	calendar: [{
	name: 'giuliano',
	time_start: 1400,
	time_end: 1582
	},
	{
	name: 'gregoriano',
	time_start: 1582,
	time_end: 2014
	}]
	},
	{
	name: 'Spagna',
	calendar: [{
	name: 'giuliano',
	time_start: 1400,
	time_end: 1582
	},
	{
	name: 'gregoriano',
	time_start: 1582,
	time_end: 2014
	}]
	},
	{
	name: 'Venezia',
	calendar: [{
	name: 'giuliano',
	time_start: 1400,
	time_end: 1582
	},
	{
	name: 'gregoriano',
	time_start: 1582,
	time_end: 2014
	}]
	},
	{
	name: 'Francia',
	calendar: [{
	name: 'giuliano',
	time_start: 1400,
	time_end: 1583
	},
	{
	name: 'gregoriano',
	time_start: 1583,
	time_end: 2014
	}]
	},
	{
	name: 'Baviera',
	calendar: [{
	name: 'giuliano',
	time_start: 1400,
	time_end: 1583
	},
	{
	name: 'gregoriano',
	time_start: 1583,
	time_end: 2014
	}]
	},
	{
	name: 'Austria',
	calendar: [{
	name: 'giuliano',
	time_start: 1400,
	time_end: 1584
	},
	{
	name: 'gregoriano',
	time_start: 1584,
	time_end: 2014
	}]
	},
	{
	name: 'Ungheria',
	calendar: [{
	name: 'giuliano',
	time_start: 1400,
	time_end: 1589
	},
	{
	name: 'gregoriano',
	time_start: 1589,
	time_end: 2014
	}]
	},
	{
	name: 'Svezia',
	calendar: [{
	name: 'giuliano',
	time_start: 1400,
	time_end: 1592
	},
	{
	name: 'gregoriano',
	time_start: 1592,
	time_end: 1600
	},
	{
	name: 'giuliano',
	time_start: 1600,
	time_end: 1753
	},
	{
	name: 'gregoriano',
	time_start: 1753,
	time_end: 2014
	}]
	},
	{
	name: 'Prussia',
	calendar: [{
	name: 'giuliano',
	time_start: 1400,
	time_end: 1610
	},
	{
	name: 'gregoriano',
	time_start: 1610,
	time_end: 2014
	}]
	},
	{
	name: 'Danimarca',
	calendar: [{
	name: 'giuliano',
	time_start: 1400,
	time_end: 1700
	},
	{
	name: 'gregoriano',
	time_start: 1700,
	time_end: 2014
	}]
	},
	{
	name: 'Toscana',
	calendar: [{
	name: 'giuliano',
	time_start: 1400,
	time_end: 1749
	},
	{
	name: 'gregoriano',
	time_start: 1749,
	time_end: 2014
	}]
	},
	{
	name: 'Regno Unito',
	calendar: [{
	name: 'giuliano',
	time_start: 1400,
	time_end: 1752
	},
	{
	name: 'gregoriano',
	time_start: 1752,
	time_end: 2014
	}]
	},
	{
	name: 'Russia',
	calendar: [{
	name: 'giuliano',
	time_start: 1400,
	time_end: 1923
	},
	{
	name: 'gregoriano',
	time_start: 1923,
	time_end: 2014
	}]
	},
	{
	name: 'Giappone',
	calendar: [{
	name: 'giapponese',
	time_start: 1400,
	time_end: 1853
	},
	{
	name: 'gregoriano',
	time_start: 1853,
	time_end: 2014
	}]
	},
	{
	name: 'Corea',
	calendar: [{
	name: 'coreano',
	time_start: 1400,
	time_end: 1896
	},
	{
	name: 'gregoriano',
	time_start: 1896,
	time_end: 2014
	}]
	},
	{
	name: 'Cina',
	calendar: [{
	name: 'cinese',
	time_start: 1400,
	time_end: 1912
	},
	{
	name: 'gregoriano',
	time_start: 1912,
	time_end: 2014
	}]
	}];

	var x = d3.scaleLinear()
	.domain ([1400,2014])
	.range([0, width]);

	var countries = _.chain(data)
	.map(function(country){ return country.name; })
	.reverse()
	.value();

	var y = d3.scaleBand()
	.domain(countries)
	.rangeRound([height, 0]);

	var color = d3.scaleOrdinal()
	.domain(['giuliano','gregoriano','giapponese','coreano','cinese'])
	.range(["#8dd3c7","#fb8072","#80b1d3","#fdb462","#bc80bd","#ccebc5","#ffffb3","#ffed6f","#bebada","#b3de69","#fccde5","#d9d9d9"]);

	var xAxis = d3.axisBottom()
	.scale(x)
	.tickFormat(d3.format("4"))
	.tickSize(-height);

	var yAxis = d3.axisLeft()
	.scale(y);

	var rows = chart.selectAll('.row')
	.data(data, function(country){ return country.name; });

	rows.enter().append('g')
	.attr('class', 'row')
	.attr('transform', function(country) { return 'translate(0, ' + y(country.name) + ')'; })
	.append('rect')
	.attr('class','border')
	.attr('width', width)
	.attr('height', y.bandwidth());

	chart.selectAll('.row').selectAll('.bar')
	.data(function(country){ console.log(country);return country.calendar; })
	.enter().insert('rect',':first-child')
	.attr('class', 'bar')
	.attr('x', function(interval){ return x(interval.time_start); })
	.attr('width', function(interval){ return x(interval.time_end)-x(interval.time_start); })
	.attr('height', y.bandwidth())
	.attr('fill', function(interval){ return color(interval.name); });

	chart.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	chart.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	// 1582
	chart.append('text')
	.attr('class','date')
	.attr('x', x(1582))
	.text('1582')
	.style('font-size', '12px')
	.style('font-weight', 'bold');
	chart.append('line')
	.attr('class', 'date_tick')
	.attr('x1', x(1582))
	.attr('x2', x(1582))
	.attr('y1', 2)
	.attr('y2', 7);

	// date di cambiamento
	rows.selectAll('.date')
	.data(function(country){ return [country.calendar[0].time_end]; })
	.enter().append('text')
	.attr('class','date')
	.text(function(d){ return d; })
	.attr('x', function(d){ return x(d); })
	.attr('y', y.bandwidth()/2 )
	.attr('dx', '-4px')
	.attr('dy', '0.35em');

	// nomi calendari
	chart.append('text')
	.text('Gregorian')
	.attr('class','calname')
	.attr('x', 550)
	.attr('y', 160);

	chart.append('text')
	.text('Julian')
	.attr('class','calname')
	.attr('x', 150)
	.attr('y', 290);