{"version":3,"sources":["webpack:///./src/components/RandomSinWaveFun.vue?dce0","webpack:///src/components/RandomSinWaveFun.vue","webpack:///./src/components/RandomSinWaveFun.vue?925a","webpack:///./src/components/RandomSinWaveFun.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","staticStyle","_v","staticRenderFns","components","data","mounted","instantiateViz","scheduler","watch","plotData","updateViz","width","computed","window","innerWidth","i","max","x","push","delta","map","scales","methods","svg","setInterval","randomMultiplier","radioMultiplier","Math","random","d3","component","VCardText","VCard","VContainer"],"mappings":"kHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,cAAc,CAACE,YAAY,OAAOC,MAAM,CAAC,MAAQ,KAAK,CAACH,EAAG,MAAM,CAACI,YAAY,CAAC,QAAU,QAAQ,cAAc,OAAO,eAAe,QAAQD,MAAM,CAAC,GAAK,eAAeH,EAAG,cAAc,CAACI,YAAY,CAAC,cAAc,QAAQ,YAAY,UAAU,YAAY,QAAQ,aAAa,WAAW,CAACR,EAAIS,GAAG,2DAA2D,IAChcC,EAAkB,G,wBCgBtB,GACEC,WAAY,GACZC,KAAM,WAAR,OACA,uCACA,WAEA,oBACA,mBAEA,6BACA,kBACA,0BAEEC,QAbF,WAcIZ,KAAKa,iBACLb,KAAKc,aAEPC,MAAO,CACLC,SADJ,WAEMhB,KAAKiB,aAEPC,MAJJ,WAKMlB,KAAKiB,cAGTE,SAAU,CACRD,MADJ,WAEM,OAAOE,OAAOC,WAAa,IAE7BL,SAAU,WAAd,WACA,kBACA,gBACA,oDAEM,MAAOM,EAAItB,KAAKW,KAAKY,IACnBC,EAAEC,KAAKH,EAAII,GACXJ,GAAKI,EAGP,OAAOF,EAAEG,KAAI,SAAnB,UACA,IACA,2DAGIC,OAAQ,WACN,IAAN,WAEA,yDACA,sBACA,WAEA,0DACA,sBACM,MAAO,CAAb,WAGEC,QAAS,CACPhB,eAAgB,WAApB,WAEA,SACA,cACA,4DACA,8DACMiB,EACN,eACA,YACA,YACA,4DACA,8DACA,qBAIMA,EACN,mBACA,oBACA,QACA,eACA,sBAAQ,OAAR,mBACA,sBAAQ,OAAR,mBAGA,gBACA,oCAEA,KACA,OACA,OACA,kBACA,IACA,kBACA,IACA,kBACA,KAEA,sBAGIhB,UAAW,WACTiB,aAAa/B,KAAKiB,UAAWjB,KAAKgC,kBAAmB,MAEvDA,iBAAkB,WAChBhC,KAAKiC,gBAAkC,EAAhBC,KAAKC,SAAe,IAE7ClB,UAAW,WAAf,WAEMmB,EAAN,iBACA,oBACA,aACA,kCACA,sBAAQ,OAAR,mBACA,sBAAQ,OAAR,mBACA,oCAEA,KACA,OACA,OACA,kBACA,IACA,kBACA,IACA,kBACA,QC3I0V,I,yDCOtVC,EAAY,eACd,EACAvC,EACAW,GACA,EACA,KACA,KACA,MAIa,aAAA4B,EAAiB,QAMhC,IAAkBA,EAAW,CAACC,UAAAC,EAAA,KAAUC,aAAA","file":"js/SinWave.c2f0e76e.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('v-container',{staticClass:\"pa-0\",attrs:{\"fluid\":\"\"}},[_c('svg',{staticStyle:{\"display\":\"block\",\"margin-left\":\"auto\",\"margin-right\":\"auto\"},attrs:{\"id\":\"simpleViz\"}}),_c('v-card-text',{staticStyle:{\"padding-top\":\"300px\",\"font-size\":\"0.75rem\",\"max-width\":\"300pt\",\"text-align\":\"center\"}},[_vm._v(\" A soothing sin wave that changes every 1.3 seconds \")])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <v-container fluid class=\"pa-0\">\n    <svg\n      style=\"display: block; margin-left: auto; margin-right: auto;\"\n      id=\"simpleViz\"\n    />\n    <v-card-text\n      style=\"padding-top: 300px; font-size: 0.75rem; max-width: 300pt; text-align: center;\"\n    >\n      A soothing sin wave that changes every 1.3 seconds\n    </v-card-text>\n  </v-container>\n</template>\n\n<script>\nimport * as d3 from \"d3\";\n\nexport default {\n  components: {},\n  data: () => ({\n    margin: { top: 0, right: 0, bottom: 0, left: 0 },\n    height: 400,\n    // x data range:\n    data: { min: 0, max: 30 },\n    discretization: 300,\n    // axis:\n    domain: { x: [0, 30], y: [16, -30] },\n    radioMultiplier: 1,\n    transitionDuration: 1300,\n  }),\n  mounted() {\n    this.instantiateViz();\n    this.scheduler();\n  },\n  watch: {\n    plotData() {\n      this.updateViz();\n    },\n    width() {\n      this.updateViz();\n    },\n  },\n  computed: {\n    width() {\n      return window.innerWidth - 20;\n    },\n    plotData: function() {\n      let x = [this.data.min]; // instantiate X\n      let i = this.data.min;\n      let delta = (this.data.max - this.data.min) / this.discretization; // how I like to think about the x-delta\n      // generate the X data\n      while (i < this.data.max) {\n        x.push(i + delta);\n        i += delta;\n      }\n      // here make y a function of x\n      return x.map((e) => ({\n        x: e,\n        y: Math.sin(e * this.radioMultiplier) * (this.radioMultiplier + 1),\n      }));\n    },\n    scales: function() {\n      const x = d3\n        .scaleLinear()\n        .range([0, this.width - this.margin.right - this.margin.left]) //pixles\n        .domain(this.domain.x); // domains are hardcoded\n      const y = d3\n        .scaleLinear()\n        .range([0, this.height - this.margin.bottom - this.margin.top]) //pixles\n        .domain(this.domain.y);\n      return { x, y };\n    },\n  },\n  methods: {\n    instantiateViz: function() {\n      // make the svg:\n      let svg = d3\n        .select(\"#simpleViz\")\n        .attr(\"width\", this.width + this.margin.left + this.margin.right)\n        .attr(\"height\", this.height + this.margin.top + this.margin.bottom);\n      svg\n        .append(\"rect\")\n        .attr(\"x\", 0)\n        .attr(\"y\", 0)\n        .attr(\"width\", this.width + this.margin.left + this.margin.right)\n        .attr(\"height\", this.height + this.margin.top + this.margin.bottom)\n        .style(\"fill\", \"none\");\n\n      // ----- Bars ----\n      // bars are like points, because they use\n      svg\n        .selectAll(\"myBar\")\n        .data(this.plotData)\n        .enter()\n        .append(\"rect\")\n        .attr(\"x\", (e) => this.scales.x(e.x))\n        .attr(\"y\", (e) => this.scales.y(e.y))\n        // ^ THis is wack, and takes some getting used to; everything starts at the top, it's the delta in pixels between the top\n        //    and the 0 minus the bar\n        .attr(\"width\", 3)\n        .attr(\"height\", Math.random() * 200 + 20)\n        // putting in a random color in the bars for fun.\n        .attr(\n          \"fill\",\n          \"rgb(\" +\n            Math.random() * 255 +\n            \",\" +\n            Math.random() * 255 +\n            \",\" +\n            Math.random() * 255 +\n            \")\"\n        )\n        .attr(\"id\", \"theBars\");\n    },\n\n    scheduler: function() {\n      setInterval((this.updateViz, this.randomMultiplier), 2000);\n    },\n    randomMultiplier: function() {\n      this.radioMultiplier = Math.random() * 2 + 0.5;\n    },\n    updateViz: function() {\n      // ---- update the bars ----\n      d3.selectAll(\"#theBars\")\n        .data(this.plotData)\n        .transition()\n        .duration(this.transitionDuration)\n        .attr(\"x\", (e) => this.scales.x(e.x))\n        .attr(\"y\", (e) => this.scales.y(e.y))\n        .attr(\"height\", Math.random() * 200 + 20)\n        // putting in a random color in the bars for fun.\n        .attr(\n          \"fill\",\n          \"rgb(\" +\n            Math.random() * 255 +\n            \",\" +\n            Math.random() * 255 +\n            \",\" +\n            Math.random() * 255 +\n            \")\"\n        );\n    },\n  },\n};\n</script>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./RandomSinWaveFun.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./RandomSinWaveFun.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./RandomSinWaveFun.vue?vue&type=template&id=735a1bc3&\"\nimport script from \"./RandomSinWaveFun.vue?vue&type=script&lang=js&\"\nexport * from \"./RandomSinWaveFun.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VCardText } from 'vuetify/lib/components/VCard';\nimport { VContainer } from 'vuetify/lib/components/VGrid';\ninstallComponents(component, {VCardText,VContainer})\n"],"sourceRoot":""}