wpoa · wrought · Sep 14, 2014 · Sep 14, 2014 · Sep 14, 2014 · Sep 14, 2014
diff --git a/inc/about.inc.php b/inc/about.inc.php
@@ -9,15 +9,15 @@
 	  <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body>
-	<a href="http://github.com/dartar/Wikipedia-Cite-o-Meter"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/camo.github.com/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
+	<a href="http://github.com/wpoa/Wikipedia-Cite-o-Meter"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
 	<h1><a href="$wc_url">Wikipedia Cite-o-Meter</a></h1>
 	<h2>About</h2>
 
 	<p>The <strong>Wikipedia Cite-o-Meter</strong> provides a conservative estimate of the number of times journal articles from a particular publisher are cited in the 100 largest Wikipedias. Using the <a href="http://en.wikipedia.org/w/api.php">Wikipedia API</a>, Cite-o-Meter searches for occurrences of a DOI prefix in the main namespace of these Wikipedias (<a href="http://en.wikipedia.org/w/index.php?title=Special%3ASearch&amp;search=10.1371&amp;fulltext=Search&amp;ns0=1 ">example</a>).</p> 
 
 	<p>A <a href="http://en.wikipedia.org/wiki/Digital_object_identifier">Digital Object Identifier</a> (DOI) is a string used to uniquely identify objects such as electronic documents. DOIs are the de facto standard for uniquely identifying scholarly publications such as journal articles. A DOI (such as <tt>10.1371/journal.pone.0011273</tt>) is <a href="http://www.doi.org/handbook_2000/appendix_1.html#A1-4">composed of two parts</a> &mdash; a prefix (<tt>10.1371</tt>) and a suffix  (<tt>journal.pone.0011273</tt>). An article is uniquely identified by a DOI, which can be looked up using the <a href="http://dx.doi.org/">DOI resolver</a>. The example article is located at <a href="http://dx.doi.org/10.1371/journal.pone.0011273">http://dx.doi.org/10.1371/journal.pone.0011273</a>.</p>
 
-	<p>The DOI prefix is specific to a DOI registrant - the organization that handles the assignments of DOI suffixes for items published under that prefix. Most scholarly publishers operate as a single registrant, yet due to mergers and acquisitions, some publishers run several DOI prefixes. The DOI prefix <tt>10.1371</tt> is handled by the Public Library of Science (PLoS), and it is the only DOI prefix handled by PLoS. As a result, <a href="http://toolserver.org/~dartar/cite-o-meter/?doip=10.1371">Cite-o-Meter statistics</a> for this prefix provide a lower bound for citations to PLoS articles in Wikipedia.</p>
+	<p>The DOI prefix is specific to a DOI registrant - the organization that handles the assignments of DOI suffixes for items published under that prefix. Most scholarly publishers operate as a single registrant, yet due to mergers and acquisitions, some publishers run several DOI prefixes. The DOI prefix <tt>10.1371</tt> is handled by the Public Library of Science (PLoS), and it is the only DOI prefix handled by PLoS. As a result, <a href="http://tools.wmflabs.org/cite-o-meter/?doip=10.1371">Cite-o-Meter statistics</a> for this prefix provide a lower bound for citations to PLoS articles in Wikipedia.</p>
 
 	<h3>Data and license</h3>
 	<p>Cite-o-Meter data is available in the form of <a href="?doip=10.1371">graphs</a>, <a href="?doip=10.1371&amp;table">tabular data</a> and machine-readable <a href="?doip=10.1371&amp;json">JSON</a> and is released under a <a href="http://creativecommons.org/publicdomain/zero/1.0/">CC0</a> license.</p>

diff --git a/inc/chart.inc.php b/inc/chart.inc.php
@@ -3,74 +3,25 @@
  * ColumnChart handler 
  */
 
-echo <<<EOF
-	<html>
-	  <head>
-	  	<title>Wikipedia Cite-o-Meter: Statistics for $doi[$doip]</title>
-	  	<link rel="stylesheet" type="text/css" href="style.css" />
-	    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
-	    <script type="text/javascript">
-	      google.load("visualization", "1", {packages:["corechart"]});
-	      google.setOnLoadCallback(drawChart);
-	      function drawChart() {
-	        var data = new google.visualization.DataTable();
-	        data.addColumn('string', 'Project');
-	        data.addColumn('number', 'Citations');
-	        data.addRows($cl1);
-
-EOF;
-
-	$b = 0;
-	foreach($langs1 as $l)
-	{
-		echo "        	data.setValue($b, 0, '$l');\n";
-		echo "        	data.setValue($b, 1, $t[$l]);\n";
-		$b++;
-	}
-	$maxv = $t['en'];
-
-echo <<<EOF
-
-	        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
-	        chart.draw(data, {width: 1200, height: 240, legend: 'none', colors:['#933'],
-				  	vAxis: {logScale: true, format:'#,###', maxValue: $maxv},
-				  	chartArea:{left:80, top: 20},
-	                hAxis: {slantedTextAngle: 60, textStyle: {fontSize: 12}}
-	                });
-	     	}
-	    </script>
-	    <script type="text/javascript">
-	      google.load("visualization", "1", {packages:["corechart"]});
-	      google.setOnLoadCallback(drawChart2);
-	      function drawChart2() {
-	        var data2 = new google.visualization.DataTable();
-	        data2.addColumn('string', 'Project');
-	        data2.addColumn('number', 'Citations');
-	        data2.addRows($cl2);
-
-EOF;
-
-	$b = 0;
-	foreach($langs2 as $l)
-	{
-		echo "        	data2.setValue($b, 0, '$l');\n";
-		echo "        	data2.setValue($b, 1, $t[$l]);\n";
-		$b++;
+$r = array();
+$i = 0;
+foreach ($t as $k => $v){
+	if ($v > 0) {
+		$r[$i]["label"] = $k;
+		$r[$i]["n"] = $v;	
+		$i++;
 	}
-	$maxv = $t['en'];
+}
+$output = json_encode($r);
 
 echo <<<EOF
-
-	        var chart2 = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
-	        chart2.draw(data2, {width: 1200, height: 240, legend: 'none', colors:['#933'],
-				  	vAxis: {logScale: true, format:'#,###', maxValue: $maxv},
-				  	chartArea:{left:80, top: 20},
-	                hAxis: {slantedTextAngle: 60, textStyle: {fontSize: 12}}
-	                });
-	     	}
-	    </script>
-	  </head>
-	  <body>
+	<html>
+		<head>
+			<title>Wikipedia Cite-o-Meter: Statistics for $doi[$doip]</title>
+			<link rel="stylesheet" type="text/css" href="style.css" />
+			<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js" charset="utf-8"></script>
+		</head>
+		<body>
 	  	<h1><a href="$wc_url">Wikipedia Cite-o-Meter</a></h1>
 		<h2>Statistics for <strong>$doi[$doip]</strong> (<strong>$doip</strong>)</h2>
 	    <h3>[stats] [<a href="$table_url">data</a>] [<a href="$json_url">json</a>] [<a href="?about">about</a>]</h3>
@@ -82,10 +33,81 @@ function drawChart2() {
 		</ul>
 
 	    <h2>Citations for <strong>$doi[$doip]</strong> (<strong>$doip</strong>) in the top 100 Wikipedias</h2>
-	    <div style="margin:0" id="chart_div"></div>
-	    <div style="margin:0" id="chart_div2"></div>
+		<div id="chart"></div>
     	$footer
-	  </body>
-	</html>
+	    </body>
+		<script type="text/javascript">
+				var dataset = { "items" :  $output
+				};
+
+			var w = 1000,
+				h = 20 * $i,
+				barHorizontalPadding = 60,
+				barVerticalPadding = 3,
+				chartPadding = 150;
+
+			var svg = d3.select("#chart")
+				.append("svg")
+				.attr("width", w)
+				.attr("height", h);
+
+				var data = dataset.items;
+
+				var max_n = 0;
+				for (var d in data) {
+					max_n = Math.max(data[d].n, max_n);
+				}
+
+				var dx = (w - chartPadding) / max_n;
+				var dy = h / data.length;
+
+				var g = svg.selectAll(".bar")
+					.data(data.sort(function(a,b) {return b.n - a.n;}), function(d) {return d.label;})
+					.enter();
+
+				g.append("svg:a")
+  					.attr("xlink:href", function(d) {return "http://" + d.label + ".wikipedia.org/w/index.php?title=Special:Search&search=$doip";})
+					.append("svg:rect")
+					.attr("class", "bar")
+					.attr("x", function(d, i) {return barHorizontalPadding;})
+					.attr("y", function(d, i) {return dy*i;})
+					.attr("width", 1)
+					.style("fill", "#CCC")
+					.attr("height", dy - barVerticalPadding)
+					.transition()
+						.delay(function(d, i) { return i * 80; })
+						.duration(300)
+						.attr("width", function(d, i) {return dx*d.n})
+						.style("fill", "#933")
+
+				g.append("svg:a")
+  					.attr("xlink:href", function(d) {return "http://" + d.label + ".wikipedia.org/w/index.php?title=Special:Search&search=$doip";})
+					.append("svg:text")
+					.attr("x", 10)
+					.attr("y", function(d, i) {return dy*i + 10;})
+					.text( function(d) {return d.label;})
+					.attr("font-size", "14px")
+					.style("font-weight", "normal")
+					.attr("opacity", 0)
+					.transition()
+						.delay(function(d, i) { return i * 80; })
+						.duration(300)
+						.attr("x", 0)
+						.attr("opacity", 1)
+
+				g.append("text")
+					.attr("x", function(d, i) {return barHorizontalPadding +10})
+					.attr("y", function(d, i) {return dy*i + 11;})
+					.text( function(d) {return d.n;})
+					.attr("font-size", "11px")
+					.style("font-weight", "thin")
+					.style("fill", "#FFF")
+					.transition()
+						.delay(function(d, i) { return i * 80; })
+						.duration(300)
+						.attr("x", function(d, i) {return barHorizontalPadding + dx*d.n +10})
+						.style("fill", "#333");
+		</script>
+</html>
 EOF;
 ?>
diff --git a/inc/commons.inc.php b/inc/commons.inc.php
@@ -18,55 +18,113 @@
 
 //sort array by citation count
 arsort($ps);
-//take top 100 non-null values
+
+//only take top 100 records with non-zero values
 $max = 100;
 $ps = array_slice(array_filter($ps, function ($v){ return ($v>0);}),0,$max);
 $cl = count($ps);
 
-echo <<<EOF
-<html>
-  <head>
-	<title>Wikipedia Cite-o-Meter: Top $max publishers by citations in Wikimedia Commons</title>
-	<link rel="stylesheet" type="text/css" href="style.css" />
-	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
-	<script type="text/javascript">
-		google.load("visualization", "1", {packages:["corechart"]});
-		google.setOnLoadCallback(drawChart);
-		function drawChart() {
-			var data = new google.visualization.DataTable();
-			data.addColumn('string', 'Publisher');
-			data.addColumn('number', 'Citations');
-			data.addRows($max);
-EOF;
-
-$b = 0;
-foreach($ps as $pf => $c)
-{
-	echo "			data.setValue($b, 0, '$doi[$pf]');\n";
-	echo "			data.setValue($b, 1, $c);\n";
-	$b++;
+//store data in JSON object
+$r = array();
+$i = 0;
+foreach ($ps as $pf => $c){
+	if ($c > 0){
+		$r[$i]["label"] = "[".$pf."] ".$doi[$pf];
+		$r[$i]["n"] = $c;
+		$r[$i]["doip"] = $pf;
+		$i++;
+	}
 }
+//$output = json_encode($r,JSON_PRETTY_PRINT);
+$output = json_encode($r);
 $maxv = $pf[0];
 
 echo <<<EOF
-		var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
-        chart.draw(data, {width: 1000, height: 2600, legend: 'none', colors:['#933'],
-						chartArea:{left:280, top: 20},
-						hAxis: {logScale: false, format:'#,###',maxValue: $maxv},
-                        vAxis: {textStyle: {fontSize: 12}}
-                         });
-        }
-	    </script>
-  </head>
-  <body>
-	<h1><a href="$wc_url">Wikipedia Cite-o-Meter</a></h1>
-EOF;
+	<html>
+		<head>
+			<title>Wikipedia Cite-o-Meter: Top $max publishers by citations in Wikimedia Commons</title>
+			<link rel="stylesheet" type="text/css" href="style.css" />
+			<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js" charset="utf-8"></script>
+		</head>
+		<body>
+		<h1><a href="$wc_url">Wikipedia Cite-o-Meter</a></h1>
+	<h2>Top 100 publishers by citations in <a href="http://commons.wikimedia.org">Wikimedia Commons</a></h2>
+	<div id="chart"></div>
+	$footer
+	</body>
+	<script type="text/javascript">
+			var dataset = { "items" :  $output
+				};
 
-echo <<<EOF
-<h2>Top 100 publishers by citations in <a href="http://commons.wikimedia.org">Wikimedia Commons</a></h2>
-<div id="chart_div"></div>
-$footer
-</body>
+			var w = 1000,
+				h = 20 * $i,
+				barHorizontalPadding = 400,
+				barVerticalPadding = 3,
+				chartPadding = 500;
+				maxLabelLength = 60;
+
+			var svg = d3.select("#chart")
+				.append("svg")
+				.attr("width", w)
+				.attr("height", h);
+
+				var data = dataset.items;
+
+				var max_n = 0;
+				for (var d in data) {
+					max_n = Math.max(data[d].n, max_n);
+				}
+
+				var dx = (w - chartPadding) / max_n;
+				var dy = h / data.length;
+
+				var g = svg.selectAll(".bar")
+					.data(data.sort(function(a,b) {return b.n - a.n;}), function(d) {return d.label;})
+					.enter();
+
+				g.append("svg:a")
+  					.attr("xlink:href", function(d) {return "http://commons.wikimedia.org/w/index.php?title=Special:Search&search=" + d.doip;})
+					.append("rect")
+					.attr("class", "bar")
+					.attr("x", function(d, i) {return barHorizontalPadding;})
+					.attr("y", function(d, i) {return dy*i;})
+					.attr("width", 1)
+					.style("fill", "#CCC")
+					.attr("height", dy - barVerticalPadding)
+					.transition()
+						.delay(function(d, i) { return i * 80; })
+						.duration(300)
+						.attr("width", function(d, i) {return dx*d.n})
+						.style("fill", "#933")
+
+				g.append("svg:a")
+  					.attr("xlink:href", function(d) {return "http://commons.wikimedia.org/w/index.php?title=Special:Search&search=" + d.doip;})
+					.append("text")
+					.attr("x", 10)
+					.attr("y", function(d, i) {return dy*i + 10;})
+					.text( function(d) {return d.label.substring(0,maxLabelLength);})
+					.attr("font-size", "14px")
+					.style("font-weight", "normal")
+					.attr("opacity", 0)
+					.transition()
+						.delay(function(d, i) { return i * 80; })
+						.duration(300)
+						.attr("x", 0)
+						.attr("opacity", 1);
+
+				g.append("text")
+					.attr("x", function(d, i) {return barHorizontalPadding +10})
+					.attr("y", function(d, i) {return dy*i + 11;})
+					.text( function(d) {return d.n;})
+					.attr("font-size", "11px")
+					.style("font-weight", "thin")
+					.style("fill", "#FFF")
+					.transition()
+						.delay(function(d, i) { return i * 80; })
+						.duration(300)
+						.attr("x", function(d, i) {return barHorizontalPadding + dx*d.n +10})
+						.style("fill", "#333");
+	</script>
 </html>
 EOF;
 ?>
diff --git a/inc/default.inc.php b/inc/default.inc.php
@@ -10,7 +10,7 @@
 	  <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body>
-	<a href="http://github.com/dartar/Wikipedia-Cite-o-Meter"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/camo.github.com/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
+	<a href="http://github.com/wpoa/Wikipedia-Cite-o-Meter"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
 	<h1><a href="$wc_url">Wikipedia Cite-o-Meter</a></h1>
     <h2>Find citations by publisher in the top 100 Wikipedias <a title="About Wikipedia Cite-o-Meter" href="?about">(read more)</a></h2>
 	<form onsubmit="document.DOISearch.SubmitButton.disabled=true; document.getElementById('loading').style.display = ''; document.getElementById('crossref').style.display = 'none';" id="DOISearch" name="DOISearch" method="get">

diff --git a/inc/json.inc.php b/inc/json.inc.php
@@ -14,5 +14,6 @@
 		'total_commons_citations' => $totalcommons,
 		'wp' => $t
 	);
+//echo json_encode($jout,JSON_PRETTY_PRINT);
 echo json_encode($jout);
-?>
+?>