<link rel="stylesheet" type="text/css" href="./style.css">
<script src="./d3.min.js"></script>
<script type="text/javascript">
function truncate(str, maxLength, suffix) {
if(str.length > maxLength) {
str = str.substring(0, maxLength + 1);
str = str.substring(0, Math.min(str.length, str.lastIndexOf(" ")));
var margin = {top: 20, right: 250, bottom: 0, left: 10},
//var c = d3.scale.category20c();
//var c = d3.scale.category20b().range();
var c = d3.scale.category20c().range();
//var c2 = c.slice(12,16).concat(c.slice(4,8)).concat(c.slice(0,4)).concat(c.slice(16)).concat(c.slice(8,12))
var c2 = c.slice(0,4).concat(c.slice(8,12)).concat(c.slice(12,16)).concat(c.slice(16)).concat(c.slice(4,8))
var x = d3.scale.linear()
var xAxis = d3.svg.axis()
var formatYears = d3.format("0000");
xAxis.tickFormat(formatYears);
var formatPercents = d3.format(".2r");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("margin-left", margin.left + "px")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("pmvis.json", function(data) {
console.log("loading data")
x.domain([start_year, end_year]);
var xScale = d3.scale.linear()
.domain([start_year, end_year])
.attr("transform", "translate(0," + 0 + ")")
for (var j = 0; j < data.length; j++) {
var g = svg.append("g").attr("class","journal");
var circles = g.selectAll("circle")
.data(data[j]['articles'])
var text = g.selectAll("text")
.data(data[j]['articles'])
var rScale = d3.scale.linear()
.domain([0, d3.max(data[j]['articles'], function(d) { return d[1]; })])
.attr("cx", function(d, i) { return xScale(d[0]); })
.attr("r", function(d) { return rScale(d[1]); })
.style("fill", function(d) { return c2[j]; })
.style("fill-opacity", 0.8);
.attr("x",function(d, i) { return xScale(d[0])-5; })
//.text(function(d){ return d[1]; })
.text(function(d){ return formatPercents(d[1]); })
.style("fill", function(d) { return c2[j]; })
//.text(truncate(data[j]['name'],30,"..."))
.style("fill", function(d) { return c2[j]; })
.on("mouseover", mouseover)
.on("mouseout", mouseout);
var g = d3.select(this).node().parentNode;
d3.select(g).selectAll("circle").style("display","none");
d3.select(g).selectAll("text.value").style("display","block");
var g = d3.select(this).node().parentNode;
d3.select(g).selectAll("circle").style("display","block");
d3.select(g).selectAll("text.value").style("display","none");