Skip to content

Instantly share code, notes, and snippets.

@cavedave

cavedave/IrishTree

Created March 3, 2015 23:23
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 cavedave/a8f1bfdfb9bae2061471 to your computer and use it in GitHub Desktop.
Save cavedave/a8f1bfdfb9bae2061471 to your computer and use it in GitHub Desktop.
Download ZIP
Tree Ring Graph of Irish Life Expectancy
Raw
IrishTree
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="1000" height="1000"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var year=["1800","1801","1802","1803","1804","1805","1806","1807","1808","1809","1810","1811","1812","1813","1814","1815","1816","1817","1818","1819","1820","1821","1822","1823","1824","1825","1826","1827","1828","1829","1830","1831","1832","1833","1834","1835","1836","1837","1838","1839","1840","1841","1842","1843","1844","1845","1846","1847","1848","1849","1850","1851","1852","1853","1854","1855","1856","1857","1858","1859","1860","1861","1862","1863","1864","1865","1866","1867","1868","1869","1870","1871","1872","1873","1874","1875","1876","1877","1878","1879","1880","1881","1882","1883","1884","1885","1886","1887","1888","1889","1890","1891","1892","1893","1894","1895","1896","1897","1898","1899","1900","1901","1902","1903","1904","1905","1906","1907","1908","1909","1910","1911","1912","1913","1914","1915","1916","1917","1918","1919","1920","1921","1922","1923","1924","1925","1926","1927","1928","1929","1930","1931","1932","1933","1934","1935","1936","1937","1938","1939","1940","1941","1942","1943","1944","1945","1946","1947","1948","1949","1950","1951","1952","1953","1954","1955","1956","1957","1958","1959","1960","1961","1962","1963","1964","1965","1966","1967","1968","1969","1970","1971","1972","1973","1974","1975","1976","1977","1978","1979","1980","1990","1991","1992","1993","1994","1995","1996","1997","1998","1999","2000","2001","2002","2003","2004","2005","2006","2007","2008","2009","2010","2011","2012","2013"];
var Ireland = [38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,19.8,24,14.9,14.1,31.2,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.3,38.5642857142857,38.8285714285714,39.0928571428571,39.3571428571428,39.6214285714286,39.8857142857143,40.15,40.4142857142857,40.6785714285714,40.9428571428571,41.2071428571428,41.4714285714285,41.7357142857143,42,42.2642857142857,42.5285714285714,42.7928571428571,43.0571428571428,43.3214285714285,43.5857142857142,43.85,44.1142857142857,44.3785714285714,44.6428571428571,44.9071428571428,45.1714285714285,45.4357142857142,45.6999999999999,45.9642857142857,46.2285714285714,46.4928571428571,46.7571428571428,47.0214285714285,47.2857142857142,47.5499999999999,47.8142857142856,48.0785714285714,48.3428571428571,48.6071428571428,48.8714285714285,49.1357142857142,49.4,49.84,50.28,50.72,51.16,51.6,52.04,52.48,52.92,53.36,53.8,54.0533333333333,54.3066666666667,54.56,54.8133333333333,55.0666666666666,55.32,49.6815932219784,55.8266666666666,56.08,56.3333333333333,56.5866666666666,56.84,57.0933333333333,57.3466666666667,57.6,57.73,57.86,57.99,58.12,58.25,58.38,58.51,58.64,58.77,58.9,59.12,59.34,59.56,59.78,60,60.28,60.56,60.84,61.12,61.4,62.4525,63.505,64.5575,65.61,64.78,67.2,67.96,68.07,68.06,69.01,69.06,69.36,69.49,70.23,69.69,69.99,70.24,70.49,70.69,70.2,71.24,70.93,70.85,70.89,71.68,71.02,71.24,71.18,71.76,71.86,72,71.98,72.25,72.6,74.8,75.1,75.3,75.5,75.7,75.8,76,76.1,76.2,76.4,76.7,77.1,77.6,78.1,78.5,78.9,79.2,79.4,79.4,79.6,79.9,80.2,80.4,80.4];
ctx.font = "10px Arial";
var arrayLength = Ireland.length;
for (var i = 0; i < arrayLength; i=i+20) {
ctx.beginPath();
ctx.arc(500,500,Ireland[i]*6, Ireland[i]*6, Math.PI*2, true);
ctx.closePath();
ctx.stroke();
ctx.fillText(year[i],505,500-(Ireland[i]*6));
}
ctx.moveTo(500,500);
ctx.lineTo(500,0);
ctx.stroke();
//put in two weird years
//1847
ctx.beginPath();
ctx.arc(500,500,Ireland[48]*6, Ireland[48]*6, Math.PI*2, true);
ctx.fillText(1847,505,500-(Ireland[48]*6));
// set line color
ctx.strokeStyle = '#ff0000';
ctx.stroke();
ctx.closePath();
//1918
ctx.beginPath();
ctx.arc(500,500,Ireland[118]*6, Ireland[118]*6, Math.PI*2, true);
ctx.fillText(1918,540,500-(Ireland[118]*6));
ctx.stroke();
var dataURL = canvas.toDataURL();
document.getElementById('canvasImg').src = dataURL;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment