Merge pull request #8 from RhoInc/clear-issues

Clear issues

publicationMetadata.json → data/publicationMetadata.json

@@ -52,7 +52,7 @@
     ]
   },
   {
-    "title": "The Safety Explorer Suite: Interactive Safety Monitoring for Clinical Trials.",
+    "title": "The Safety Explorer Suite: Interactive Safety Monitoring for Clinical Trials",
     "thumbnail": "TIRS2018_Wildfire.png",
     "reference": "Therapeutic Innovation & Regulatory Science. Published 2018",
     "authors": "Jeremy Wildfire, Ryan Bailey, et al.",
@@ -404,7 +404,7 @@
     ]
   },
   {
-    "title": "Effective Graphical Data Displays to Facilitate Expedited DSMB Review of Clinical Trial Data",
+    "title": "Comparability of CTCAE Grading and Clinical Significance in Abnormal Clinical Laboratory Results",
     "thumbnail": "JSM2012_Pinckney.png",
     "reference": "Joint Statistical Meetings. August 2012 in San Diego, CA",
     "authors": "Ashley Pinckney, Katie Poole",

index.html

@@ -52,7 +52,7 @@ <h5>Publications with authors from the <a href="https://rhoinc.github.io/graphic
       </div>
   </div>
 
-  <div class=" w3-row-padding w3-container w3-padding-16"></div>
+  <div class=" w3-row-padding w3-container w3-padding-16">
     <div style="" class="w3-content">
       <h1>Publications</h1>
       <div class="pubs"></div>
@@ -73,7 +73,7 @@ <h1>Publications</h1>
       </div>
   </footer>
 
-  <script src='./buildPubList.js'></script>
+  <script src='./index.js'></script>
   <script>
       // Used to toggle the menu on small screens when clicking on the menu button
       function myFunction() {
@@ -84,11 +84,6 @@ <h1>Publications</h1>
               x.className = x.className.replace(" w3-show", "");
           }
       }
-
-      // Build the publication list
-      d3.json("publicationMetadata.json", function(error, publications) {
-        buildPubList(publications,".pubs")
-      })
 </script>
 </body>
 </html>

index.js

@@ -0,0 +1,70 @@
+(function(factory) {
+    typeof define === 'function' && define.amd ? define(factory) : factory();
+})(function() {
+    'use strict';
+
+    function addPublications(meta, parentElement) {
+        var parentDiv = d3.select(parentElement);
+        var list = parentDiv.append('ul').attr('class', 'pubs');
+        var items = list
+            .selectAll('li')
+            .data(meta)
+            .enter()
+            .append('li')
+            .attr('class', 'pub'); //thumb
+
+        items.append('img').attr('src', function(d) {
+            return './img/' + d.thumbnail;
+        }); //    .text(d => (d.description ? d.description : "<no description available>"));
+
+        var wraps = items.append('div').attr('class', 'pub-wrap'); //title
+
+        wraps
+            .append('p')
+            .attr('class', 'title')
+            .text(function(d) {
+                return d.title;
+            }); //description
+
+        wraps
+            .append('p')
+            .attr('class', 'reference')
+            .text(function(d) {
+                return d.reference;
+            }); //author
+
+        wraps
+            .append('p')
+            .attr('class', 'author')
+            .text(function(d) {
+                return d.authors;
+            }); //tags
+
+        function cap1(string) {
+            return string.charAt(0).toUpperCase() + string.slice(1);
+        }
+
+        var taglist = wraps.append('ul').attr('class', 'tags');
+        taglist
+            .selectAll('li')
+            .data(function(d) {
+                return d.links;
+            })
+            .enter()
+            .append('li')
+            .append('a')
+            .attr('href', function(d) {
+                return d.href.indexOf('http') > -1 ? d.href : './pubs/' + d.href;
+            })
+            .attr('class', function(d) {
+                return d.type;
+            })
+            .html(function(d) {
+                return d.type == 'github' ? d.type : cap1(d.type);
+            });
+    }
+
+    d3.json('./data/publicationMetadata.json', function(error, publications) {
+        addPublications(publications, '.pubs');
+    });
+});

js/addPublications.js

@@ -0,0 +1,51 @@
+export default function addPublications(meta, parentElement) {
+    var parentDiv = d3.select(parentElement);
+    var list = parentDiv.append('ul').attr('class', 'pubs');
+    var items = list
+        .selectAll('li')
+        .data(meta)
+        .enter()
+        .append('li')
+        .attr('class', 'pub');
+
+    //thumb
+    items.append('img').attr('src', d => './img/' + d.thumbnail);
+    //    .text(d => (d.description ? d.description : "<no description available>"));
+
+    var wraps = items.append('div').attr('class', 'pub-wrap');
+
+    //title
+    wraps
+        .append('p')
+        .attr('class', 'title')
+        .text(d => d.title);
+
+    //description
+    wraps
+        .append('p')
+        .attr('class', 'reference')
+        .text(d => d.reference);
+
+    //author
+    wraps
+        .append('p')
+        .attr('class', 'author')
+        .text(d => d.authors);
+
+    //tags
+    function cap1(string) {
+        return string.charAt(0).toUpperCase() + string.slice(1);
+    }
+    var taglist = wraps.append('ul').attr('class', 'tags');
+    taglist
+        .selectAll('li')
+        .data(d => d.links)
+        .enter()
+        .append('li')
+        .append('a')
+        .attr('href', d => (d.href.indexOf('http') > -1 ? d.href : './pubs/' + d.href))
+        .attr('class', d => d.type)
+        .html(function(d) {
+            return d.type == 'github' ? d.type : cap1(d.type);
+        });
+}

js/index.js

@@ -0,0 +1,5 @@
+import addPublications from './addPublications';
+
+d3.json('./data/publicationMetadata.json', function(error, publications) {
+    addPublications(publications, '.pubs');
+});

main.css

@@ -70,12 +70,13 @@ ul.pubs li.pub img{
 	float:left;
 	vertical-align:top;
 	padding:0.5em;
-	margin-right:1em;
+	margin-right:7px;
 
 }
 
 ul.pubs li.pub .pub-wrap{
-padding:0.5em;
+  padding:0.5em;
+  margin-left:140px;
 }
 
 ul.pubs li.pub .pub-wrap p{
@@ -89,6 +90,7 @@ ul.pubs li.pub .pub-wrap p.title{
 
 ul.pubs li.pub .pub-wrap ul.tags{
 	list-style: none;
+  padding:0;
 }
 
 ul.pubs li.pub .pub-wrap ul.tags li{