Skip to content

Instantly share code, notes, and snippets.

@nitaku

nitaku/README.md

Last active July 26, 2016 08:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nitaku/ca5409a39a3d0ea0a70b to your computer and use it in GitHub Desktop.
Save nitaku/ca5409a39a3d0ea0a70b to your computer and use it in GitHub Desktop.
Download ZIP
A timeline of calendars
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.

Raw
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;
}
Raw
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.v3.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>
Raw
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.scale.linear()
.domain ([1400,2014])
.range([0, width]);
var countries = _.chain(data)
.map(function(country){ return country.name; })
.reverse()
.value();
var y = d3.scale.ordinal()
.domain(countries)
.rangeRoundBands([height, 0]);
var color = d3.scale.ordinal()
.domain(['giuliano','gregoriano','giapponese','coreano','cinese'])
.range(["#8dd3c7","#fb8072","#80b1d3","#fdb462","#bc80bd","#ccebc5","#ffffb3","#ffed6f","#bebada","#b3de69","#fccde5","#d9d9d9"]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.format("4"))
.tickSize(-height);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
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.rangeBand());
rows.selectAll('.bar')
.data(function(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.rangeBand())
.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.rangeBand()/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);
@nitaku
Copy link
Author

nitaku commented Jun 15, 2014

Needs a new iteration to include more calendars.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment