|
<!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;">> 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;">> 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> |
|
|