Published
Edited
May 4, 2021
1 star
xMin = 0
yMax = d3.max(filteredData.map(d => d[Variable]))
yMin = Variable === "GC_skew" ? d3.min(filteredData.map(d => d[Variable])) : 0
line = d3
.line()
.x(d => x(d.window))
.y(d => y(d[Variable]))
line2 = d3
.line()
.x(d => x2(d.window))
.y(d => y2(d[Variable]))
y = d3
.scaleLinear()
.domain([yMin, yMax])
.range([height1, 0])
x = d3
.scaleLinear()
.domain([xMin, xMax])
.range([0, width])
x2 = d3
.scaleLinear()
.domain([xMin, xMax])
.range([0, width])
width
y2 = d3
.scaleLinear()
.domain([yMin, yMax])
.range([height2, 50])
xAxis = d3.axisBottom(x).tickFormat(x => `${x / 1000000}MB`)
yAxis = d3.axisLeft(y)
xAxis2 = d3.axisBottom(x2).tickFormat(x => `${x / 1000000}MB`)
yAxis2 = d3.axisLeft(y2)
margin = ({ top: 20, bottom: 120, left: 40, right: 20 })
margin1 = ({ top: 300, bottom: 40, left: 40, right: 20 })
height1 = 300
height2 = 80
filteredDataMA = {
let filteredDataMA = movingAverage(filteredData.map(d => d[Variable]), mavg); // maybe user can change input
for (let i = 0; i < filteredData.length; i++) {
filteredData[i].MA = filteredDataMA[i];
}
return filteredData;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
