Last active
April 3, 2016 10:54
-
-
Save LuisSevillano/da5d2b726075e28c9d34 to your computer and use it in GitHub Desktop.
Line chart with step buttons
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit | |
height: 550 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title></title> | |
<style media="screen"> | |
.buttons-container { | |
display: block; | |
float: left; | |
} | |
.step { | |
float: left; | |
display: block; | |
width: 90px; | |
padding: .5em 1em; | |
margin-right: .5em; | |
border: .01em solid #c5c5c5; | |
background-color: #f0f0f0; | |
border-radius: .1em; | |
cursor: pointer; | |
} | |
.axis line,.axis path { | |
fill: none; | |
stroke: #777; | |
shape-rendering: crispEdges | |
} | |
.axis text { | |
fill: gray; | |
font-size: 0.9em; | |
} | |
.axis path,.tick line { | |
opacity: .5 | |
} | |
.line { | |
fill: none; | |
stroke-width: 2px | |
} | |
.line-Germany { | |
stroke: #cd1719 | |
} | |
.line-Italy { | |
stroke: #ff4a1b | |
} | |
.line-Japan { | |
stroke: #a83024 | |
} | |
.line-UK { | |
stroke: #047580 | |
} | |
.line-US { | |
stroke: #3e792a | |
} | |
.anotation { | |
font-size: 3em; | |
text-transform: uppercase; | |
letter-spacing: .08em | |
} | |
.text-Germany { | |
fill: #cd1719 | |
} | |
.text-Italy { | |
fill: #ff4a1b | |
} | |
.text-Japan { | |
fill: #a83024 | |
} | |
.text-UK { | |
fill: #047580 | |
} | |
.text-US { | |
fill: #3e792a | |
} | |
body { | |
font-family: arial; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<div id="chart"></div> | |
<div class="buttons-container"> | |
<button type="button" data-index="0" name="button" class="step">Previous</button> | |
<button type="button" data-index="1" name="button" class="step">Next</button> | |
</div> | |
</div> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script type="text/javascript"> | |
var margin = {top: 20, right: 20, bottom: 45, left: 60}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var svg = d3.select('#chart').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 formatDate = d3.time.format("%d-%b-%y"); | |
var x = d3.time.scale() | |
.range([0, width]); | |
var y =d3.scale.linear() | |
.range([height, 0]); | |
// data formatting and years | |
var dateFormat = d3.time.format("%Y"); | |
var format = d3.format("s"); | |
var formatComma = d3.format(","); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom") | |
.ticks(8) | |
.tickFormat(function(d) { | |
return dateFormat(d); | |
}); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left") | |
.tickFormat(function(d) { | |
return format(d); | |
}); | |
var heads, index = 0; | |
var annotation = svg.append("text") | |
.attr("class", "anotation text-Germany") | |
.attr("width", "100") | |
.attr("height", "50") | |
.attr("x", margin.left) | |
.attr("y", margin.top*2); | |
d3.csv("population.csv", type, function(error, data) { | |
if (error) throw error; | |
heads = getHeads(data[0]); | |
var col1 = heads[0],col2 = heads[1], col0 = 'year', col4 = heads[4]; | |
var line = d3.svg.line() | |
.x(function(d) { | |
return x(dateFormat.parse(d[col0])); | |
}) | |
.y(function(d) { return y(d[col1]); }); | |
x.domain(d3.extent(data, function(d) { return dateFormat.parse(d[col0]); })); | |
y.domain(d3.extent(data, function(d) { return d[col4]; })); | |
svg.selectAll(".anotation") | |
.text(heads[index]); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + (height) + ")") | |
.call(xAxis) | |
.append("text") | |
.attr("y", 35) | |
.attr("x",width/2-margin.left) | |
.attr("dy", ".5em") | |
.text("from 1960 to 2030"); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
.append("text") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", "1em") | |
.style("text-anchor", "end") | |
.text("Price ($)"); | |
svg.append("g").attr("class","line-path").append("path") | |
.datum(data) | |
.attr("class", function(d){ | |
return "line line-"+heads[index]; | |
}) | |
.attr("d", line); | |
d3.selectAll(".step").on("click", steps); | |
//updating and | |
function getIndex(number){ | |
if (number==0) { | |
index--; | |
if (index==-1) { | |
index = heads.length-1; | |
} | |
}else if (number==1) { | |
index++; | |
if (index==heads.length) { | |
index = 0; | |
} | |
} | |
return index; | |
} | |
function steps(){ | |
var number = this.getAttribute("data-index"); | |
var i = getIndex(number); | |
svg.selectAll(".anotation").text(heads[i]) | |
.attr("class", function(d){ | |
return "anotation text-"+heads[i]; | |
}); | |
line.y(function(d){return y(d[heads[i]]);}); | |
svg.selectAll(".line") | |
.transition() | |
.duration(200) | |
.ease("cubic") | |
.attr("d", line) | |
.attr("class", function(d){ | |
return "line line-"+heads[i]; | |
}); | |
} | |
}); | |
function getHeads(d){ | |
var rows = Object.keys(d); | |
rows.shift(); | |
return rows; | |
} | |
function type(d) { | |
getHeads(d).forEach(function(z){ | |
d[z] = +d[z]; | |
}); | |
return d; | |
} | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
year | Germany | Italy | Japan | UK | US | |
---|---|---|---|---|---|---|
1600 | 16000000 | 13100000 | 18500000 | 5458466 | 1500000 | |
1700 | 15000000 | 13300000 | 27000000 | 7195297 | 1000000 | |
1820 | 24905000 | 20176000 | 31000000 | 16186397 | 9980510 | |
1821 | 25260000 | 20306000 | 31032824 | 16427955 | 10298969 | |
1822 | 25620000 | 20437000 | 31065683 | 16661282 | 10625503 | |
1823 | 25969000 | 20568000 | 31098577 | 16897898 | 10951077 | |
1824 | 26307000 | 20701000 | 31131506 | 17139513 | 11276695 | |
1825 | 26650000 | 20834000 | 31164470 | 17381418 | 11602355 | |
1826 | 26964000 | 20968000 | 31197468 | 17629610 | 11928057 | |
1827 | 27249000 | 21103000 | 31230502 | 17858803 | 12250905 | |
1828 | 27540000 | 21239000 | 31263570 | 18093284 | 12580590 | |
1829 | 27807000 | 21376000 | 31296674 | 18329053 | 12906416 | |
1830 | 28045000 | 21513000 | 31329812 | 18569823 | 13240314 | |
1831 | 28283000 | 21652000 | 31362986 | 18811881 | 13658580 | |
1832 | 28535000 | 21791000 | 31396194 | 19028016 | 14077890 | |
1833 | 28801000 | 21932000 | 31429438 | 19246151 | 14496235 | |
1834 | 29071000 | 22073000 | 31462717 | 19468285 | 14914618 | |
1835 | 29390000 | 22215000 | 31496031 | 19691420 | 15334042 | |
1836 | 29702000 | 22358000 | 31529381 | 19918844 | 15752501 | |
1837 | 30013000 | 22502000 | 31562766 | 20136267 | 16170997 | |
1838 | 30365000 | 22647000 | 31596186 | 20354979 | 16590533 | |
1839 | 30746000 | 22793000 | 31629642 | 20578690 | 17009101 | |
1840 | 31126000 | 22939000 | 31663133 | 20804402 | 17443768 | |
1841 | 31475000 | 23087000 | 31696659 | 21027114 | 18056100 | |
1842 | 31787000 | 23236000 | 31730221 | 21284460 | 18667464 | |
1843 | 32086000 | 23385000 | 31763819 | 21504941 | 19278865 | |
1844 | 32394000 | 23536000 | 31797452 | 21751903 | 19890301 | |
1845 | 32743000 | 23687000 | 31831121 | 21994095 | 20502776 | |
1846 | 33059000 | 23840000 | 31864825 | 22231076 | 21114282 | |
1847 | 33231000 | 23993000 | 31898565 | 22279863 | 21725822 | |
1848 | 33289000 | 24148000 | 31932341 | 22246880 | 22337396 | |
1849 | 33452000 | 24303000 | 31966153 | 22266109 | 22950007 | |
1850 | 33746000 | 24460000 | 32000000 | 22287069 | 23579718 | |
1851 | 34055000 | 24617000 | 32117649 | 22310067 | 24405303 | |
1852 | 34290000 | 24776000 | 32235730 | 22567009 | 25230918 | |
1853 | 34422000 | 24935000 | 32354246 | 22837200 | 26156953 | |
1854 | 34531000 | 25096000 | 32473197 | 23117738 | 26882238 | |
1855 | 34586000 | 25257000 | 32592585 | 23417123 | 27707943 | |
1856 | 34715000 | 25420000 | 32712413 | 23728007 | 28534680 | |
1857 | 34979000 | 25584000 | 32832681 | 23974430 | 29360442 | |
1858 | 35278000 | 25748000 | 32953391 | 24230353 | 30186232 | |
1859 | 35633000 | 25914000 | 33074545 | 24488987 | 31012051 | |
1860 | 36049000 | 26081000 | 33196144 | 24746160 | 31838901 | |
1861 | 36435000 | 26249000 | 33318191 | 25009641 | 32677742 | |
1862 | 36788000 | 26418000 | 33440686 | 25291179 | 33515609 | |
1863 | 37184000 | 26610000 | 33563632 | 25561448 | 34354509 | |
1864 | 37602000 | 26814000 | 33687029 | 25828236 | 35192433 | |
1865 | 37955000 | 27023000 | 33810880 | 26107967 | 36031388 | |
1866 | 38193000 | 27256000 | 33935187 | 26385197 | 36869368 | |
1867 | 38440000 | 27411000 | 34059950 | 26667813 | 37708378 | |
1868 | 38637000 | 27501000 | 34185173 | 26955755 | 38546412 | |
1869 | 38914000 | 27681000 | 34310855 | 27249851 | 39385476 | |
1870 | 39231000 | 27888000 | 34437000 | 27544197 | 40240630 | |
1871 | 39456000 | 28063000 | 34648000 | 27844139 | 41098000 | |
1872 | 39691000 | 28233000 | 34859000 | 28050928 | 42136000 | |
1873 | 40017000 | 28387000 | 35070000 | 28385947 | 43174000 | |
1874 | 40450000 | 28505000 | 35235000 | 28730581 | 44212000 | |
1875 | 40897000 | 28630000 | 35436000 | 29082812 | 45245000 | |
1876 | 41491000 | 28837000 | 35713000 | 29444523 | 46287000 | |
1877 | 42034000 | 29067000 | 36018000 | 29814831 | 47325000 | |
1878 | 42546000 | 29252000 | 36315000 | 30173677 | 48362000 | |
1879 | 43052000 | 29425000 | 36557000 | 30557062 | 49400000 | |
1880 | 43500000 | 29534000 | 36807000 | 30920888 | 50458000 | |
1881 | 43827000 | 29672000 | 37112000 | 31273446 | 51743000 | |
1882 | 44112000 | 29898000 | 37414000 | 31576465 | 53027000 | |
1883 | 44404000 | 30113000 | 37766000 | 31875253 | 54311000 | |
1884 | 44777000 | 30366000 | 38138000 | 32184118 | 55595000 | |
1885 | 45084000 | 30644000 | 38427000 | 32500733 | 56879000 | |
1886 | 45505000 | 30857000 | 38622000 | 32822214 | 58164000 | |
1887 | 46001000 | 31049000 | 38866000 | 33142079 | 59448000 | |
1888 | 46538000 | 31243000 | 39251000 | 33464925 | 60732000 | |
1889 | 47083000 | 31468000 | 39688000 | 33793233 | 62016000 | |
1890 | 47607000 | 31702000 | 40077000 | 34127982 | 63302000 | |
1891 | 48129000 | 31892000 | 40380000 | 34472021 | 64612000 | |
1892 | 48633000 | 32091000 | 40684000 | 34836751 | 65922000 | |
1893 | 49123000 | 32303000 | 41001000 | 35211963 | 67231000 | |
1894 | 49703000 | 32513000 | 41350000 | 35593770 | 68541000 | |
1895 | 50363000 | 32689000 | 41775000 | 35976405 | 69851000 | |
1896 | 51111000 | 32863000 | 42196000 | 36367212 | 71161000 | |
1897 | 51921000 | 33078000 | 42643000 | 36763751 | 72471000 | |
1898 | 52753000 | 33285000 | 43145000 | 37166289 | 73781000 | |
1899 | 53592000 | 33487000 | 43626000 | 37569674 | 75091000 | |
1900 | 54388000 | 33672000 | 44103000 | 37975154 | 76391000 | |
1901 | 55214000 | 33877000 | 44662000 | 38373808 | 77888000 | |
1902 | 56104000 | 34166000 | 45255000 | 38737346 | 79469000 | |
1903 | 56963000 | 34436000 | 45841000 | 39102443 | 80946000 | |
1904 | 57806000 | 34715000 | 46378000 | 39474558 | 82485000 | |
1905 | 58644000 | 35011000 | 46829000 | 39850962 | 84147000 | |
1906 | 59481000 | 35297000 | 47227000 | 40231673 | 85770000 | |
1907 | 60341000 | 35594000 | 47691000 | 40614789 | 87339000 | |
1908 | 61187000 | 35899000 | 48260000 | 41003923 | 89055000 | |
1909 | 62038000 | 36213000 | 48869000 | 41398500 | 90845000 | |
1910 | 62884000 | 36572000 | 49518000 | 41795923 | 92767000 | |
1911 | 63852000 | 36917000 | 50215000 | 42150769 | 94234000 | |
1912 | 64457000 | 37150000 | 50941000 | 42318019 | 95703000 | |
1913 | 65058000 | 37248000 | 51672000 | 42556673 | 97606000 | |
1914 | 66096000 | 37526000 | 52396000 | 42965211 | 99505000 | |
1915 | 66230000 | 37982000 | 53124000 | 43296057 | 100941000 | |
1916 | 66076000 | 38142000 | 53815000 | 43473615 | 102364000 | |
1917 | 65763000 | 37981000 | 54437000 | 43573615 | 103817000 | |
1918 | 65237000 | 37520000 | 54886000 | 43529634 | 104958000 | |
1919 | 60547000 | 37250000 | 55253000 | 43437404 | 105473000 | |
1920 | 60894000 | 37398000 | 55818000 | 43718000 | 106881000 | |
1921 | 61573000 | 37691000 | 56490000 | 44072000 | 108964000 | |
1922 | 61900000 | 38086000 | 57209000 | 44372000 | 110484000 | |
1923 | 62307000 | 38460000 | 57937000 | 44596000 | 112387000 | |
1924 | 62697000 | 38810000 | 58686000 | 44915000 | 114558000 | |
1925 | 63166000 | 39165000 | 59522000 | 45059000 | 116284000 | |
1926 | 63630000 | 39502000 | 60490000 | 45232000 | 117857000 | |
1927 | 64023000 | 39848000 | 61430000 | 45389000 | 119502000 | |
1928 | 64393000 | 40186000 | 62361000 | 45578000 | 120971000 | |
1929 | 64739000 | 40469000 | 63244000 | 45672000 | 122245000 | |
1930 | 65084000 | 40791000 | 64203000 | 45866000 | 123668000 | |
1931 | 65423000 | 41132000 | 65205000 | 46074000 | 124633000 | |
1932 | 65716000 | 41431000 | 66189000 | 46335000 | 125436000 | |
1933 | 66027000 | 41753000 | 67182000 | 46520000 | 126180000 | |
1934 | 66409000 | 42093000 | 68090000 | 46666000 | 126978000 | |
1935 | 66871000 | 42429000 | 69238000 | 46868000 | 127859000 | |
1936 | 67349000 | 42750000 | 70171000 | 47081000 | 128681000 | |
1937 | 67831000 | 43068000 | 71278000 | 47289000 | 129464000 | |
1938 | 68558000 | 43419000 | 71879000 | 47494000 | 130476000 | |
1939 | 69286000 | 43865000 | 72364000 | 47991000 | 131539000 | |
1940 | 69835000 | 44341000 | 72967000 | 48226000 | 132637000 | |
1941 | 70244000 | 44734000 | 74005000 | 48216000 | 133922000 | |
1942 | 70834000 | 45004000 | 75029000 | 48400000 | 135386000 | |
1943 | 70411000 | 45177000 | 76005000 | 48789000 | 137272000 | |
1944 | 69865000 | 45290000 | 77178000 | 49016000 | 138937000 | |
1945 | 67000000 | 45442000 | 76224000 | 49182000 | 140474000 | |
1946 | 64678000 | 45725000 | 77199000 | 49217000 | 141940000 | |
1947 | 66094000 | 46040000 | 78119000 | 49519000 | 144688000 | |
1948 | 67295000 | 46381000 | 80155000 | 50014000 | 147203000 | |
1949 | 67991000 | 46733000 | 81971000 | 50312000 | 149770000 | |
1950 | 68374572 | 47105000 | 83805000 | 50127000 | 152271000 | |
1951 | 68875884 | 47418000 | 85163848 | 50290000 | 154878000 | |
1952 | 69145952 | 47666000 | 86459025 | 50430000 | 157553000 | |
1953 | 69550236 | 47957000 | 87655163 | 50593000 | 160184000 | |
1954 | 69868115 | 48299000 | 88753892 | 50765000 | 163026000 | |
1955 | 70195612 | 48633000 | 89815060 | 50946000 | 165931000 | |
1956 | 70602518 | 48921000 | 90766211 | 51184000 | 168903000 | |
1957 | 71019069 | 49182000 | 91563009 | 51430000 | 171984000 | |
1958 | 71488167 | 49476000 | 92388772 | 51652000 | 174882000 | |
1959 | 72013853 | 49832000 | 93296566 | 51956000 | 177830000 | |
1960 | 72480869 | 50197600 | 94091638 | 52372000 | 180671000 | |
1961 | 73123148 | 50523200 | 94943293 | 52807000 | 183691000 | |
1962 | 73739117 | 50843200 | 95831757 | 53292000 | 186538000 | |
1963 | 74340260 | 51198300 | 96811940 | 53625000 | 189242000 | |
1964 | 74954262 | 51600200 | 97826267 | 53991000 | 191889000 | |
1965 | 75638851 | 51987100 | 98882534 | 54350000 | 194303000 | |
1966 | 76206173 | 52331600 | 99790308 | 54643000 | 196560000 | |
1967 | 76368453 | 52667100 | 100825279 | 54959000 | 198712000 | |
1968 | 76584401 | 52986600 | 101960672 | 55214000 | 200706000 | |
1969 | 77143888 | 53317000 | 103171831 | 55461000 | 202677000 | |
1970 | 77783164 | 53661100 | 104344973 | 55632000 | 205052000 | |
1971 | 78354709 | 54005500 | 105696786 | 55907000 | 207661000 | |
1972 | 78717088 | 54365564 | 107188273 | 56079000 | 209896000 | |
1973 | 78950220 | 54796843 | 108706797 | 56210000 | 211909000 | |
1974 | 78966137 | 55226259 | 110162302 | 56224000 | 213854000 | |
1975 | 78682325 | 55571894 | 111573116 | 56215000 | 215973000 | |
1976 | 78298957 | 55838536 | 112774841 | 56206000 | 218035000 | |
1977 | 78160773 | 56059245 | 113872473 | 56179000 | 220239000 | |
1978 | 78066074 | 56240143 | 114912911 | 56167000 | 222585000 | |
1979 | 78081292 | 56367710 | 115890431 | 56228000 | 225055000 | |
1980 | 78297904 | 56451247 | 116807309 | 56314000 | 227726463 | |
1981 | 78401830 | 56502489 | 117648092 | 56382597 | 229966237 | |
1982 | 78335266 | 56535636 | 118454974 | 56339704 | 232187835 | |
1983 | 78121655 | 56630129 | 119269949 | 56382623 | 234307207 | |
1984 | 77855422 | 56696963 | 120034697 | 56462228 | 236348292 | |
1985 | 77684907 | 56731215 | 120754335 | 56620240 | 238466283 | |
1986 | 77713485 | 56733833 | 121491913 | 56796260 | 240650755 | |
1987 | 77718298 | 56729703 | 122091325 | 56981620 | 242803533 | |
1988 | 78030572 | 56734027 | 122613000 | 57159603 | 245021414 | |
1989 | 78644914 | 56737529 | 123107500 | 57324472 | 247341697 | |
1990 | 79380394 | 56742886 | 123537399 | 57493307 | 250131894 | |
1991 | 79984244 | 56747462 | 123946268 | 57665646 | 253492503 | |
1992 | 80597764 | 56840847 | 124329269 | 57866349 | 256894189 | |
1993 | 81132272 | 57026746 | 124668019 | 58026920 | 260255352 | |
1994 | 81414164 | 57179460 | 125014050 | 58212518 | 263435673 | |
1995 | 81653702 | 57274531 | 125341354 | 58426014 | 266557091 | |
1996 | 81890667 | 57367032 | 125645311 | 58618663 | 269667391 | |
1997 | 82011073 | 57479469 | 125956499 | 58808266 | 272911760 | |
1998 | 82023672 | 57550318 | 126246096 | 59035652 | 276115288 | |
1999 | 82074778 | 57603634 | 126494403 | 59293320 | 279294713 | |
2000 | 82187909 | 57719337 | 126699784 | 59522468 | 282338631 | |
2001 | 82280551 | 57844924 | 126891645 | 59723243 | 285023886 | |
2002 | 82350671 | 57926999 | 127065841 | 59912431 | 287675526 | |
2003 | 82398326 | 57998353 | 127214499 | 60094648 | 290342554 | |
2004 | 82424609 | 58057477 | 127333002 | 60270708 | 293027571 | |
2005 | 82431390 | 58103033 | 127417244 | 60441457 | 295734134 | |
2006 | 82422299 | 58133509 | 127463611 | 60609153 | 298444215 | |
2007 | 82400996 | 58147733 | 127467972 | 60776238 | 301139947 | |
2008 | 82369548 | 58145321 | 127425722 | 60943912 | 303824646 | |
2030 | 79572500 | 55359830 | 116338080 | 64303846 | 363811435 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment