User:Jeremy/sandbox: Difference between revisions

From WikiMSK
No edit summary
No edit summary
 
(161 intermediate revisions by the same user not shown)
Line 1: Line 1:
==Timeline / lifeline== <!--T:29-->
<html>
<div class="example">
 
</div>
<script>
// how to use the funciton on line 94
// for questions email felix@demont.is


<graph>
var images10 = [
{
   "https://c1.staticflickr.com/5/4408/36911638800_7f554b122f_o.jpg",
   "width": 800,
   "https://c1.staticflickr.com/5/4345/36911638670_a1bbffc14c_o.jpg",
  "height": 200,
  "https://c1.staticflickr.com/5/4359/37166488521_67b51412f5_o.jpg",
   "data": [
  "https://c1.staticflickr.com/5/4375/36911638530_9a5f5f9299_o.jpg",
    {
  "https://c1.staticflickr.com/5/4417/36495726713_20521b5372_o.jpg",
      "name": "people",
  "https://c1.staticflickr.com/5/4376/36495726633_8b48fc83d3_o.jpg",
      "values": [
  "https://c1.staticflickr.com/5/4343/36495726613_4f8310a864_o.jpg",
        {"label":"Washington", "born":-7506057600000, "died":-5366196000000,  
  "https://c1.staticflickr.com/5/4425/36495726553_8fd2411a7f_o.jpg",
        "enter":-5701424400000, "leave":-5453884800000},
  "https://c1.staticflickr.com/5/4394/36495726443_cb6f6b0d9b_o.jpg",
        {"label":"Adams",      "born":-7389766800000, "died":-4528285200000,  
  "https://c1.staticflickr.com/5/4348/36911638180_551e1c2257_o.jpg"
        "enter":-5453884800000, "leave":-5327740800000},
];
        {"label":"Jefferson",  "born":-7154586000000, "died":-4528285200000,  
        "enter":-5327740800000, "leave":-5075280000000},
        {"label":"Madison",    "born":-6904544400000, "died":-4213184400000,
        "enter":-5075280000000, "leave":-4822819200000},
        {"label":"Monroe",    "born":-6679904400000, "died":-4370518800000,
        "enter":-4822819200000, "leave":-4570358400000}
      ]
    },
    {
      "name": "events",
      "format": {"type":"json", "parse":{"when":"date"}},
      "values": [
        {"name":"Decl. of Independence", "when":"July 4, 1776"},
        {"name":"U.S. Constitution",    "when":"3/4/1789"},
        {"name":"Louisiana Purchase",    "when":"April 30, 1803"},
        {"name":"Monroe Doctrine",      "when":"Dec 2, 1823"}
      ]
    }


  ],
var images19 = [
   "scales": [
   "https://wikimsk.org/w/img_auth.php/b/b7/MRI_T2_Lumbar_Spine_L1_Transpedicular_Axial.jpg",
    {
  "https://wikimsk.org/w/img_auth.php/thumb/b/bb/MRI_T2_Lumbar_Spine_L1_Subpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L1_Subpedicular_Axial.jpg",
      "name": "y",
  "https://wikimsk.org/w/img_auth.php/thumb/f/f9/MRI_T2_Lumbar_Spine_L1-L2_Transarticular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L1-L2_Transarticular_Axial.jpg",
      "type": "ordinal",
"https://wikimsk.org/w/img_auth.php/thumb/b/be/MRI_T2_Lumbar_Spine_L2_Transpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L2_Transpedicular_Axial.jpg",
      "range": "height",
"https://wikimsk.org/w/img_auth.php/thumb/f/f1/MRI_T2_Lumbar_Spine_L2_Subpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L2_Subpedicular_Axial.jpg",
      "domain": {"data": "people", "field": "label"}
"https://wikimsk.org/w/img_auth.php/thumb/4/40/MRI_T2_Lumbar_Spine_L2-L3_Transarticular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L2-L3_Transarticular_Axial.jpg",
    },
"https://wikimsk.org/w/img_auth.php/thumb/2/27/MRI_T2_Lumbar_Spine_L3_Transpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L3_Transpedicular_Axial.jpg",
    {
"https://wikimsk.org/w/img_auth.php/thumb/e/e9/MRI_T2_Lumbar_Spine_L3_Subpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L3_Subpedicular_Axial.jpg",
      "name": "x",
"https://wikimsk.org/w/img_auth.php/thumb/0/00/MRI_T2_Lumbar_Spine_L3-L4_Transarticular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L3-L4_Transarticular_Axial.jpg",
      "type": "time",
"https://wikimsk.org/w/img_auth.php/thumb/c/cc/MRI_T2_Lumbar_Spine_L4_Transpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L4_Transpedicular_Axial.jpg",
      "range": "width",
"https://wikimsk.org/w/img_auth.php/thumb/5/59/MRI_T2_Lumbar_Spine_L4_Subpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L4_Subpedicular_Axial.jpg",
      "round": true,
"https://wikimsk.org/w/img_auth.php/thumb/4/49/MRI_T2_Lumbar_Spine_L4-L5_Transarticular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L4-L5_Transarticular_Axial.jpg",
      "nice": "year",
"https://wikimsk.org/w/img_auth.php/thumb/a/ab/MRI_T2_Lumbar_Spine_L5_Transpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L5_Transpedicular_Axial.jpg",
      "domain": {"data": "people", "field": ["born", "died"]}
"https://wikimsk.org/w/img_auth.php/thumb/1/13/MRI_T2_Lumbar_Spine_L5_Subpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L5_Subpedicular_Axial.jpg",
     }
"https://wikimsk.org/w/img_auth.php/thumb/9/94/MRI_T2_Lumbar_Spine_L5-S1_Transarticular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L5-S1_Transarticular_Axial.jpg"
   ],
];
   "axes": [
 
    {
images = images10;
      "type": "x",
images2 = images19;
      "scale": "x",
 
      "properties": {"labels": {"fontSize": {"value": 18}}}
function ImageStack (options) {
    }
 
   ],
  var self = this;
   "marks": [
      
     {
   self.img_array = options.images;
      "type": "text",
 
      "from": {"data": "events"},
  self.stack = document.createElement('div');
      "properties": {
  self.stack.style.overflow = 'auto';
        "enter": {
  self.stack.style.maxWidth = '100%';
          "x": {"scale": "x", "field": "when"},
   self.stack.style.height = options.height;
          "y": {"value": -10},
  self.stack.style.width = options.width;
          "angle": {"value": -25},
  self.stack.style.backgroundSize = 'cover'
          "fill": {"value": "#000"},
  self.stack.style.position = 'relative';
          "text": {"field": "name"},
 
          "font": {"value": "Helvetica Neue"},
  var typeRegex = /(\D+)/
          "fontSize": {"value": 20}
   var sizeType = options.height.match(typeRegex)[0]
        }
    
      }
  var numberRegex = /(\d+)/
     },
  self.height_number = Number( options.height.match(numberRegex)[0] )
     {
      
      "type": "rect",
  self.wrapper = document.createElement('div');
      "from": {"data": "events"},
 
      "properties": {
  for (var i = 0; i < self.img_array.length; i++) {
        "enter": {
   
          "x": {"scale": "x", "field": "when"},
    var image = document.createElement('img');
          "y": {"value": -8},
    image.src = self.img_array[i];
          "width": {"value": 1},
   
          "height": {"field": {"group": "height"}, "offset": 8},
    image.style.display = 'none';
          "fill": {"value": "#888"}
    image.style.position = 'absolute';
        }
    image.style.width = options.width;
      }
    image.style.height = options.height;
     },
    image.style.top = 0;
     {
    image.style.left = 0;
      "type": "text",
    image.dataset.iid = i;
      "from": {"data": "people"},
   
      "properties": {
    self.wrapper.appendChild(image);
        "enter": {
      
          "x": {"scale": "x", "field": "born"},
  }
          "y": {"scale": "y", "field": "label", "offset": -3},
      
          "fill": {"value": "#000"},
  self.image_elements = self.wrapper.querySelectorAll('img');
          "text": {"field": "label"},
 
          "font": {"value": "Helvetica Neue"},
  self.scrollobject = document.createElement('div');
          "fontSize": {"value": 20}
  self.scrollobject.style.width = '100%';
        }
  self.scrollobject.style.position = 'absolute';
      }
  self.scrollobject.style.zIndex = '2';
     },
  if (self.img_array.length > 15){
     {
  self.img_count = self.img_array.length;
      "type": "rect",
  } else {
      "from": {"data": "people"},
  self.img_count = 15;
       "properties": {
  }
        "enter": {
  self.scrollobject_height = Math.floor( 0.1 * self.img_count * self.height_number );
          "x": {"scale": "x", "field": "born"},
 
          "x2": {"scale": "x", "field": "died"},
  self.scrollobject.style.height = self.scrollobject_height + sizeType;
          "y": {"scale": "y", "field": "label"},
 
          "height": {"value": 2},
  self.scrollUpdate = function (e) {
          "fill": {"value": "#557"}
   
        }
    self.height_number = self.stack.getBoundingClientRect().height
      }
    self.scrollobject_height = Math.floor( 0.1 * self.img_count * self.height_number );
    },
   
    {
    var sT = self.stack.scrollTop
      "type": "rect",
    var hn05 = self.img_array.length - 1
      "from": {"data": "people"},
    var hh = (self.scrollobject_height - self.height_number) / hn05
      "properties": {
    scrollval = Math.floor(sT / (hh))
        "enter": {
   
          "x": {"scale": "x", "field": "enter"},
    self.currentimg = self.image_elements[scrollval].src
          "x2": {"scale": "x", "field": "leave"},
      
          "y": {"scale": "y", "field": "label", "offset":-1},
     self.stack.style.backgroundImage = 'url(' + self.currentimg + ')';
          "height": {"value": 4},
   
          "fill": {"value": "#e44"}
  }
        }
 
      }
  self.stack.addEventListener('scroll', self.scrollUpdate);
    }
 
  ]
  self.currentimg = self.image_elements[0].src
}</graph>
  self.stack.style.backgroundImage = 'url(' + self.currentimg + ')';
 
  /*
 
  window.addEventListener('resize', function () {
    var stackRect = self.stack.getBoundingClientRect()
   
    console.log(stackRect)
   
    self.height_number = stackRect.height
    self.scrollobject_height = Math.floor( 0.1 * self.img_array.length * self.height_number );
      
     self.stack.style.width = stackRect.width + 'px'
    self.stack.style.eight = stackRect.width + 'px'
  })
 
  */
        
  self.stack.appendChild(self.wrapper);
  self.stack.appendChild(self.scrollobject);
 
  return self.stack;
 
}
 
/*
 
The function ImageStack returns a Element Node, which can be appended to an already existing element or modified, however someone wants to change it.
 
The parameters should have to be a height of the element, the width of the elment, and a list (Array) to all the images.
 
*/
 
var stack = new ImageStack({
  images: images2,
  height: '350px',
  width: '350px'
});
 
var stack2 = new ImageStack({
  images: images,
  height: '30rem',
  width: '30rem'
});
 
// append the stack to the .example element
 
document.querySelector('.example').appendChild(stack);
document.querySelector('.example').appendChild(stack2);
</script>
</html>

Latest revision as of 22:17, 24 October 2022

Retrieved from ‘https://wikimsk.org/w/index.php?title=User:Jeremy/sandbox&oldid=19494’