From 7e31bb6921ea20804e377b7b0a950ed0a86d3771 Mon Sep 17 00:00:00 2001
From: Juan Pablo Alperin <juan@alperin.ca>
Date: Thu, 8 Mar 2018 16:16:44 -0800
Subject: [PATCH 1/2] updated old almviz for paperbuzz (incomplete)
---
css/paperbuzzviz.css | 140 ++++++++++++++++++
index2.html | 27 ++--
script5.js | 327 +++++++++++++++++++++++++------------------
3 files changed, 344 insertions(+), 150 deletions(-)
create mode 100755 css/paperbuzzviz.css
mode change 100644 => 100755 index2.html
mode change 100644 => 100755 script5.js
diff --git a/css/paperbuzzviz.css b/css/paperbuzzviz.css
new file mode 100755
index 0000000..63f20f6
--- /dev/null
+++ b/css/paperbuzzviz.css
@@ -0,0 +1,140 @@
+.alm {
+ font-size: 1em;
+
+ margin-bottom: 15px;
+}
+
+.title {
+ font-size: 1.5em;
+ color: #789aa1;
+ text-decoration: underline;
+}
+
+.paperbuzz-chart-area {
+ font-size: 11px;
+}
+
+.axis line,
+.axis path {
+ fill: none;
+ stroke: black;
+ stroke-width: 1;
+ shape-rendering: crispEdges;
+}
+.barsForTooltip {
+ fill: ffffff;
+ fill-opacity: 0;
+}
+
+.bar.main{
+ fill: #789aa1;
+}
+
+.bar.alt{
+ fill: #304345;
+}
+
+.paperbuzz-row {
+ margin-bottom: 1em;
+}
+
+.paperbuzz-category-row-heading {
+ font-size: 1.2em;
+}
+
+.paperbuzz-category-row-info {
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ border: none;
+ background-color: transparent;
+ position: relative;
+ top: -5px;
+ left: 2px;
+ margin-top: 5px;
+}
+
+.paperbuzz-count-label {
+ width: 100px;
+ float: left;
+ margin-top: .5em;
+ margin-right: 2em;
+ padding: 0.8em;
+ text-align: center;
+ border: 1px solid #c5dbec;
+ background: #c8d7d7;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ color: #304345;
+
+}
+
+.paperbuzz-count-label a {
+ text-decoration: none;
+}
+
+.paperbuzz-count-label a:hover {
+ background-color: transparent !important;
+ color: #555555 !important;
+}
+
+.paperbuzz-count-label img {
+ padding-right:0.5em;
+}
+
+.paperbuzz-count {
+ font-size: 1.15em;
+ padding-bottom: 0.4em;
+ padding-top: 0.4em;
+ font-weight: bold;
+ vertical-align: middle;
+}
+
+.paperbuzz-control {
+ text-decoration: underline;
+ color: blue;
+}
+
+.paperbuzz-control.active {
+ text-decoration: none;
+}
+
+.paperbuzz-control.disabled {
+ cursor: default;
+ text-decoration: none;
+ color: grey;
+}
+
+.paperbuzz-control:hover {
+ background-color: transparent;
+}
+
+.label-img {
+ vertical-align: middle;
+}
+
+#built-with {
+ float: right;
+ font-size: .75em;
+}
+
+div.tooltip {
+ position: absolute;
+ text-align: center;
+ width: 80px;
+ height: 28px;
+ padding: 2px;
+ font: 9px sans-serif;
+ background: lightsteelblue;
+ border: 0px;
+ border-radius: 8px;
+ pointer-events: none;
+ }
+
+ graphContainer div {
+ padding: 3px;
+ margin: 1px;
+ color: white;
+ }
+
diff --git a/index2.html b/index2.html
old mode 100644
new mode 100755
index ba282bd..26d9029
--- a/index2.html
+++ b/index2.html
@@ -1,6 +1,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
+ <meta charset="utf-8"/>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.tooltip.min.js"></script>
@@ -14,7 +15,7 @@
</style>
<link rel="stylesheet" type="text/css" href="css/bootstrap.tooltip.min.css" />
- <link rel="stylesheet" type="text/css" href="css/almviz.css" />
+ <link rel="stylesheet" type="text/css" href="css/paperbuzzviz.css" />
<link rel="stylesheet" type="text/css" href="css/jqueryUi.css" />
</head>
<body>
@@ -25,25 +26,27 @@ <h1>Paperbuzz Visualizations</h1>
<script type="text/javascript" src="script5.js"></script>
<script type="text/javascript">
- options = {
+ var options = {
baseUrl: 'http://pkp-alm.lib.sfu.ca',
minItemsToShowGraph: {
- minEventsForYearly: 6,
- minEventsForMonthly: 6,
- minEventsForDaily: 6,
- minYearsForYearly: 6,
- minMonthsForMonthly: 6,
- minDaysForDaily: 6
+ minEventsForYearly: 1,
+ minEventsForMonthly: 1,
+ minEventsForDaily: 1,
+ minYearsForYearly: 1,
+ minMonthsForMonthly: 1,
+ minDaysForDaily: 1
},
showTitle: true,
}
-
- d3.json('https://api.paperbuzz.org/v0/doi/10.1371/journal.pone.0000308', function(data) {
+
+ var paperbuzzviz = undefined;
+ d3.json('https://api.paperbuzz.org/v0/doi/10.7287/peerj.preprints.3119v1', function(data) {
options.paperbuzzStatsJson = data
- var paperbuzzviz = new PaperbuzzViz(options);
+ paperbuzzviz = new PaperbuzzViz(options);
paperbuzzviz.initViz();
- });
+ });
+
</script>
<div id="built-with"><p>Built with <a href="http://d3js.org/">d3.js</a></p></div>
</body>
diff --git a/script5.js b/script5.js
old mode 100644
new mode 100755
index 3e85af1..03129b9
--- a/script5.js
+++ b/script5.js
@@ -10,11 +10,6 @@ function PaperbuzzViz(options) {
// in case a different version of jQuery is needed from the one globally defined
$ = options.jQuery || $;
- // Init data
- var data = options.paperbuzzStatsJson;
- var categories_ = options.categories;
-
- console.log(data);
// Init basic options
var baseUrl_ = options.baseUrl;
var hasIcon = options.hasIcon;
@@ -26,14 +21,19 @@ function PaperbuzzViz(options) {
var showTitle = options.showTitle;
var formatNumber_ = d3.format(",d");
var parseDate = d3.timeParse('%Y-%m-%d');
- var year = data.metadata["published-online"]["date-parts"][0][0];
- var month = data.metadata["published-online"]["date-parts"][0][1];
- var day = data.metadata["published-online"]["date-parts"][0][2];
- var published_date = year+"-"+month+"-"+day;
+
+ var data = options.paperbuzzStatsJson;
+
+ // TODO: Fix to use parseDate
+ // TODO: Fix to work when no pub date is available. Use earliest event
+ // var year = data.metadata["published-online"]["date-parts"][0][0];
+ // var month = data.metadata["published-online"]["date-parts"][0][1];
+ // var day = data.metadata["published-online"]["date-parts"][0][2];
+ var published_date = '2017-08-02'; // year+"-"+month+"-"+day;
+ // var published_date = year+"-"+month+"-"+day;
// extract publication date
var pub_date = parseDate(published_date);
- console.log(pub_date);
var vizDiv;
// Get the Div where the viz should go (default to one with ID "paperbuzz')
@@ -49,24 +49,7 @@ function PaperbuzzViz(options) {
// to track if any metrics have been found
var metricsFound_;
- var a = 0;
- while (a < data.altmetrics_sources.length) {
- sources[a] = data.altmetrics_sources[a].source_id;
- a++;
- }
-
- // Fill eventcount, eventdate, and eventsources array with data from JSON call
- var i = 0;
- while (i < sources.length) {
-
- for (var j = 0; j<data.altmetrics_sources[i].events_count_by_day.length; j++) {
- eventcount.push(data.altmetrics_sources[i].events_count_by_day[j].count);
- eventdate.push(data.altmetrics_sources[i].events_count_by_day[j].date);
- eventsource.push(data.altmetrics_sources[i].source_id);
- }
-
- i++;
- }
+ sources = data.altmetrics_sources
/**
* Initialize the visualization.
@@ -85,7 +68,8 @@ function PaperbuzzViz(options) {
// loop through categories
sources.forEach(function(source) {
- addSource_(vizDiv, source, data);
+ metricsFound_ = true;
+ addSourceRow_(vizDiv, source);
});
@@ -103,61 +87,150 @@ function PaperbuzzViz(options) {
* @param {Object} data Statistics.
* @return {JQueryObject|boolean}
*/
- var addSource_ = function(canvas, source, data) {
- var $sourceRow = false;
-
- // Loop through sources to add statistics data to the category.
- sources.forEach(function(source) {
-
- // Only add the category row the first time
- if (!$sourceRow) {
- $sourceRow = getSourceRow_(canvas, source);
- }
-
- // Flag that there is at least one metric
- metricsFound_ = true;
- addSource_(source, $sourceRow);
- });
- };
-
-
- /**
- * Get category row d3 HTML element. It will automatically
- * add the element to the passed canvas.
- * @param {d3Object} canvas d3 HTML element
- * @param {Array} source Source information.
- * @param {d3Object}
- */
- var getSourceRow_ = function(canvas, source) {
+ var addSourceRow_ = function(canvas, source) {
var sourceRow, sourceTitle, tooltip;
// Build category html objects.
sourceRow = canvas.append("div")
.attr("class", "paperbuzz-source-row")
.attr("style", "width: 100%; overflow: hidden;")
- .attr("id", "source-" + source.name);
+ .attr("id", "source-" + source.source_id);
sourceTitle = sourceRow.append("h2")
.attr("class", "paperbuzz-source-row-heading")
- .attr("id", "month-" + source.name)
- .text(source.display_name);
+ .attr("id", "month-" + source)
+ .text(source.source_id);
- tooltip = sourceTitle.append("div")
- .attr("class", "paperbuzz-source-row-info").append("span")
- .attr("class", "ui-icon ui-icon-info");
+ // tooltip = sourceTitle.append("div")
+ // .attr("class", "paperbuzz-source-row-info").append("span")
+ // .attr("class", "ui-icon ui-icon-info");
- $(tooltip).tooltip({title: source, container: 'body'});
+ // $(tooltip).tooltip({title: source, container: 'body'});
+
+ addSource_(source, sourceRow)
return sourceRow;
};
- var addStuff_ = function(source) {
+/**
+ * Add source information to the passed category row element.
+ * @param {Object} source
+ * @param {Object} category
+ * @param {JQueryObject} $sourceRow
+ * @return {JQueryObject}
+ */
+ var addSource_ = function(source, $sourceRow) {
+ var $row, $countLabel, $count,
+ total = source.events_count;
+
+ $row = $sourceRow
+ .append("div")
+ .attr("class", "paperbuzz-row")
+ .attr("style", "float: left")
+ .attr("id", "paperbuzz-row-" + source.source_id);
+
+ $countLabel = $row.append("div")
+ .attr("class", "paperbuzz-count-label");
+
+ // if (hasIcon.indexOf(source.name) >= 0) {
+ // $countLabel.append("img")
+ // .attr("src", baseUrl_ + '/assets/' + source.name + '.png')
+ // .attr("alt", 'a description of the source')
+ // .attr("class", "label-img");
+ // }
+
+ // Check how to change this
+ if (source.events_url) {
+ // if there is an events_url, we can link to it from the count
+ $count = $countLabel.append("a")
+ .attr("href", function(d) { return source.events_url; });
+ } else {
+ // if no events_url, we just put in the count
+ $count = $countLabel.append("span");
+ }
+
+ $count
+ .attr("class", "paperbuzz-count")
+ .attr("id", "paperbuzz-count-" + source.source_id)
+ .text(formatNumber_(total));
+
+ $countLabel.append("br");
+ $countLabel.append("span")
+ .text(source.display_name);
+
+ // Only add a chart if the browser supports SVG
+ if (hasSVG_) {
+ var level = false;
+
+ // check what levels we can show
+ var showDaily = false;
+ var showMonthly = false;
+ var showYearly = false;
+
+ if (source.events_count_by_year) {
+ level_data = source.events_count_by_year;
+ var yearTotal = level_data.reduce(function(i, d) { return i + d.count; }, 0);
+ var numYears = d3.timeYear.range(pub_date, new Date()).length;
+
+ if (yearTotal >= minItems_.minEventsForYearly &&
+ numYears >= minItems_.minYearsForYearly) {
+ showYearly = true;
+ level = 'year';
+ };
+ }
+
+ if (source.events_count_by_month) {
+ level_data = source.events_count_by_month;
+ var monthTotal = level_data.reduce(function(i, d) { return i + d.count; }, 0);
+ var numMonths = d3.timeMonth.range(pub_date, new Date()).length;
+
+ if (monthTotal >= minItems_.minEventsForMonthly &&
+ numMonths >= minItems_.minMonthsForMonthly) {
+ showMonthly = true;
+ level = 'month';
+ };
+ }
+
+ if (source.events_count_by_day){
+ level_data = source.events_count_by_month;
+ var dayTotal = level_data.reduce(function(i, d) { return i + d.count; }, 0);
+ var numDays = d3.timeDay.range(pub_date, new Date()).length;
+
+ if (dayTotal >= minItems_.minEventsForDaily && numDays >= minItems_.minDaysForDaily) {
+ showDaily = true;
+ level = 'day';
+ };
+ }
+
+
+ // The level and level_data should be set to the finest level
+ // of granularity that we can show
+ timeInterval = getTimeInterval_(level);
+
+ // check there is data for
+ if (showDaily || showMonthly || showYearly) {
+ var $chartDiv = $row.append("div")
+ .attr("style", "width: 70%; float:left;")
+ .attr("class", "paperbuzz-chart-area");
+
+ var viz = getViz_($chartDiv, source);
+ loadData_(viz, level);
+
+ var update_controls = function(control) {
+ control.siblings('.paperbuzz-control').removeClass('active');
+ control.addClass('active');
+ };
+
+ var $levelControlsDiv = $chartDiv.append("div")
+ .attr("style", "width: " + (viz.margin.left + viz.width) + "px;")
+ .append("div")
+ .attr("style", "float:right;");
if (showDaily) {
$levelControlsDiv.append("a")
.attr("href", "javascript:void(0)")
- .classed("alm-control", true)
+ .classed("paperbuzz-control", true)
.classed("disabled", !showDaily)
.classed("active", (level == 'day'))
.text("daily (first 30)")
@@ -175,7 +248,7 @@ function PaperbuzzViz(options) {
if (showMonthly) {
$levelControlsDiv.append("a")
.attr("href", "javascript:void(0)")
- .classed("alm-control", true)
+ .classed("paperbuzz-control", true)
.classed("disabled", !showMonthly || !showYearly)
.classed("active", (level == 'month'))
.text("monthly")
@@ -194,7 +267,7 @@ function PaperbuzzViz(options) {
if (showYearly) {
$levelControlsDiv.append("a")
.attr("href", "javascript:void(0)")
- .classed("alm-control", true)
+ .classed("paperbuzz-control", true)
.classed("disabled", !showYearly || !showMonthly)
.classed("active", (level == 'year'))
.text("yearly")
@@ -217,6 +290,7 @@ function PaperbuzzViz(options) {
return $row;
};
+
/**
* Extract the date from the source
@@ -225,16 +299,16 @@ function PaperbuzzViz(options) {
* @return {Date}
*/
var getDate_ = function(level, d) {
- switch (level) {
- case 'year':
- return new Date(d.year, 0, 1);
- case 'month':
- // js Date indexes months at 0
- return new Date(d.year, d.month - 1, 1);
- case 'day':
- // js Date indexes months at 0
- return new Date(d.year, d.month - 1, d.day);
+ var parseString = ''
+ if (level == 'year') {
+ parseString = '%Y';
+ } else if (level == 'month') {
+ parseString = '%Y-%m';
+ } else if (level == 'day') {
+ parseString = '%Y-%m-%d';
}
+ return d3.timeParse(parseString)(d.date);
+
};
@@ -265,11 +339,11 @@ function PaperbuzzViz(options) {
var getData_ = function(level, source) {
switch (level) {
case 'year':
- return source.by_year;
+ return source.events_count_by_year;
case 'month':
- return source.by_month;
+ return source.events_count_by_month;
case 'day':
- return source.by_day;
+ return source.events_count_by_day;
}
};
@@ -281,11 +355,11 @@ function PaperbuzzViz(options) {
var getTimeInterval_ = function(level) {
switch (level) {
case 'year':
- return d3.time.year.utc;
+ return d3.timeYear;
case 'month':
- return d3.time.month.utc;
+ return d3.timeMonth;
case 'day':
- return d3.time.day.utc;
+ return d3.timeDay;
}
};
@@ -312,18 +386,16 @@ function PaperbuzzViz(options) {
viz.sources = sources;
// just for record keeping
- viz.name = sources.name;
+ viz.name = sources.source_id;
viz.x = d3.scaleTime()
- .domain(d3.extent(eventdate, function(d){ return parseDate(d); }))
.range([0,viz.width])
.nice(d3.timeMonth);
viz.y = d3.scaleLinear()
- .domain([0, d3.max(newECArray)])
.rangeRound([viz.height,0]);
- viz.z = d3.scale.ordinal();
+ viz.z = d3.scaleOrdinal();
viz.z.range(['main', 'alt']);
// the chart
@@ -366,7 +438,7 @@ function PaperbuzzViz(options) {
if (level == 'day') {
end_date = timeInterval.offset(pub_date, 29);
} else {
- end_date = d3.time.year.utc.ceil(end_date);
+ end_date = d3.timeYear.ceil(end_date);
}
//
@@ -376,24 +448,15 @@ function PaperbuzzViz(options) {
viz.x.domain([timeInterval.floor(pub_date), end_date]);
// a linear axis from 0 to max value found
- viz.y.domain([0, d3.max(newECArray)]);
+ viz.y.domain([0, d3.max(level_data, function(d) { return d.count; })]);
//
// Axis
//
- // a linear axis between publication date and current date
- viz.xAxis = d3.svg.axis()
- .scale(viz.x)
- .tickSize(0)
- .ticks(0);
-
- // a linear y axis between 0 and max value found in data
- viz.yAxis = d3.svg.axis()
- .scale(viz.y)
- .orient("left")
- .tickSize(0)
- .tickValues([d3.max(viz.y.domain())]) // only one tick at max
- .tickFormat(d3.format(",d"));
+ var yAxis = d3.axisLeft(viz.y)
+ .tickValues([d3.max(viz.y.domain())]);
+
+ var xAxis = d3.axisBottom(viz.x);
//
// The chart itself
@@ -402,36 +465,24 @@ function PaperbuzzViz(options) {
// TODO: these transitions could use a little work
var barWidth = Math.max((viz.width/(timeInterval.range(pub_date, end_date).length + 1)) - 2, 1);
- var barsForTooltips = viz.barsForTooltips.selectAll(".barsForTooltip")
- .data(level_data, function(d) { return getDate_(level, d); });
+ // var barsForTooltips = viz.barsForTooltips.selectAll(".barsForTooltip")
+ // .data(level_data, function(d) { return getDate_(level, d); });
- barsForTooltips
- .exit()
- .remove();
+ // barsForTooltips
+ // .exit()
+ // .remove();
var bars = viz.bars.selectAll(".bar")
.data(level_data, function(d) { return getDate_(level, d); });
bars
.enter().append("rect")
- .attr("class", function(d) { return "bar " + viz.z((level == 'day' ? d3.time.weekOfYear(getDate_(level, d)) : d.year)); })
- .attr("y", viz.height)
- .attr("height", 0);
-
- bars
- .attr("x", function(d) { return viz.x(getDate_(level, d)) + 2; }) // padding of 2, 1 each side
- .attr("width", barWidth);
-
- bars.transition()
- .duration(1000)
+ // .attr("class", function(d) { return "bar " + viz.z((level == 'day' ? d3.time.weekOfYear(getDate_(level, d)) : d.year)); })
+ .attr("class", function(d) { return "bar " + viz.z(d.year); })
+ .attr("x", function(d) { return viz.x(getDate_(level, d)) + 2; }) // padding of 2, 1 each
+ .attr("y", function(d) { return viz.y(d.count) } )
.attr("width", barWidth)
- .attr("y", function(d) { return viz.y(d[category.name]); })
- .attr("height", function(d) { return viz.height - viz.y(d[category.name]); });
-
- bars
- .exit().transition()
- .attr("y", viz.height)
- .attr("height", 0);
+ .attr("height", function(d) { return viz.height - viz.y(d.count); });
bars
.exit()
@@ -439,30 +490,30 @@ function PaperbuzzViz(options) {
viz.svg
.select(".x.axis")
- .call(viz.xAxis);
+ .call(xAxis);
viz.svg
.transition().duration(1000)
.select(".y.axis")
- .call(viz.yAxis);
+ .call(yAxis);
- barsForTooltips
- .enter().append("rect")
- .attr("class", function(d) { return "barsForTooltip " + viz.z((level == 'day' ? d3.time.weekOfYear(getDate_(level, d)) : d.year)); });
+ // barsForTooltips
+ // .enter().append("rect")
+ // .attr("class", function(d) { return "barsForTooltip " + viz.z((level == 'day' ? d3.time.weekOfYear(getDate_(level, d)) : d.year)); });
- barsForTooltips
- .attr("width", barWidth + 2)
- .attr("x", function(d) { return viz.x(getDate_(level, d)) + 1; })
- .attr("y", function(d) { return viz.y(d[category.name]) - 1; })
- .attr("height", function(d) { return viz.height - viz.y(d[category.name]) + 1; });
+ // barsForTooltips
+ // .attr("width", barWidth + 2)
+ // .attr("x", function(d) { return viz.x(getDate_(level, d)) + 1; })
+ // .attr("y", function(d) { return viz.y(d.count) - 1; })
+ // .attr("height", function(d) { return viz.height - viz.y(d.count) + 1; });
// add in some tool tips
- viz.barsForTooltips.selectAll("rect").each(
- function(d,i){
- $(this).tooltip('destroy'); // need to destroy so all bars get updated
- $(this).tooltip({title: formatNumber_(d[category.name]) + " in " + getFormattedDate_(level, d), container: "body"});
- }
- );
+ // viz.barsForTooltips.selectAll("rect").each(
+ // function(d,i){
+ // $(this).tooltip('destroy'); // need to destroy so all bars get updated
+ // $(this).tooltip({title: formatNumber_(d.count) + " in " + getFormattedDate_(level, d), container: "body"});
+ // }
+ // );
}
};
From 1fad484a4f1f17049a868856188a0f127fdb71d2 Mon Sep 17 00:00:00 2001
From: Juan Pablo Alperin <juan@alperin.ca>
Date: Thu, 8 Mar 2018 16:55:41 -0800
Subject: [PATCH 2/2] added tooltip + cleaned up code a little
---
css/paperbuzzviz.css | 9 ++----
index2.html | 6 +++-
script5.js | 73 +++++++++++++++++---------------------------
3 files changed, 35 insertions(+), 53 deletions(-)
diff --git a/css/paperbuzzviz.css b/css/paperbuzzviz.css
index 63f20f6..7bae154 100755
--- a/css/paperbuzzviz.css
+++ b/css/paperbuzzviz.css
@@ -119,7 +119,7 @@
font-size: .75em;
}
-div.tooltip {
+#paperbuzzTooltip {
position: absolute;
text-align: center;
width: 80px;
@@ -130,11 +130,6 @@ div.tooltip {
border: 0px;
border-radius: 8px;
pointer-events: none;
- }
+}
- graphContainer div {
- padding: 3px;
- margin: 1px;
- color: white;
- }
diff --git a/index2.html b/index2.html
index 26d9029..e380b68 100755
--- a/index2.html
+++ b/index2.html
@@ -41,7 +41,11 @@ <h1>Paperbuzz Visualizations</h1>
}
var paperbuzzviz = undefined;
- d3.json('https://api.paperbuzz.org/v0/doi/10.7287/peerj.preprints.3119v1', function(data) {
+ var doi = '10.1371/journal.pmed.0020124';
+ var doi = '10.7287/peerj.preprints.3119v1';
+ var doi = '10.1007/s00266-017-0820-4';
+
+ d3.json('https://api.paperbuzz.org/v0/doi/' + doi, function(data) {
options.paperbuzzStatsJson = data
paperbuzzviz = new PaperbuzzViz(options);
paperbuzzviz.initViz();
diff --git a/script5.js b/script5.js
index 03129b9..fa0c492 100755
--- a/script5.js
+++ b/script5.js
@@ -26,11 +26,11 @@ function PaperbuzzViz(options) {
// TODO: Fix to use parseDate
// TODO: Fix to work when no pub date is available. Use earliest event
- // var year = data.metadata["published-online"]["date-parts"][0][0];
- // var month = data.metadata["published-online"]["date-parts"][0][1];
- // var day = data.metadata["published-online"]["date-parts"][0][2];
- var published_date = '2017-08-02'; // year+"-"+month+"-"+day;
- // var published_date = year+"-"+month+"-"+day;
+ var year = data.metadata["published-online"]["date-parts"][0][0];
+ var month = data.metadata["published-online"]["date-parts"][0][1];
+ var day = data.metadata["published-online"]["date-parts"][0][2];
+ // var published_date = '2017-08-02'; // year+"-"+month+"-"+day;
+ var published_date = year+"-"+month+"-"+day;
// extract publication date
var pub_date = parseDate(published_date);
@@ -72,6 +72,10 @@ function PaperbuzzViz(options) {
addSourceRow_(vizDiv, source);
});
+ // add a tooltip: this will be moved around when going in/out of a bar in a graph
+ vizDiv.append("div")
+ .attr("id", "paperbuzzTooltip")
+ .style("opacity", 0);
if (!metricsFound_) {
vizDiv.append("p")
@@ -88,7 +92,7 @@ function PaperbuzzViz(options) {
* @return {JQueryObject|boolean}
*/
var addSourceRow_ = function(canvas, source) {
- var sourceRow, sourceTitle, tooltip;
+ var sourceRow, sourceTitle;
// Build category html objects.
sourceRow = canvas.append("div")
@@ -101,19 +105,13 @@ function PaperbuzzViz(options) {
.attr("id", "month-" + source)
.text(source.source_id);
- // tooltip = sourceTitle.append("div")
- // .attr("class", "paperbuzz-source-row-info").append("span")
- // .attr("class", "ui-icon ui-icon-info");
-
- // $(tooltip).tooltip({title: source, container: 'body'});
-
addSource_(source, sourceRow)
return sourceRow;
};
-/**
+ /**
* Add source information to the passed category row element.
* @param {Object} source
* @param {Object} category
@@ -409,9 +407,6 @@ function PaperbuzzViz(options) {
// draw the bars g first so it ends up underneath the axes
viz.bars = viz.svg.append("g");
- // and the shadow bars on top for the tooltips
- viz.barsForTooltips = viz.svg.append("g");
-
viz.svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (viz.height - 1) + ")");
@@ -465,24 +460,31 @@ function PaperbuzzViz(options) {
// TODO: these transitions could use a little work
var barWidth = Math.max((viz.width/(timeInterval.range(pub_date, end_date).length + 1)) - 2, 1);
- // var barsForTooltips = viz.barsForTooltips.selectAll(".barsForTooltip")
- // .data(level_data, function(d) { return getDate_(level, d); });
-
- // barsForTooltips
- // .exit()
- // .remove();
-
var bars = viz.bars.selectAll(".bar")
.data(level_data, function(d) { return getDate_(level, d); });
bars
.enter().append("rect")
- // .attr("class", function(d) { return "bar " + viz.z((level == 'day' ? d3.time.weekOfYear(getDate_(level, d)) : d.year)); })
- .attr("class", function(d) { return "bar " + viz.z(d.year); })
+ .attr("class", function(d) { return "bar " + viz.z((level == 'day' ? d3.timeWeek(getDate_(level, d)) : d.year)); })
.attr("x", function(d) { return viz.x(getDate_(level, d)) + 2; }) // padding of 2, 1 each
.attr("y", function(d) { return viz.y(d.count) } )
.attr("width", barWidth)
- .attr("height", function(d) { return viz.height - viz.y(d.count); });
+ .attr("height", function(d) { return viz.height - viz.y(d.count); })
+ .on("mouseover", function(d) {
+ tooltipDiv = d3.select("#paperbuzzTooltip");
+ tooltipDiv.transition()
+ .duration(100)
+ .style("opacity", .9)
+ .style("left", d3.event.pageX - 50 + "px")
+ .style("top", d3.event.pageY - 50 + "px");
+ tooltipDiv.html("count: " + d.count + "<br>" + "date: " + d.date);
+ })
+ .on("mouseout", function(d) {
+ tooltipDiv = d3.select("#paperbuzzTooltip");
+ tooltipDiv.transition()
+ .duration(500)
+ .style("opacity", 0);
+ });
bars
.exit()
@@ -496,24 +498,5 @@ function PaperbuzzViz(options) {
.transition().duration(1000)
.select(".y.axis")
.call(yAxis);
-
- // barsForTooltips
- // .enter().append("rect")
- // .attr("class", function(d) { return "barsForTooltip " + viz.z((level == 'day' ? d3.time.weekOfYear(getDate_(level, d)) : d.year)); });
-
- // barsForTooltips
- // .attr("width", barWidth + 2)
- // .attr("x", function(d) { return viz.x(getDate_(level, d)) + 1; })
- // .attr("y", function(d) { return viz.y(d.count) - 1; })
- // .attr("height", function(d) { return viz.height - viz.y(d.count) + 1; });
-
-
- // add in some tool tips
- // viz.barsForTooltips.selectAll("rect").each(
- // function(d,i){
- // $(this).tooltip('destroy'); // need to destroy so all bars get updated
- // $(this).tooltip({title: formatNumber_(d.count) + " in " + getFormattedDate_(level, d), container: "body"});
- // }
- // );
}
};