From ecf96389ad8ba67a02bf33dd7c675f4a89b5b06c Mon Sep 17 00:00:00 2001 From: Melanie Date: Thu, 7 Mar 2024 19:46:52 +0100 Subject: [PATCH] Working on story 4 --- devstory4.html | 1004 ++++++++++++++++++++++++++++++++++++++--------- img/4scene2.svg | 243 ++++++------ img/4scene3.svg | 190 +++++++++ img/4scene4.svg | 85 ++++ js/scripts.js | 9 +- style.css | 102 ++++- 6 files changed, 1322 insertions(+), 311 deletions(-) create mode 100644 img/4scene3.svg create mode 100644 img/4scene4.svg diff --git a/devstory4.html b/devstory4.html index 83f3ba5..8634dad 100644 --- a/devstory4.html +++ b/devstory4.html @@ -55,174 +55,265 @@ +
+

Data Detangle

+

How Knowledge Graphs Bring Order to the HRA’s Data Diversity

+
+
- - + + - - - - - - + + + + + + - - - Artboard - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
@@ -241,7 +332,8 @@
-
The data itself comes in many different formats, some of which may require a particular code to read. +
The data itself comes in many different formats, some of which may require a + particular code to read.
@@ -251,29 +343,427 @@
-
It may have been mixed with other data or repurposed. +
It may have been mixed with other data or repurposed.
-
Some data might be open research data, available to all. +
Some data might be open research data, available to all.
-
While some data might have restrictions that limit access, use, and distribution. +
While some data might have restrictions that limit access, use, and distribution.
-
For the Human Reference Atlas (HRA), we need the ability to easily find the data we want, utilize it for our purposes, and share it as widely as possible. +
For the Human Reference Atlas (HRA), we need the ability to easily find the data we + want, utilize it for our purposes, and share it as widely as possible.
+
+ + + + Artboard + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Pure data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Pure data + + + Structured data + + + + + + + + + + + +
+ +
+
Of course, that data needs to be structured in a way that it can be readable by machines. +
+
+
+
Ideally, though, that data structure would also be understandable to humans. +
+
+ +
+
It would not only show what data exists in the HRA but also how pieces of that data relate to each other. +
+
+ +
+
+ +
+ + + + Artboard + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Tuft cell + + + Large + Intestine + + + Digestive + System + + + Trachea + + + Tuft cell + + + Respiratory + System + + + + + Is part of + + + Contains cell type + + + + + + + Is part of + + + Contains cell type + + + + + + + + + + + + + + + + + + + + + + + + + + + Breathing System + + + Eating System + + + + + + + + + + + + Large + Intestine + + + Digestive + System + + + Trachea + + + Tuft cell + + + Respiratory + System + + + + Is part of + + + Contains cell type + + + + + + + Is part of + + + Contains cell type + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Two Areas of research + Two groups of experts + Two sets of data + + + Semantic labels map + all individual data points to terms + in a shared language. + Data points are connected using common, + agreed-upon relationship types. + + + What can we learn by + comparing/contrasting: + * Cell structure + * Cell function + * Cell-cell interaction, etc. + between Tuft cells in + two different organs from + two different systems? + + + +
+ +
+
By labeling our data and connecting our labeled nodes with relational + links, +
+
+ +
+
we put our data into context and create a framework for moving from data +
+
+ +
+
to knowledge +
+
+
+
to insight. +
+
+ +
+
@@ -332,8 +822,11 @@ - + + + + diff --git a/img/4scene2.svg b/img/4scene2.svg index 56ec9bb..7b1bc60 100644 --- a/img/4scene2.svg +++ b/img/4scene2.svg @@ -4,36 +4,14 @@ Artboard Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - @@ -41,112 +19,139 @@ - - - - - - -
",new Ie(function(e,t){if(e[0]&&"childList"==e[0].type&&!e[0].removedNodes[0].childNodes.length){var n=(S=de(Se,"innerHTML"))&&S.set;n&&me(Se,"innerHTML",{set:function(e){for(;this.lastChild;)this.removeChild(this.lastChild);n.call(this,e)}})}t.disconnect(),S=null}).observe(S,{childList:!0,subtree:!0}),S.innerHTML=""),Ye||(Te||Le?(I=function(e,t){se.call(t,e)||f(e,t)},F=f):F=I=function(e,t){e[R]||(e[R]=b(!0),f(e,t))},Ve?(tt=!1,function(){var e=de(Se,U),t=e.value,n=function(e){var t=new CustomEvent(Q,{bubbles:!0});t.attrName=e,t.prevValue=Be.call(this,e),t.newValue=null,t[$]=t.attrChange=2,je.call(this,e),qe.call(this,t)},r=function(e,t){var n=Ze.call(this,e),r=n&&Be.call(this,e),o=new CustomEvent(Q,{bubbles:!0});Ge.call(this,e,t),o.attrName=e,o.prevValue=n?r:null,o.newValue=t,n?o.MODIFICATION=o.attrChange=1:o[X]=o.attrChange=0,qe.call(this,o)},o=function(e){var t,n=e.currentTarget,r=n[R],o=e.propertyName;r.hasOwnProperty(o)&&(r=r[o],(t=new CustomEvent(Q,{bubbles:!0})).attrName=r.name,t.prevValue=r.value||null,t.newValue=r.value=n[o]||null,null==t.prevValue?t[X]=t.attrChange=0:t.MODIFICATION=t.attrChange=1,qe.call(n,t))};e.value=function(e,l,a){e===Q&&this[B]&&this.setAttribute!==r&&(this[R]={className:{name:"class",value:this.className}},this.setAttribute=r,this.removeAttribute=n,t.call(this,"propertychange",o)),t.call(this,e,l,a)},me(Se,U,e)}()):Ie||(ae[U](Q,Qe),ae.setAttribute(R,1),ae.removeAttribute(R),tt&&(w=function(e){var t,n,r,o=this;if(o===e.target){for(r in t=o[R],o[R]=n=O(o),n){if(!(r in t))return A(0,o,r,t[r],n[r],X);if(n[r]!==t[r])return A(1,o,r,t[r],n[r],"MODIFICATION")}for(r in t)if(!(r in n))return A(2,o,r,t[r],n[r],$)}},A=function(e,t,n,r,o,l){var a={attrChange:e,currentTarget:t,attrName:n,prevValue:r,newValue:o};a[l]=e,i(a)},O=function(e){for(var t,n,r={},o=e.attributes,l=0,a=o.length;l$");if(n[q]="a",(t.prototype=Ne(Fe.prototype)).constructor=t,e.customElements.define(r,t,n),!o.test(g.createElement("a",{is:r}).outerHTML)||!o.test((new t).outerHTML))throw n}(function e(){return Reflect.construct(Fe,[],e)},{},"document-register-element-a"+P)}catch(e){H()}if(!t.noBuiltIn)try{if(ze.call(g,"a","a").outerHTML.indexOf("is")<0)throw{}}catch(e){Oe=function(e){return{is:e.toLowerCase()}}}}(window); \ No newline at end of file +/*! +* Start Bootstrap - One Page Wonder v6.0.4 (https://startbootstrap.com/theme/one-page-wonder) +* Copyright 2013-2021 Start Bootstrap +* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-one-page-wonder/blob/master/LICENSE) +*/ +// This file is intentionally blank +// Use this file to add JavaScript to your project \ No newline at end of file diff --git a/style.css b/style.css index a33d6ad..609fa4c 100644 --- a/style.css +++ b/style.css @@ -1873,14 +1873,24 @@ opacity: 1; justify-content: center; margin: auto; color: black; - top:20vh; + top:23vh; visibility: hidden; - font-size: 1.5rem; + font-size: 1.4rem; text-align: center; flex-direction: column; } +#four .scene2{ + max-width: 1100px; + margin: auto; + display: flex; + justify-content: center; + top: 150px; + margin-bottom: 100px; +} + #four .scene1 { + max-width: 1100px; background-color: white; height: 100vh; margin: 0; @@ -1892,6 +1902,20 @@ opacity: 1; min-width: 100%; } +#four .scene15 { + max-width: 1100px; + max-height: 700px; + background-color: white; + height: 100vh; + margin: 0; + overflow: hidden; + top: 100px; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + min-width: 100%; +} + #four .externalLinks { background-color: #f1f1f1; padding: 15px; @@ -1916,10 +1940,75 @@ opacity: 1; vertical-align: middle; } +#four #Systempt4{ + opacity: 0; +} +#four #Systempt3{ + opacity: 0; +} +#four #Systempt2{ + opacity: 0; +} + +#four #Purple{ + opacity: 0; +} + +#four #Combined{ + opacity: 0; +} + #four #SideLogos{ opacity: 0; } +#four #Data2{ + opacity: 0; +} + +#four #particles-js{ + width: 100%; + height: 100%; + opacity: 0.4; + background-size: cover; + background-position: 50% 50%; + position: absolute; + left: 0px; + top: 0px; + } + +#four .header{ + margin: auto; + padding: 40px; + padding-top:20%; + padding-bottom:20%; + margin: 0; + text-align: center; + color: white; + background: linear-gradient(270deg, #ff0037, #d4143e, #e5718a); + background-size: 600% 600%; + + -webkit-animation: AnimationName 30s ease infinite; + -moz-animation: AnimationName 30s ease infinite; + animation: AnimationName 30s ease infinite; +} + +@-webkit-keyframes AnimationName { + 0%{background-position:0% 50%} + 50%{background-position:100% 50%} + 100%{background-position:0% 50%} +} +@-moz-keyframes AnimationName { + 0%{background-position:0% 50%} + 50%{background-position:100% 50%} + 100%{background-position:0% 50%} +} +@keyframes AnimationName { + 0%{background-position:0% 50%} + 50%{background-position:100% 50%} + 100%{background-position:0% 50%} +} + #four #Locks{ opacity: 0; } @@ -1932,6 +2021,15 @@ opacity: 1; opacity: 0; } +#four #txt3{ + opacity: 0; +} + +#four #txt2{ + opacity: 0; +} + + #LogoLine1,#Line,#LogoLine2,#LogoLine3{ stroke:url(#gradient1); stroke-width: 5;