Skip to content

Instantly share code, notes, and snippets.

@lambdamusic

lambdamusic/README.md

Last active Nov 30, 2020
Embed
What would you like to do?
Nature.com archive statistics
year articlestot
2014 35278
2013 33665
2012 29979
2011 28858
2010 28809
2009 27931
2008 28014
2007 26334
2006 26181
2005 25590
2004 22424
2003 21101
2002 18098
2001 17736
2000 17799
1999 19032
1998 15604
1997 13511
1996 11465
1995 8354
1994 8296
1993 8095
1992 7550
1991 7085
1990 7403
1989 7269
1988 7696
1987 8227
1986 6666
1985 8567
1984 8119
1983 5884
1982 5380
1981 7560
1980 5762
1979 5504
1978 6734
1977 6388
1976 5266
1975 5771
1974 6420
1973 6230
1972 6052
1971 7050
1970 6351
1969 5884
1968 5923
1967 6210
1966 6328
1965 6182
1964 6363
1963 6303
1962 6111
1961 6087
1960 5753
1959 5335
1958 5135
1957 4240
1956 4151
1955 3644
1954 3870
1953 3654
1952 3506
1951 3507
1950 3535
1949 3646
1948 3556
1947 3066
1946 3225
1945 2518
1944 2531
1943 2342
1942 2569
1941 2590
1940 3128
1939 3609
1938 3811
1937 3587
1936 3550
1935 3655
1934 3497
1933 3393
1932 3405
1931 2446
1930 2488
1929 2504
1928 2351
1927 2486
1926 2420
1925 2392
1924 2490
1923 2630
1922 2721
1921 3098
1920 3387
1919 2477
1918 2645
1917 2592
1916 2871
1915 2889
1914 2766
1913 2838
1912 2898
1911 3603
1910 3545
1909 3862
1908 3554
1907 3347
1906 3386
1905 3646
1904 4052
1903 4322
1902 4193
1901 3813
1900 3773
1899 3972
1898 3784
1897 3857
1896 3786
1895 3646
1894 3750
1893 3947
1892 3737
1891 3889
1890 3949
1889 4025
1888 4288
1887 4617
1886 4729
1885 3920
1884 3957
1883 3974
1882 4008
1881 4073
1880 4643
1879 4305
1878 4570
1877 4647
1876 4833
1875 2387
1874 2337
1873 2560
1872 2488
1871 2533
1870 2435
1869 1469
1868 1193
1867 1233
1866 1049
1865 1083
1864 1143
1863 1030
1862 1366
1861 979
1860 1801
1859 1612
1858 1501
1857 1791
1856 2133
1855 2010
1854 2148
1853 2000
1852 2590
1851 2290
1850 2702
1849 3554
1848 4264
1847 4936
1846 1801
1845 271
year articlestot
1845 271
1846 2072
1847 7008
1848 11272
1849 14826
1850 17528
1851 19818
1852 22408
1853 24408
1854 26556
1855 28566
1856 30699
1857 32490
1858 33991
1859 35603
1860 37404
1861 38383
1862 39749
1863 40779
1864 41922
1865 43005
1866 44054
1867 45287
1868 46480
1869 47949
1870 50384
1871 52917
1872 55405
1873 57965
1874 60302
1875 62689
1876 67522
1877 72169
1878 76739
1879 81044
1880 85687
1881 89760
1882 93768
1883 97742
1884 101699
1885 105619
1886 110348
1887 114965
1888 119253
1889 123278
1890 127227
1891 131116
1892 134853
1893 138800
1894 142550
1895 146196
1896 149982
1897 153839
1898 157623
1899 161595
1900 165368
1901 169181
1902 173374
1903 177696
1904 181748
1905 185394
1906 188780
1907 192127
1908 195681
1909 199543
1910 203088
1911 206691
1912 209589
1913 212427
1914 215193
1915 218082
1916 220953
1917 223545
1918 226190
1919 228667
1920 232054
1921 235152
1922 237873
1923 240503
1924 242993
1925 245385
1926 247805
1927 250291
1928 252642
1929 255146
1930 257634
1931 260080
1932 263485
1933 266878
1934 270375
1935 274030
1936 277580
1937 281167
1938 284978
1939 288587
1940 291715
1941 294305
1942 296874
1943 299216
1944 301747
1945 304265
1946 307490
1947 310556
1948 314112
1949 317758
1950 321293
1951 324800
1952 328306
1953 331960
1954 335830
1955 339474
1956 343625
1957 347865
1958 353000
1959 358335
1960 364088
1961 370175
1962 376286
1963 382589
1964 388952
1965 395134
1966 401462
1967 407672
1968 413595
1969 419479
1970 425830
1971 432880
1972 438932
1973 445162
1974 451582
1975 457353
1976 462619
1977 469007
1978 475741
1979 481245
1980 487007
1981 494567
1982 499947
1983 505831
1984 513950
1985 522517
1986 529183
1987 537410
1988 545106
1989 552375
1990 559778
1991 566863
1992 574413
1993 582508
1994 590804
1995 599158
1996 610623
1997 624134
1998 639738
1999 658770
2000 676569
2001 694305
2002 712403
2003 733504
2004 755928
2005 781518
2006 807699
2007 834033
2008 862047
2009 889978
2010 918787
2011 947645
2012 977624
2013 1011289
2014 1046567
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
h3 {
font-size: 15px;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.lineB {
fill: none;
stroke: darkgreen;
stroke-width: 1.5px;
}
.overlay {
fill: none;
pointer-events: all;
}
.focus circle {
fill: none;
stroke: steelblue;
}
.title {
margin: 30px 0px 0px 51px;
}
.note {
color: grey;
}
</style>
<body>
<div class="title">
<h3 style="margin-right: 20px;">&gt;&nbsp;Articles published each year by Nature Publishing Group
<br >
<small class="note">tip: click on a year to search it on nature.com</small>
</h3>
</div>
<div id="svg-rect" class="svgcontainer">
</div>
<hr>
<br /><br />
<div class="title">
<h3 style="margin-right: 20px;">&gt;&nbsp;Incremental number of articles published each year by Nature Publishing Group
<br >
<small class="note">tip: click on a year to search it on nature.com</small>
</h3>
</div>
<div id="svg-rect2" class="svgcontainer">
</div>
<div style="min-height: 100px;">
<br /><br /><br />
<hr>
View <a href="https://gist.github.com/lambdamusic/bfcaa40fa350778883fe">source</a> or go back to my <a href="http://www.michelepasin.org">homepage</a>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// FIRST CHART - single years counts
var margin = {top: 50, right: 50, bottom: 30, left: 100},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y").parse,
bisectDate = d3.bisector(function(d) { return d.date; }).left;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(25);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.articles); });
var svg = d3.select("#svg-rect").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 + ")");
d3.csv("articlesPerYear.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.year);
d.articles = +d.articlestot;
});
data.sort(function(a, b) {
return a.date - b.date;
});
x.domain([data[0].date, data[data.length - 1].date]);
y.domain(d3.extent(data, function(d) { return d.articles; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Articles");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none");
focus.append("circle")
.attr("r", 4.5);
focus.append("text")
.attr("x", 9)
.attr("dy", ".35em");
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() {
focus.style("display", "none");
label_year.text("");
label_articles.text("");
})
.on("mousemove", mousemove)
.on("click", mouseclick);
var label_year = svg.append("text")
.attr("x", 100)
.attr("y", 200)
.attr("opacity", "1")
.style("font-size", "70px")
.style("fill", "lightgray")
.text("");
var label_articles = svg.append("text")
.attr("x", 270)
.attr("y", 200)
.attr("opacity", "1")
.style("font-size", "18px")
.style("fill", "grey")
.text("");
function mousemove() {
// smart bit that gets data values from mouse positions
// http://bl.ocks.org/mbostock/3902569
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
focus.attr("transform", "translate(" + x(d.date) + "," + y(d.articles) + ")");
focus.select("text").text(d.articles);
label_year.text(d.date.getFullYear());
label_articles.text(d.articles + " articles");
}
function mouseclick() {
// same as above
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
window.open("http://www.nature.com/search?year_range="+d.date.getFullYear());
// alert(d.date.getFullYear());
}
});
</script>
<script>
// SECOND CHART: incremental counts
var margin = {top: 50, right: 50, bottom: 30, left: 100},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y").parse,
bisectDate = d3.bisector(function(d) { return d.date; }).left;
var xB = d3.time.scale()
.range([0, width]);
var yB = d3.scale.linear()
.range([height, 0]);
var xAxisB = d3.svg.axis()
.scale(xB)
.orient("bottom")
.ticks(25);
var yAxisB = d3.svg.axis()
.scale(yB)
.orient("left");
var lineB = d3.svg.line()
.x(function(d) { return xB(d.date); })
.y(function(d) { return yB(d.articles); });
var svgB = d3.select("#svg-rect2").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 + ")");
d3.csv("articlesPerYearIncremental.csv", function(error, dataB) {
dataB.forEach(function(d) {
d.date = parseDate(d.year);
d.articles = +d.articlestot;
});
dataB.sort(function(a, b) {
return a.date - b.date;
});
xB.domain([dataB[0].date, dataB[dataB.length - 1].date]);
yB.domain(d3.extent(dataB, function(d) { return d.articles; }));
svgB.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxisB);
svgB.append("g")
.attr("class", "y axis")
.call(yAxisB)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Articles");
// attach the line to the graph
svgB.append("path")
.datum(dataB)
.attr("class", "lineB")
.attr("d", lineB);
var focus2 = svgB.append("g")
.attr("class", "focus")
.style("display", "none");
focus2.append("circle")
.attr("r", 4.5);
focus2.append("text")
.attr("x", 9)
.attr("dy", ".35em");
svgB.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() { focus2.style("display", null); })
.on("mouseout", function() {
focus2.style("display", "none");
label_year2.text("");
label_articles2.text("");
})
.on("mousemove", mousemoveB)
.on("click", mouseclickB);
var label_year2 = svgB.append("text")
.attr("x", 100)
.attr("y", 200)
.attr("opacity", "1")
.style("font-size", "70px")
.style("fill", "lightgray")
.text("");
var label_articles2 = svgB.append("text")
.attr("x", 270)
.attr("y", 200)
.attr("opacity", "1")
.style("font-size", "18px")
.style("fill", "grey")
.text("");
function mousemoveB() {
// smart bit that gets data values from mouse positions
// http://bl.ocks.org/mbostock/3902569
var x0 = xB.invert(d3.mouse(this)[0]),
i = bisectDate(dataB, x0, 1),
d0 = dataB[i - 1],
d1 = dataB[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
focus2.attr("transform", "translate(" + xB(d.date) + "," + yB(d.articles) + ")");
focus2.select("text").text(d.articles);
// label.text(d.date.getFullYear() + ": " + d.articles + " articles");
label_year2.text(d.date.getFullYear());
label_articles2.text(d.articles + " articles");
}
function mouseclickB() {
// same as above
var x0 = xB.invert(d3.mouse(this)[0]),
i = bisectDate(dataB, x0, 1),
d0 = dataB[i - 1],
d1 = dataB[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
window.open("http://www.nature.com/search?year_range=1845-"+d.date.getFullYear());
// alert(d.date.getFullYear());
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment