Skip to content

Instantly share code, notes, and snippets.

@LuisSevillano

LuisSevillano/.block

Last active April 3, 2016 10: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 LuisSevillano/da5d2b726075e28c9d34 to your computer and use it in GitHub Desktop.
Save LuisSevillano/da5d2b726075e28c9d34 to your computer and use it in GitHub Desktop.
Download ZIP
Line chart with step buttons
Raw
.block
license: mit
height: 550
Raw
index.html
<!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>
Raw
population.csv
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