src/utilityfunctions/determineSIR.js
// a function to change the perpendicular person SVG depending on SIR state:
a function to change the perpendicular person SVG depending on SIR state.
a function to change the perpendicular person SVG depending on SIR state .
function determineSIRPerp(from, sirState){
    if (from === "mod2"){
      let susBody = d3.select("#wgSusBody").attr('d'),
          infBody = d3.select("#wgInfBody").attr('d'),
          baseBody = d3.select("#wgBaseBody").attr('d');
      let susFace = d3.select("#wgSusFace").attr('d'),
          infFace = d3.select("#wgInfFace").attr('d'),
          baseFace = d3.select("#wgBaseFace").attr('d');
      let susHair = d3.select("#wgSusHair").attr('d'),
          infHair = d3.select("#wgInfHair").attr('d'),
          baseHair = d3.select("#wgBaseHair").attr('d');
      let susMouth = d3.select("#wgSusMouth").attr('d'),
          infMouth = d3.select("#wgInfMouth").attr("d"),
          baseMouth = d3.select("#wgBaseMouth").attr('d');
      let susRArmUpper = d3.select("#wgSusRArmUpper").attr('d'),
          infRArmUpper = d3.select("#wgInfRArmUpper").attr("d"),
          baseRArmUpper = d3.select("#wgBaseRArmUpper").attr('d');
      let susRArmLower = d3.select("#wgSusRArmLower").attr('d'),
          infRArmLower = d3.select("#wgInfRArmLower").attr("d"),
          baseRArmLower = d3.select("#wgBaseRArmLower").attr('d');
      let susLArmUpper = d3.select("#wgSusLArmUpper").attr('d'),
          infLArmUpper = d3.select("#wgInfLArmUpper").attr("d"),
          baseLArmUpper = d3.select("#wgBaseLArmUpper").attr('d');
      let susLArmLower = d3.select("#wgSusLArmLower").attr('d'),
          infLArmLower = d3.select("#wgInfLArmLower").attr("d"),
          baseLArmLower = d3.select("#wgBaseLArmLower").attr('d');
      let t = d3.transition()
              .duration(400)
              .ease(d3.easeCircleOut)
      let t2 = d3.transition()
                .duration(200)
                .ease(d3.easeLinear)
      let lightnings = d3.select("#wglightning")
      lightnings.style("opacity", 0)
      if (sirState === "infectious"){
          toInf()
          lightnings.transition(t2).style("opacity", 1)   
      }
      else if (sirState === "recovered"){
          lightnings.transition(t2).style("opacity", 0)
          toSus() 
      } else {
          lightnings.transition(t2).style("opacity", 0)
          toSus()
      }
    function toInf(){
        d3.select("#wgBaseFace")
          .transition(t)
          .attrTween("d", () => {
            return interpolate(baseFace, infFace)})
        d3.select("#wgBaseBody")
          .transition(t)
          .attrTween("d", () => {
            return interpolate(baseBody, infBody)})
        d3.select("#wgBaseHair")
          .transition(t)
          .attrTween("d", () => {
            return interpolate(baseHair, infHair)})
        d3.select("#wgBaseMouth")
          .transition(t)
          .attrTween("d", () => {
            return interpolate(baseMouth, infMouth)})
        d3.select("#wgBaseRArmUpper")
          .transition(t)
          .attrTween("d", () => {
            return interpolate(baseRArmUpper, infRArmUpper)}) 
        d3.select("#wgBaseRArmLower")
          .transition(t)
          .attrTween("d", () => {
            return interpolate(baseRArmLower, infRArmLower)})
        d3.select("#wgBaseLArmUpper")
          .transition(t)
          .attrTween("d", () => {
            return interpolate(baseLArmUpper, infLArmUpper)}) 
        d3.select("#wgBaseLArmLower")
        .raise()
          .transition(t)
          .attrTween("d", () => {
            return interpolate(baseLArmLower, infLArmLower)})      
  }
  function toSus(){
      d3.select("#wgBaseFace")
        .transition(t)
        .attrTween("d", () => {
          return interpolate(baseFace, susFace)})
      d3.select("#wgBaseBody")
        .transition(t)
        .attrTween("d", () => {
          return interpolate(baseBody, susBody)})
      d3.select("#wgBaseHair")
        .transition(t)
        .attrTween("d", () => {
          return interpolate(baseHair, susHair)})
      d3.select("#wgBaseMouth")
        .transition(t)
        .attrTween("d", () => {
          return interpolate(baseMouth, susMouth)})
      d3.select("#wgBaseRArmUpper")
        .transition(t)
        .attrTween("d", () => {
          return interpolate(baseRArmUpper, susRArmUpper)}) 
      d3.select("#wgBaseRArmLower")
        .transition(t)
        .attrTween("d", () => {
          return interpolate(baseRArmLower, susRArmLower)})
      d3.select("#wgBaseLArmUpper")
        .transition(t)
        .attrTween("d", () => {
          return interpolate(baseLArmUpper, susLArmUpper)}) 
      d3.select("#wgBaseLArmLower")
      .lower()
        .transition(t)
        .attrTween("d", () => {
          return interpolate(baseLArmLower,susLArmLower)})       
  }
    } else {
      return
    }
}
function determineSIRPerp ( from , sirState ) { if ( from === "mod2" ) { let susBody = d3 . select ( "#wgSusBody" ) . attr ( 'd' ) , infBody = d3 . select ( "#wgInfBody" ) . attr ( 'd' ) , baseBody = d3 . select ( "#wgBaseBody" ) . attr ( 'd' ) ; let susFace = d3 . select ( "#wgSusFace" ) . attr ( 'd' ) , infFace = d3 . select ( "#wgInfFace" ) . attr ( 'd' ) , baseFace = d3 . select ( "#wgBaseFace" ) . attr ( 'd' ) ; let susHair = d3 . select ( "#wgSusHair" ) . attr ( 'd' ) , infHair = d3 . select ( "#wgInfHair" ) . attr ( 'd' ) , baseHair = d3 . select ( "#wgBaseHair" ) . attr ( 'd' ) ; let susMouth = d3 . select ( "#wgSusMouth" ) . attr ( 'd' ) , infMouth = d3 . select ( "#wgInfMouth" ) . attr ( "d" ) , baseMouth = d3 . select ( "#wgBaseMouth" ) . attr ( 'd' ) ; let susRArmUpper = d3 . select ( "#wgSusRArmUpper" ) . attr ( 'd' ) , infRArmUpper = d3 . select ( "#wgInfRArmUpper" ) . attr ( "d" ) , baseRArmUpper = d3 . select ( "#wgBaseRArmUpper" ) . attr ( 'd' ) ; let susRArmLower = d3 . select ( "#wgSusRArmLower" ) . attr ( 'd' ) , infRArmLower = d3 . select ( "#wgInfRArmLower" ) . attr ( "d" ) , baseRArmLower = d3 . select ( "#wgBaseRArmLower" ) . attr ( 'd' ) ; let susLArmUpper = d3 . select ( "#wgSusLArmUpper" ) . attr ( 'd' ) , infLArmUpper = d3 . select ( "#wgInfLArmUpper" ) . attr ( "d" ) , baseLArmUpper = d3 . select ( "#wgBaseLArmUpper" ) . attr ( 'd' ) ; let susLArmLower = d3 . select ( "#wgSusLArmLower" ) . attr ( 'd' ) , infLArmLower = d3 . select ( "#wgInfLArmLower" ) . attr ( "d" ) , baseLArmLower = d3 . select ( "#wgBaseLArmLower" ) . attr ( 'd' ) ; let t = d3 . transition ( ) . duration ( 400 ) . ease ( d3 . easeCircleOut ) let t2 = d3 . transition ( ) . duration ( 200 ) . ease ( d3 . easeLinear ) let lightnings = d3 . select ( "#wglightning" ) lightnings . style ( "opacity" , 0 ) if ( sirState === "infectious" ) { toInf ( ) lightnings . transition ( t2 ) . style ( "opacity" , 1 ) } else if ( sirState === "recovered" ) { lightnings . transition ( t2 ) . style ( "opacity" , 0 ) toSus ( ) } else { lightnings . transition ( t2 ) . style ( "opacity" , 0 ) toSus ( ) } function toInf ( ) { d3 . select ( "#wgBaseFace" ) . transition ( t ) . attrTween ( "d" , ( ) => { return interpolate ( baseFace , infFace ) } ) d3 . select ( "#wgBaseBody" ) . transition ( t ) . attrTween ( "d" , ( ) => { return interpolate ( baseBody , infBody ) } ) d3 . select ( "#wgBaseHair" ) . transition ( t ) . attrTween ( "d" , ( ) => { return interpolate ( baseHair , infHair ) } ) d3 . select ( "#wgBaseMouth" ) . transition ( t ) . attrTween ( "d" , ( ) => { return interpolate ( baseMouth , infMouth ) } ) d3 . select ( "#wgBaseRArmUpper" ) . transition ( t ) . attrTween ( "d" , ( ) => { return interpolate ( baseRArmUpper , infRArmUpper ) } ) d3 . select ( "#wgBaseRArmLower" ) . transition ( t ) . attrTween ( "d" , ( ) => { return interpolate ( baseRArmLower , infRArmLower ) } ) d3 . select ( "#wgBaseLArmUpper" ) . transition ( t ) . attrTween ( "d" , ( ) => { return interpolate ( baseLArmUpper , infLArmUpper ) } ) d3 . select ( "#wgBaseLArmLower" ) . raise ( ) . transition ( t ) . attrTween ( "d" , ( ) => { return interpolate ( baseLArmLower , infLArmLower ) } ) } function toSus ( ) { d3 . select ( "#wgBaseFace" ) . transition ( t ) . attrTween ( "d" , ( ) => { return interpolate ( baseFace , susFace ) } ) d3 . select ( "#wgBaseBody" ) . transition ( t ) . attrTween ( "d" , ( ) => { return interpolate ( baseBody , susBody ) } ) d3 . select ( "#wgBaseHair" ) . transition ( t ) . attrTween ( "d" , ( ) => { return interpolate ( baseHair , susHair ) } ) d3 . select ( "#wgBaseMouth" ) . transition ( t ) . attrTween ( "d" , ( ) => { return interpolate ( baseMouth , susMouth ) } ) d3 . select ( "#wgBaseRArmUpper" ) . transition ( t ) . attrTween ( "d" , ( ) => { return interpolate ( baseRArmUpper , susRArmUpper ) } ) d3 . select ( "#wgBaseRArmLower" ) . transition ( t ) . attrTween ( "d" , ( ) => { return interpolate ( baseRArmLower , susRArmLower ) } ) d3 . select ( "#wgBaseLArmUpper" ) . transition ( t ) . attrTween ( "d" , ( ) => { return interpolate ( baseLArmUpper , susLArmUpper ) } ) d3 . select ( "#wgBaseLArmLower" ) . lower ( ) . transition ( t ) . attrTween ( "d" , ( ) => { return interpolate ( baseLArmLower , susLArmLower ) } ) } } else { return } }
a function to change the perpendicular person SVG depending on SIR state:
a function to change the perpendicular person SVG depending on SIR state :
// find the correct body parts: // recBody = d3.select("#wgRecBody").attr('d'), // recFace = d3.select("#wgRecFace").attr('d'), // recHair = d3.select("#wgRecHair").attr('d'), // recMouth = d3.select("#wgRecMouth").attr('d'), // recRArmUpper = d3.select("#wgRecRArmUpper").attr('d'), // recRArmLower = d3.select("#wgRecRArmLower").attr('d'), // recLArmUpper = d3.select("#wgRecLArmUpper").attr('d'), // recLArmLower = d3.select("#wgRecLArmLower").attr('d'), // transitions: this one is a slower one with circle-based velocity // this one is shorter and moves with linear velocity // lightnings. make sure they aren't visible by turning off the opacity // conditional loops to toggle SIR state AND lightning visibility // toRec() //<- temporary // individual functions to interpolate and  // transition between different SVGs: // function toRec(){ //     // console.log("toRec") //       d3.select("#wgBaseFace") //         .transition(t) //         .attrTween("d", () => { //           return interpolate(baseFace, recFace)}) //       d3.select("#wgBaseBody") //         .transition(t) //         .attrTween("d", () => { //           return interpolate(baseBody, recBody)}) //       d3.select("#wgBaseHair") //         .transition(t) //         .attrTween("d", () => { //           return interpolate(baseHair, recHair)}) //       d3.select("#wgBaseMouth") //         .transition(t) //         .attrTween("d", () => { //           return interpolate(baseMouth, recMouth)})  //       d3.select("#wgBaseRArmUpper") //         .transition(t) //         .attrTween("d", () => { //           return interpolate(baseRArmUpper, recRArmUpper)})  //       d3.select("#wgBaseRArmLower") //         .transition(t) //         .attrTween("d", () => { //           return interpolate(baseRArmLower, recRArmLower)}) //       d3.select("#wgBaseLArmUpper") //         .transition(t) //         .attrTween("d", () => { //           return interpolate(baseLArmUpper, recLArmUpper)})  //       d3.select("#wgBaseLArmLower") //       .lower() //         .transition(t) //         .attrTween("d", () => { //           return interpolate(baseLArmLower, recLArmLower)})                                   // } // console.log("toInf") // console.log("toSus")