/* An array to store all the data */
var items = [];
$.ajax({
url: "https://codepen.io/chris-creditdesign/pen/87c2848937b6962f4efd2a67e5ea2031.html",
// url: "table-nih.html",
dataType: 'text',
success: function(data) {
/* Helper function to format and parse date from data */
function getDate(d) {
/* If d is a number or a string in the format Day Month Year
process it as normal. Other wise presume that it may be a string
in the format Month Year and add 1 to the start so that Firefox
and safari can parse the date */
if (typeof d === "number") {
return new Date(d);
} else if (Date.parse(d)) {
return new Date(d);
} else {
return new Date("1 " + d);
}
}
var fullData = $(data);
var table = $(data).find("table tbody tr");
/* Grab the tables headline and caption so that we can reproduce them in the widget */
var headline = $(fullData).find("h2.table-heading").text();
var standfirst = $(data).find("table caption p").text();
/* Hides the table and shows the SVG if javascript is enabled */
// $("h2:contains('Dogs at work')").parent("section").parent("div").css({"display":"none"});
// $("h2:contains('Dogs at work') + table").css({"width":"630px"});
$(".outerwrapper span.timeline-heading").text(headline);
$(".outerwrapper p.timeline-standfirst").text(standfirst);
// $(".outerwrapper").css({"display":"block"});
/* Push an object into the items array for each table row/point on the timeline */
for (var i = 0; i < $(table).length; i++) {
var newObject = {};
items.push(newObject);
};
/* Add a prorerty to the objects for each column in the table/bit of info we want to show
i.e date, headline, the text, image link and credit */
for (var i = 0; i < $(table).length; i++) {
var dateStart = $(table).eq(i).children('td').eq(0).html();
var dateEnd;
if ($(table).eq(i).children('td').eq(1).html() === " ") {
dateEnd = $(table).eq(i).children('td').eq(0).html();
} else {
dateEnd = $(table).eq(i).children('td').eq(1).html();
}
items[i].dateStart = dateStart;
items[i].dateEnd = dateEnd;
items[i].date1 = getDate(dateStart);
items[i].date2 = getDate(dateEnd);
if ($(table).eq(i).children('td').eq(2).html() !== " ") {
items[i].headline = $(table).eq(i).children('td').eq(2).html();
}
if ($(table).eq(i).children('td').eq(3).html() !== " ") {
items[i].text = $(table).eq(i).children('td').eq(3).html();
}
if ($(table).eq(i).children('td').eq(4).html() !== " ") {
items[i].link = $(table).eq(i).children('td').eq(4).html();
}
if ($(table).eq(i).children('td').eq(5).html() !== " ") {
items[i].img = $(table).eq(i).children('td').eq(5).html();
items[i].credit = $(table).eq(i).children('td').eq(6).html();
}
};
console.log(items);
/* Insert an .event div for each event */
for (var i = 0; i < items.length; i++) {
$(".outerwrapper .info-box .panel").append('<div class="event-' + i + '"></div>');
};
for (var i = 0; i < $('.outerwrapper div[class^="event"]').length; i++) {
if (items[i].img) {
$('.outerwrapper div[class="event-' + i + '"]')
.append('<span class="timeline-img">' + items[i].img + '</span>');
}
if (items[i].date1 < items[i].date2) {
$('.outerwrapper div[class="event-' + i + '"]')
.append('<h3>' + items[i].dateStart + ' - ' + items[i].dateEnd + '</h3>');
} else {
$('.outerwrapper div[class="event-' + i + '"]')
.append('<h3>' + items[i].dateStart + '</h3>');
}
if (items[i].headline) {
$('.outerwrapper div[class="event-' + i + '"]')
.append('<h4>' + items[i].headline + ' (' + (i + 1) + ' of ' + items.length + ')</h4>');
} else {
$('.outerwrapper div[class="event-' + i + '"]')
.append('<h4> (' + (i + 1) + ' of ' + items.length + ')</h4>');
}
if (items[i].text) {
$('.outerwrapper div[class="event-' + i + '"]')
.append('<p>' + items[i].text + '</p>');
}
if (items[i].link) {
$('.outerwrapper div[class="event-' + i + '"]')
.append('<p>' + items[i].link + '</p>');
}
if (items[i].img) {
$('.outerwrapper div[class="event-' + i + '"]')
.append('<p class="credit">PICTURE CREDIT: ' + items[i].credit + '</p>')
}
};
var eventWidth = $('.outerwrapper .info-box').width();
var position = 0;
var panelWidth = eventWidth * items.length;
$(".outerwrapper .info-box .panel").css({
"width": panelWidth + "px"
});
/* Load D3 */
/* All of the D3/svg code is contained within the callback function */
/* Loading D3 via a html script tag into ie6-8 will to cause a runtime error */
$.getScript("https://d3js.org/d3.v3.min.js", function() {
// $.getScript("https://d3js.org/d3.v3.min.js", function() {
/* Define the dimensions of the SVG */
var duration = 200;
var marginTop = 5;
var marginRight = 0;
var marginBottom = 40;
var marginLeft = 0;
var padding = 2;
var width = 630 - marginRight - marginLeft;
var height = 290 - marginTop - marginBottom;
var miniHeight = 75;
var mainHeight = height - miniHeight - 50;
var zoom = 1;
var maxZoom = 10;
var zoomIncrement = 1;
/* A global variable to control which event/location to show */
var counter = 0;
/* A global variable to control the amout of ticks visible */
var ticks = 8;
/* Find the earliest and latest time in the range */
var timeFirst = d3.min(items, function(d) {
return d.date1;
});
var timeLast = d3.max(items, function(d) {
return d.date2;
});
/* Work out the time span of the whole timeline in miliseconds plus one tenth of this value */
var timeDiff = timeLast - timeFirst;
timeDiff = timeDiff + (timeDiff * 0.1);
/* Extend the time range before the first date and after the last date
to make for a more attractive timeline */
var timeBegin = getDate(items[counter].date1.getTime() - timeDiff);
var timeEnd = getDate(items[counter].date1.getTime() + timeDiff);
/* Scales */
var x = d3.time.scale()
.domain([timeBegin, timeEnd])
.range([0, width]);
/* Create the SVG and its elements */
var chart = d3.select(".timeline")
.append("svg")
.attr("width", width + marginRight + marginLeft)
.attr("height", height + marginTop + marginBottom)
.attr("class", "chart");
/* Draw the four icons for zooming and moving through the time line as well as their enclosing
rects. Add functionality for hover and click. */
var zoomInIcon = chart.append("path")
.attr("d", "M22.646,19.307c0.96-1.583,1.523-3.435,1.524-5.421C24.169,8.093,19.478,3.401,13.688,3.399C7.897,3.401,3.204,8.093,3.204,13.885c0,5.789,4.693,10.481,10.484,10.481c1.987,0,3.839-0.563,5.422-1.523l7.128,7.127l3.535-3.537L22.646,19.307zM13.688,20.369c-3.582-0.008-6.478-2.904-6.484-6.484c0.006-3.582,2.903-6.478,6.484-6.486c3.579,0.008,6.478,2.904,6.484,6.486C20.165,17.465,17.267,20.361,13.688,20.369zM15.687,9.051h-4v2.833H8.854v4.001h2.833v2.833h4v-2.834h2.832v-3.999h-2.833V9.051z")
.style("pointer-events", "none")
.attr("transform", "translate(5,60), scale(1.25)");
var zoomInButton = chart.append("rect")
.attr("width", 50)
.attr("height", 50)
.style("fill", colourBackground[4])
.style("opacity", 0.2)
.attr("transform", "translate(0,55)")
.style("cursor", "pointer")
.on("click", function(e) {
if (zoom < maxZoom) {
zoom += zoomIncrement;
showLocation();
};
d3.event.preventDefault();
return false;
})
.on("mouseover", function() {
if (zoom < maxZoom) {
d3.select(this).transition()
.duration(duration)
.style("opacity", 0.5);
};
})
.on("mouseout", function() {
d3.select(this).transition()
.duration(duration)
.style("opacity", 0.2);
});
var zoomOutIcon = chart.append("path")
.attr("d", "M22.646,19.307c0.96-1.583,1.523-3.435,1.524-5.421C24.169,8.093,19.478,3.401,13.688,3.399C7.897,3.401,3.204,8.093,3.204,13.885c0,5.789,4.693,10.481,10.484,10.481c1.987,0,3.839-0.563,5.422-1.523l7.128,7.127l3.535-3.537L22.646,19.307zM13.688,20.369c-3.582-0.008-6.478-2.904-6.484-6.484c0.006-3.582,2.903-6.478,6.484-6.486c3.579,0.008,6.478,2.904,6.484,6.486C20.165,17.465,17.267,20.361,13.688,20.369zM8.854,11.884v4.001l9.665-0.001v-3.999L8.854,11.884z")
.style("pointer-events", "none")
.attr("transform", "translate(55,60), scale(1.25)");
var zoomOutButton = chart.append("rect")
.attr("width", 50)
.attr("height", 50)
.style("fill", colourBackground[4])
.style("opacity", 0.2)
.attr("transform", "translate(50,55)")
.style("cursor", "pointer")
.on("click", function(e) {
if (zoom > 1) {
zoom -= zoomIncrement;
showLocation();
};
d3.event.preventDefault();
return false;
})
.on("mouseover", function() {
if (zoom > 1) {
d3.select(this).transition()
.duration(duration)
.style("opacity", 0.5);
};
})
.on("mouseout", function() {
d3.select(this).transition()
.duration(duration)
.style("opacity", 0.2);
});
var leftIcon = chart.append("path")
.attr("d", "M20.834,8.037L9.641,14.5c-1.43,0.824-1.43,2.175,0,3l11.193,6.463c1.429,0.826,2.598,0.15,2.598-1.5V9.537C23.432,7.887,22.263,7.211,20.834,8.037z")
.style("pointer-events", "none")
.attr("transform", "translate(0,0), scale(1.5)");
var leftButton = chart.append("rect")
.attr("width", 50)
.attr("height", 50)
.style("fill", colourBackground[4])
.style("opacity", 0.2)
.attr("transform", "translate(0,0)")
.style("cursor", "pointer")
.on("click", function(e) {
if (counter > 0) {
counter -= 1;
};
showLocation();
d3.event.preventDefault();
return false;
})
.on("mouseover", function() {
if (counter > 0) {
d3.select(this).transition()
.duration(duration)
.style("opacity", 0.5);
};
})
.on("mouseout", function() {
d3.select(this).transition()
.duration(duration)
.style("opacity", 0.2);
});
var rightIcon = chart.append("path")
.attr("d", "M11.166,23.963L22.359,17.5c1.43-0.824,1.43-2.175,0-3L11.166,8.037c-1.429-0.826-2.598-0.15-2.598,1.5v12.926C8.568,24.113,9.737,24.789,11.166,23.963z")
.style("pointer-events", "none")
.attr("transform", "translate(50,0), scale(1.5)");
var rightButton = chart.append("rect")
.attr("width", 50)
.attr("height", 50)
.style("fill", colourBackground[4])
.style("opacity", 0.2)
.attr("transform", "translate(50,0)")
.style("cursor", "pointer")
.on("click", function(e) {
if (counter < (items.length - 1)) {
counter += 1;
};
showLocation();
d3.event.preventDefault();
return false;
})
.on("mouseover", function() {
if (counter < (items.length - 1)) {
d3.select(this).transition()
.duration(duration)
.style("opacity", 0.5);
};
})
.on("mouseout", function() {
d3.select(this).transition()
.duration(duration)
.style("opacity", 0.2);
});
/* Prepare a cliping path to stop the locations and scales breaking spilling over the edges
of the SVG in IE */
chart.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height + marginTop + marginBottom);
chart.append("g")
.append("rect")
.attr("x", 0)
.attr("y", (height - miniHeight))
.attr("width", width)
.attr("height", miniHeight)
.attr("fill", colourBackground[2])
.style("opacity", 0.5);
var miniHolder = chart.append("g")
.attr("clip-path", "url(#clip)");
var mini = miniHolder.append("g")
.attr("width", width)
.attr("height", miniHeight)
.attr("class", "mini")
.attr("transform", "translate(0," + (height - miniHeight) + ")")
/* create three seperate x axis for Year, Month and Day based on the same x scale */
var xYearAxis = d3.svg.axis()
.scale(x)
.tickSize(15, 0)
.ticks(d3.time.years, 1)
.tickFormat(d3.time.format('%Y'))
.orient('top');
var yearAxis = mini.append('g')
.attr('class', 'year-axis')
.call(xYearAxis);
var xMonthAxis = d3.svg.axis()
.scale(x)
.tickSize(-miniHeight, 0)
.orient('top');
var monthAxis = mini.append('g')
.attr('class', 'axis')
.call(xMonthAxis);
var xDayAxis = d3.svg.axis()
.scale(x)
.tickSize(10, 0)
.tickFormat(function(d) {
return '';
})
.orient('bottom');
var dayAxis = mini.append('g')
.attr('class', 'axis')
.attr("transform", "translate(0," + (miniHeight - 10) + ")")
.call(xDayAxis);
/* draw the static triangle to act as a pointer */
chart.append("path")
.attr("d", "M10,0 L20,20 L0,20z")
.style("fill", colourBorder[0])
.style("pointer-events", "none")
.attr("transform", "translate(" + ((width / 2) - 10) + "," + height + ")");
/* Add rect for each point on the timeline */
var locations = mini.append("g").selectAll("rect")
.data(items)
.enter()
.append("rect")
.attr("class", function(d, i) {
if (i === counter) {
return "locations selected";
} else {
return "locations";
};
})
.attr("x", function(d, i) {
return x(d.date1);
})
.attr("y", function(d, i) {
/* Work out if the first date of the current range overlaps the last date of the previous
if so move the current rect down so that there is no overlap*/
var prev = 0;
if (i > 0) {
prev = i - 1;
}
if (i === 0) {
return 0;
} else if (items[prev].date2 < items[i].date1) {
return 0;
} else {
return (miniHeight - 10) / 2;
}
})
.attr("width", function(d) {
if (d.date1 < d.date2) {
/* decide the width of the rect based on the range of dates */
return x(d.date2) - x(d.date1);
} else {
/* if no end date is specified add 86,400,000 milliseconds (1 day) to the first
date to create a span of time for the width
but make sure that it is at least 4 px wide */
var thisWidth = x(getDate(d.date1.getTime() + 86400000)) - x(d.date1);
if (thisWidth < 4) {
return 4;
} else {
return thisWidth;
}
}
})
.attr("height", function(d, i) {
/* Work out if the first date of the current range overlaps the last date of the previous
if so half the height of the block to accomadate */
var prev = 0;
var next;
if (i > 0) {
prev = i - 1;
}
if (i < items.length - 1) {
next = i + 1
} else {
next = items.length - 1;
}
if (prev > 0) {
if (items[i].date2 > items[next].date1) {
return (miniHeight - 10) / 2;
} else if (items[prev].date2 > items[i].date1) {
return (miniHeight - 10) / 2;
} else {
return (miniHeight - 10);
}
} else {
return (miniHeight - 10);
}
})
.on("mouseover", function(d, i) {
if (d.date1 < d.date2) {
d3.select(".outerwrapper .timeline .tooltip")
.html("<p>" + d.dateStart + " - <br />" + d.dateEnd + "</p>");
} else {
d3.select(".outerwrapper .timeline .tooltip")
.html("<p>" + d.dateStart + "</p>");
}
var eventLeft = parseInt(d3.select(this).attr("x"));
var eventWidth = parseInt(d3.select(this).attr("width"));
var eventTop = parseInt(d3.select(this).attr("y"));
var tooltipHeight = parseInt($(".outerwrapper .timeline .tooltip").css("height"));
$(".outerwrapper .timeline .tooltip")
.css({
"left": eventLeft + (eventWidth / 2) + "px",
"top": 145 - (tooltipHeight - eventTop) + "px"
});
$(".outerwrapper .timeline .tooltip").css({
"opacity": 1,
"display": "block"
});
})
.on("mouseout", function() {
$(".outerwrapper .timeline .tooltip").css({
"opacity": 0,
"display": "none"
});
})
.on("click", function(d, i) {
counter = i;
showLocation();
$(".outerwrapper .timeline .tooltip").css({
"opacity": 0,
"display": "none"
});
d3.event.preventDefault();
return false;
})
/* Function to add the info for the next selected location
Adds the relevent content to info-box and provides a new value for xPosition
to center the timeline on the selected location*/
function showLocation() {
position = eventWidth * counter;
$('.outerwrapper .info-box').animate({
scrollLeft: position
}, duration);
/* Recalculate the start and end point of the time range based upon
the current location and the zoom level */
timeBegin = getDate(items[counter].date1.getTime() - (timeDiff / zoom));
timeEnd = getDate(items[counter].date1.getTime() + (timeDiff / zoom));
/* Replace the values used in the x domain */
x.domain([timeBegin, timeEnd]);
/* Adjust the ticks for each x axis depening on the time range */
/* ticks for than 5 years, 157,788,000,000 milliseconds */
if ((timeEnd - timeBegin) > 157788000000) {
xMonthAxis.ticks(d3.time.years, 1).tickFormat(function(d) {
return '';
});
xDayAxis.ticks(d3.time.years, 1);
}
/* ticks for than a year, 31,557,600,000 milliseconds */
else if ((timeEnd - timeBegin) > 31557600000) {
xMonthAxis.ticks(d3.time.months, 3).tickFormat(d3.time.format('%d %b'));
xDayAxis.ticks(d3.time.months, 1);
}
/* ticks for than six months 31,557,600,000 milliseconds divided by 2 */
else if ((timeEnd - timeBegin) > 15778800000) {
xMonthAxis.ticks(d3.time.months, 1).tickFormat(d3.time.format('%d %b'));
xDayAxis.ticks(d3.time.weeks, 1);
}
/* ticks for than two months 31,557,600,000 milliseconds divided by 6 */
else if ((timeEnd - timeBegin) > 5259600000) {
xMonthAxis.ticks(d3.time.months, 1).tickFormat(d3.time.format('%d %b'));
xDayAxis.ticks(d3.time.days, 1);
}
/* ticks for than a month 31,557,600,000 milliseconds divided by 12 */
else if ((timeEnd - timeBegin) > 2629800000) {
xMonthAxis.ticks(d3.time.weeks, 1).tickFormat(d3.time.format('%d %b'));
xDayAxis.ticks(d3.time.days, 1);
}
/* ticks for a day */
else {
xMonthAxis.ticks(d3.time.days, 4).tickFormat(d3.time.format('%d %b'));
xDayAxis.ticks(d3.time.days, 1);
}
/* Redraw each x axis based on the new domain */
yearAxis.transition()
.duration(duration)
.call(xYearAxis);
monthAxis.transition()
.duration(duration)
.call(xMonthAxis);
dayAxis.transition()
.duration(duration)
.call(xDayAxis);
/* Give the selected location the class of 'selected'
then animate the locations to their new position based on the updated x scale */
locations.classed("selected", false)
.attr("class", function(d, i) {
if (i === counter) {
return "locations selected";
} else {
return "locations";
};
})
.transition()
.duration(duration)
.attr("x", function(d, i) {
return x(d.date1);
})
.attr("width", function(d) {
if (d.date1 < d.date2) {
/* decide the width of the rect based on the range of dates */
return x(d.date2) - x(d.date1);
} else {
/* if no end date is specified add 86,400,000 milliseconds to the first
date to create a span of time for the width
but make sure that it is at least 4 px wide */
var thisWidth = x(getDate(d.date1.getTime() + 86400000)) - x(d.date1);
if (thisWidth < 4) {
return 4;
} else {
return thisWidth;
}
}
});
/* Fade out the next/prev and zoom buttons when they are not available */
switch (counter) {
case 0:
leftIcon.style("fill", colourText[7]);
rightIcon.style("fill", colourText[1]);
break;
case (items.length - 1):
leftIcon.style("fill", colourText[1]);
rightIcon.style("fill", colourText[7]);
break;
default:
leftIcon.style("fill", colourText[1]);
rightIcon.style("fill", colourText[1]);
break;
}
switch (zoom) {
case 1:
zoomInIcon.style("fill", colourText[1]);
zoomOutIcon.style("fill", colourText[7]);
break;
case maxZoom:
zoomInIcon.style("fill", colourText[7]);
zoomOutIcon.style("fill", colourText[1]);
break;
default:
zoomInIcon.style("fill", colourText[1]);
zoomOutIcon.style("fill", colourText[1]);
break;
}
}
/* Initial call of show position to adjust the timeline on page load */
showLocation();
}); /* End of getScript callback function */
}
}); /* End of Ajax success function */
!
