Skip to content

Commit

Permalink
found bugs w/ moving many plot elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@vvoutilainen
vvoutilainen committed Mar 17, 2020
1 parent ac78f7c commit 298dde6
Show file tree
Hide file tree
Showing 4 changed files with 266 additions and 26 deletions.
140 changes: 140 additions & 0 deletions bugs/bug_zoom1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- d3-->
<script src="https://d3js.org/d3.v5.js" charset="utf-8"></script>

<!-- Load data from json-->
<script src="../mwes/data/path_data_plotmwe.json" charset="utf-8"></script>

<!-- Math symbols PUT AS LAST IMPORT!-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_SVG">
</script>

</head>

<style>
</style>

<body>
<script type="module">

import {Canvas} from '../../src/functions/Canvas.js'
import {NQBGColors,NQColors,NQTextColors,NQFonts} from '../../src/variables/NQ_colors_and_fonts.js'
import {Svg} from '../src/classes/Svg.js'
import {Plot} from '../src/classes/Plot.js'
import {AddMathJax} from '../../src/functions/AddMathJax.js'

if (document.URL.includes('template_hh')){
window.currentTime = 0
performance.now = () => currentTime
}

let timing = 0

/*********************************
Auxiliaries
*********************************/
function pseudorandom(seed) {
// https://stackoverflow.com/a/19303725/7037299
//let seed = 1
let x = Math.sin(seed++) * 10000
return x - Math.floor(x)
}
function getRandomIntInclusive(dd, seed) {
let min = Math.ceil(dd[0])
let max = Math.floor(dd[1])
return Math.floor(pseudorandom(seed) * (max - min + 1)) + min //The maximum is inclusive and the minimum is inclusive
}
function CreateScatterData(d){
let scatterData = []
for (let i=1;i<=10;i++) {
scatterData.push({"x": getRandomIntInclusive(d.x, i), "y": getRandomIntInclusive(d.y, i), "color": NQColors.orange, "r": 10})
}
return scatterData
}

/*********************************
Define objects
*********************************/
// Backgorund svg
const svg = Canvas({})

let svg1params = {
"id" : "svg1"
,"pos" : [[150, 100]]
,"dim" : [2300, 1090]
,"strokeColor" : "red"
,"strokeWidth" : 3
}
let svg1 = new Svg(svg1params)
svg1.Draw({delay:0, duration:0})

// line plot
let params1 = {
"pos" : [[0,0]]
,"xRange" : [0,1400]
,"yRange" : [0,770]
,"yDomain" : [0,10]
,"xDomain" : [0,9]
,"id" : "plot1"
,"yLabel" : "$\\alpha + \\text{Time}$"
,"yLabelSize" : 30
,"xLabel" : "dd"
,"svgid" :"svg1"
}
let plot1 = new Plot(params1)
let lineDataParams1 = {
"data" : lineDataObject["y1"]
,"id" : "linedata1"
,"strokeWidth" : 3
,"strokeColor" : NQColors.orange
,"drawEase" : d3.easeCubic
}
let lineDataParams1_copy = {
"data" : lineDataObject["y1"]
,"id" : "linedata1_copy"
,"strokeWidth" : 3
,"strokeColor" : NQColors.yellow
,"drawEase" : d3.easeCubic
}

/*********************************
Animate
*********************************/
// Plot axes to svg1, plot line to axes
timing = timing + 1000
plot1.Draw({delay:timing, duration:300})
plot1.DrawLine({delay:timing+300, duration:500, lineParams:lineDataParams1})

// Zoom out svg1; etend x axis and adjust line accordingly
timing = timing + 1000
svg1.Update({
delay:timing,
duration:1000,
params:{
newScale : 0.7
}
})
let params1_a = {'xDomain': [0, 16], 'xRange': [0, 2300]}
plot1.MoveLine({delay:timing, duration:1000, lineParams:lineDataParams1, plotParams:params1_a})

// Adjusting x-axis now produces weird truncating effect for the line!
// Luckily works other way arund (if domain extended, not contracted)
timing = timing + 2000
let params1_b = {'xDomain': [0, 9]}
plot1.MoveLine({delay:timing, duration:5000, lineParams:lineDataParams1, plotParams:params1_b})

// Seems not to be xScale issue, as new line drawn on the axes comes out as it should
timing = timing + 6000
plot1.DrawLine({delay:timing, duration:10000, lineParams:lineDataParams1_copy})

// This needs to be added in conjunction with the import above!
AddMathJax(svg)

</script>

</body>
</html>
11 changes: 10 additions & 1 deletion mwes/mwe_plot.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,12 +257,21 @@

timing = timing + 2000
plot4.DrawLine({delay:timing, duration:1500, lineParams:lineDataParams2})
plot4.DrawLine({delay:timing, duration:1500, lineParams:lineDataParams3})
plot4.DrawLine({delay:timing, duration:1500, lineParams:lineDataParams3})

timing = timing + 2000
let newParams4_b = {'xDomain': [0, 25]}
plot4.MoveLine({delay:timing, duration:1500, lineParams:lineDataParams1, plotParams:newParams4_b})

// THESE DO NOT WORK!
//plot4.MoveLine({delay:timing, duration:1500, lineParams:lineDataParams2, plotParams:newParams4_b})
//plot4.MoveLine({delay:timing, duration:1500, lineParams:lineDataParams3, plotParams:newParams4_b})

timing = timing + 2000
plot4.HideObject({delay:timing, duration:500, id:"linedata1"})
timing = timing + 1000
plot4.Hide({delay:timing, duration :500})

//*/

// This needs to be added in conjunction with the import above!
Expand Down
111 changes: 95 additions & 16 deletions mwes/mwe_zooms.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,29 @@
}

let timing = 0


/*********************************
Auxiliaries
*********************************/
function pseudorandom(seed) {
// https://stackoverflow.com/a/19303725/7037299
//let seed = 1
let x = Math.sin(seed++) * 10000
return x - Math.floor(x)
}
function getRandomIntInclusive(dd, seed) {
let min = Math.ceil(dd[0])
let max = Math.floor(dd[1])
return Math.floor(pseudorandom(seed) * (max - min + 1)) + min //The maximum is inclusive and the minimum is inclusive
}
function CreateScatterData(d){
let scatterData = []
for (let i=1;i<=10;i++) {
scatterData.push({"x": getRandomIntInclusive(d.x, i), "y": getRandomIntInclusive(d.y, i), "color": NQColors.orange, "r": 10})
}
return scatterData
}

/*********************************
Define objects
*********************************/
Expand All @@ -45,7 +67,7 @@
,"pos" : [[150, 100]]
,"dim" : [2300, 1090]
,"strokeColor" : "red"
,"strokeWidth" : 0
,"strokeWidth" : 3
}
let svg1 = new Svg(svg1params)
svg1.Draw({delay:0, duration:0})
Expand All @@ -57,11 +79,11 @@
,"yRange" : [0,770]
,"yDomain" : [0,10]
,"xDomain" : [0,9]
,"id" : "plot4"
,"id" : "plot1"
,"yLabel" : "$\\alpha + \\text{Time}$"
,"yLabelSize" : 30
,"xLabel" : "dd"
,"svgid" :"svg1"
,"svgid" :"svg1"
}
let plot1 = new Plot(params1)
let lineDataParams1 = {
Expand All @@ -71,17 +93,46 @@
,"strokeColor" : NQColors.orange
,"drawEase" : d3.easeCubic
}
let lineDataParams2 = {
"data" : lineDataObject["y3"]
,"id" : "linedata2"
let lineDataParams1_copy = {
"data" : lineDataObject["y1"]
,"id" : "linedata1_copy"
,"strokeWidth" : 3
,"strokeColor" : NQColors.orange
,"strokeColor" : NQColors.yellow
,"drawEase" : d3.easeCubic
}
}
//let lineDataParams2 = {
// "data" : lineDataObject["y3"]
// ,"id" : "linedata2"
// ,"strokeWidth" : 3
// ,"strokeColor" : NQColors.orange
// ,"drawEase" : d3.easeCubic
//}

// Scatter plot
//let paramsScatter1 = {
// "data" : CreateScatterData({'x':[-10,10], 'y':[5,8]})
// ,"id" : "scatter1"
// ,"strokeWidth" : 4
//}
//let params2 = {
// "pos" : [[200,100]]
// ,"xRange" : [0,1400]
// ,"yRange" : [0,770]
// ,"yDomain" : [-5,15]
// ,"xDomain" : [-20,20]
// ,"id" : "plot2"
// ,"yLabel" : "$\\alpha + \\text{Time}$"
// ,"yLabelSize" : 30
// ,"xLabel" : "dd"
//}
//let plot2 = new Plot(params2)

/*********************************
Animate
Animate - Zoom out line chart and continue drawing the line
Notice that line is drawn on svg1 that originally extends
over background svg.
*********************************/

///*
// Plot axes to svg1, plot line to axes
timing = timing + 1000
plot1.Draw({delay:timing, duration:300})
Expand All @@ -96,12 +147,40 @@
newScale : 0.7
}
})
let newParams1 = {'xDomain': [0, 16], 'xRange': [0, 2300]}
plot1.MoveLine({delay:timing, duration:1000, lineParams:lineDataParams1, plotParams:newParams1})


let params1_a = {'xDomain': [0, 16], 'xRange': [0, 2300]}
plot1.MoveLine({delay:timing, duration:1000, lineParams:lineDataParams1, plotParams:params1_a})

// Continue line
timing = timing + 1000
plot1.DrawLine({delay:timing+700, duration:1500, lineParams:lineDataParams2})
//// Continue line
////timing = timing + 1000
////plot1.DrawLine({delay:timing+700, duration:1500, lineParams:lineDataParams2})
//
// Zoom so that both lines visible
timing = timing + 2000
let params1_b = {'xDomain': [0, 9]}
plot1.MoveLine({delay:timing, duration:5000, lineParams:lineDataParams1, plotParams:params1_b})

timing = timing + 6000
plot1.DrawLine({delay:timing, duration:10000, lineParams:lineDataParams1_copy})

//timing = timing + 200000
//svg1.Hide({delay:timing, duration:500})

//*/
/*********************************
Animate - Zoom in scatter chart
This works, but the elements on plot need to be redran again!
*********************************/
/*
timing = timing + 500
plot2.Draw({delay:timing, duration:300})
plot2.DrawScatter({delay:timing+500, duration:500, scatterParams:paramsScatter1})
timing = timing + 1500
let newAxisParams = {"yDomain": [3,9], "xDomain": [-11,11]}
plot2.MoveScatter({delay:timing, duration:1000, scatterParams:paramsScatter1, plotParams:newAxisParams})
//*/


// This needs to be added in conjunction with the import above!
Expand Down
Loading

0 comments on commit 298dde6

Please sign in to comment.