-
Notifications
You must be signed in to change notification settings - Fork 0
/
index-11_21_1040gp.html
executable file
·225 lines (211 loc) · 13.4 KB
/
index-11_21_1040gp.html
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <title>DPLA Metadata Visualization</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="This web application was created by Geoffrey Potter and Shengwei Wang in Fall 2015 for INF 385T: Metadata Generation and Infastructure" /> <meta name="description" content="Accordian spry asses and original template created by Codify Design Studio." /> <meta name="description" content="Javascript, D3, CSS and continued html devolpment by the Design and Programming team mentioned above." /> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> <script type="text/javascript" src="SpryAssets/SpryAccordion.js"></script> <link rel="stylesheet" type="text/css" href="SpryAssets/SpryAccordion.css" /> <script type="text/javascript" src="d3/d3.js"></script> </head> <body> <div class="container"> <div class="bannerArea"> <div class="toplogo">DPLA Metadata Visulaization</div> <!-- BEGIN Prfile Selector Code Here --> <div class="bannerNav"> <h1>Collection Profile Name <select id="mySelect" name="collectionSelect" onchange="collChange(this.value)" tabindex="0"> <option value="0" selected>Select A Collection</option> </select> Number of Items</h1> </div> <!-- END Prfile Selector Code Here --> <!-- BEGIN Tab Selector Code Here --> <div class="bannerNav" align="right"> <a href="#" onclick="SpryAccordion1.openPanel(0); return false;" class="SelectPanelTab">Required Fields</a> <a href="#" onclick="SpryAccordion1.openPanel(1); return false;" class="SelectPanelTab">Recommended Fields</a> <a href="#" onclick="SpryAccordion1.openPanel(2); return false;" class="SelectPanelTab">Optional Fields</a> </div> <!-- END Tab Selector Code Here --> </div> <div class="navigationArea"> <!-- BEGIN Required Fields Code Tab Area Here --> <div id="SpryAccordion1" class="Accordion" tabindex="1"> <div class="AccordionPanel" id="required"> <div class="AccordionPanelTab" id="required">Required Fields</div> <div class="AccordionPanelContent" id="rquired"> <!-- BEGIN REQUIRED Fields Code Text Here --> <div class="contentleft" id="title"> <h1>Title Field</h1> <!-- BEGIN D3 code here for TITLE box and bar --> <svg width="300" height="100"> <rect id="titleSvgEmpty" x="0" y="0" height="50" width="50" stroke="darkRed" stroke-width="4" fill="#ff1a1a" /> <text id="titleEmpty" x="10" y="28" fill="black" >0</text> <rect id="titleSvgFill" x="50" y="13" height="25" width="200" stroke="darkGreen" stroke-width="4" fill="#2db82d"/> <text id="titleFill" x="60" y="28" fill="black" >0</text> </svg> <!-- BEGIN D3 code here for list of failed TITLE entries --> <p class="EmptyList" id="titleList">The following items have empty TITLE fields.</p> <!-- END D3 code here for TITLE --> </div> <!-- END Filler Text --> <!-- BEGIN Filler Text. Insert Rights Field here --> <div class="contentright" id="rights"> <h1>Rights Field</h1> <!-- BEGIN D3 code here for RIGHTS box and bar --> <svg width="300" height="100"> <rect id="rightsSvgEmpty" x="0" y="0" height="50" width="50" stroke="darkRed" stroke-width="4" fill="#ff1a1a" /> <text id="rightsEmpty" x="10" y="28" fill="black" >0</text> <rect id="rightsSvgFill" x="50" y="13" height="25" width="200" stroke="darkGreen" stroke-width="4" fill="#2db82d"/> <text id="rightsFill" x="60" y="28" fill="black" >0</text> </svg> <!-- BEGIN D3 code here for list of failed RIGHTS entries --> <p class="EmptyList" id="rightsList">The following items have empty RIGHTS fields.</p> <!-- END D3 code here for RIGHTS --> </div> </div> </div> <!-- END Required Fields Tab --> <!-- BEGIN Recommended Code Tab Area Here --> <div class="AccordionPanel" id="recommended"> <div class="AccordionPanelTab" id="recommended">Recommended Fields</div> <div class="AccordionPanelContent" id="recommended"> <div class="acontent"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliq,uam, nunc eget euismod ullamcorper, lectus nunc ullam corper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Lorem ipsum dolor sit amet.</p> <p>Tempus, nunc arcumollis enim, eu aliqu mam erat nullan non nibh consecteuer malesum adavelit. Nam ante nulla, interdum vel, tristique ac, condimentum non, tellus. Proin ornare feugiat nisl. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, Suspendisse dolor nisl, ultrices at, eleifend vel, consequat at, dolor. Vivamus auctor leo vel dui. Aliquam erat volutpat. Phasellus nibh.</p> </div> </div> </div> <!-- END Recommended Fields Tab --> <!-- BEGIN Optional Code Tab Area Here --> <div class="AccordionPanel" id="optional"> <div class="AccordionPanelTab" id="optional">Optional Fields</div> <div class="AccordionPanelContent" id="optional"> <div class="acontent"> <p>Tempus, nunc arcumollis enim, eu aliqu mam erat nullan non nibh consecteuer malesum adavelit. Nam ante nulla, interdum vel, tristique ac, condimentum non, tellus. Proin ornare feugiat nisl. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, Suspendisse dolor nisl, ultrices at, eleifend vel, consequat at, dolor. Vivamus auctor leo vel dui. Aliquam erat volutpat. Phasellus nibh.</p> </div> </div> </div> </div> <!-- END Optional Fields --> <!-- END Fields Code Tabs Area Here --> </div> <!-- BEGIN Descriptive Text Area Here --> <div class="contentArea"> <div class="contentleft"> <h1>Key</h1> <p>Service Hubs create Collection Profiles for the DPLA. Each Collection Profile has Required, Recommended, and Optional fields. Selecting a profile will begin the analysis.</p> <img src="images/key.png" width="100" border="0" class="imageright" /> <p>The <b>Required Field Visualization</b> shows wether or not all a given field's entries are filled. The green bar shows the percent of good entries followed by the number of good entries. The red box shows the percent of empty entries followed by the number of empty entries. Following the visualization is a list of items with empty requited fields, if any exist. Each item identified has an unambiguous URI reference to the original. A Hub can use this information to repair missing or malformed field entries in a given item.</p> </div> <div class="contentright"> <img src="images/logos/dpla_logo-square_sm.jpeg" width="100" border="0" class="imageright" /> <h1>About this Project</h1> <p>The <a href="http://dp.la" target="blank">Digital Public Library of America</a> (DPLA) provides a centralized, virtual catalog of resources collected in Libraries, Museums and other public archives located all across America. Content and Service Hubs collect metadata content for the DPLAs use in the form of Collection Profiles.</p> <p>This project provides a quick, visual quality assessment of a Collection Profile. Along with visual feedback, textual information is given to help the Hubs identify problematic items. This application aims to help the Hubs repair and enrich their own Collection Profiles for the DPLA's use.</p> </div> <div style="clear:both;"></div> </div> <!-- END Descriptive Text --> <div style="clear:both;"></div> <!-- BEGIN Footer Text --> <div class="footerArea"> <div class="copyright">Created Fall 2015 For 385T: Metadata Generation and Infastructure. Designed and Programmed by Geoffrey Potter and Shengwei Wang.</div> </div> <!-- END Footer Text --> </div> <script type="text/javascript"> <!-- var SpryAccordion1 = new Spry.Widget.Accordion("SpryAccordion1", {useFixedPanelHeights:false, defaultPanel:0}); //--> function addOption(text,value){ var obj=document.getElementById('mySelect'); obj.options.add(new Option(text,value)); } d3.json("list1.json",function(d){ var i=0; for(k in d.collectionlist){ addOption(d.collectionlist[i].fileName,d.collectionlist[i].data); i++; } }) function collChange(val){ var shownAt={}; var shownAtList={}; d3.json(val,function(d){ var propertyNames=Object.getOwnPropertyNames(d.collMetadataDetail.collectionVolume); //getNames var volume=[d.collMetadataDetail.itemCount]; var usage=[d.collMetadataDetail.itemCount]; var name=["itemCount"] propertyNames.forEach(function(dd){ //for each category, push one value into the arrary volume.push(d.collMetadataDetail.collectionVolume[dd]); usage.push(d.collMetadataDetail.collectionUsage[dd]); name.push(dd); }) for(var j in name){ var k=name[j]; var obj1=document.getElementById(k+"Empty"); if(obj1==null) continue; var obj2=document.getElementById(k+"Fill"); var obj3=document.getElementById(k+"List"); var obj4=document.getElementById(k+"SvgEmpty"); var obj5=document.getElementById(k+"SvgFill"); obj1.textContent=d.collMetadataDetail.itemCount-d.collMetadataDetail.collectionVolume[k]; obj2.textContent=d.collMetadataDetail.collectionVolume[k]; if(d.collMetadataDetail.itemCount==d.collMetadataDetail.collectionVolume[k]){ obj4.setAttribute("width","0") obj5.setAttribute("x","0"); obj5.setAttribute("width","300"); obj1.textContent=""; } else{ var l=300*Math.sqrt(Math.sqrt((d.collMetadataDetail.itemCount-d.collMetadataDetail.collectionVolume[k])/d.collMetadataDetail.itemCount)); if(l<50) l=50; obj2.setAttribute("x",l); obj4.setAttribute("width",l) obj5.setAttribute("x",l); obj5.setAttribute("width",300-l); } obj3.innerHTML=""; obj3.innerHTML=""; var itemsId=""; var idList=new Array(); for(var i in d.itemDetail){ if(d.itemDetail[i].attrVolume[k]==0){ //itemsId+="\""+d.itemDetail[i].itemId+"\"OR"; itemsId+="\""+d.itemDetail[i].itemId+"\"OR"; idList.push(d.itemDetail[i].itemId); } } shownAt[name[j]]=itemsId; shownAtList[name[j]]=idList; } }) d3.json(val,function(d){ var obj3=document.getElementById("title"+"List"); obj3.innerHTML=""; console.log(shownAtList); for(var k in shownAtList["title"]){ d3.json("http://api.dp.la/v2/items?fields=isShownAt&api_key=132ad3a6039290de75859c05323173ea&id="+shownAtList["title"][k],function(d){ console.log(obj3); for(var i in d.docs) obj3.innerHTML+=(d.docs[i].isShownAt+"<br/>"); }) } obj3=document.getElementById("rights"+"List"); obj3.innerHTML=""; for(var k in shownAtList["rights"]){ d3.json("http://api.dp.la/v2/items?fields=isShownAt&api_key=132ad3a6039290de75859c05323173ea&id="+shownAtList["rights"][k],function(d){ for(var i in d.docs) obj3.innerHTML+=(d.docs[i].isShownAt+"<br/>"); }) } }) } </script> </body></html>