Public
Edited
Dec 2, 2022
{
// set up
const margin2 = {top: 50, right: 120, bottom: 50, left: 120};
const visWidth2 = 400;
const visHeight2 = 400;
const svg = d3.create('svg')
.attr('width', visWidth2 + margin2.left + margin2.right)
.attr('height', visHeight2 + margin2.top + margin2.bottom);
const g = svg.append("g")
.attr("transform", `translate(${margin2.left}, ${margin2.top})`);
// add title
g.append("text")
.attr("x", visWidth2 / 2)
.attr("y", -margin2.top + 5)
.attr("text-anchor", "middle")
.attr("dominant-baseline", "hanging")
.attr("font-family", "sans-serif")
.attr("font-size", "16px")
.text("IMU Variance vs. User Distance Travelled");
// create scales
const x = d3.scaleLinear()
.domain(d3.extent(comboArr, d => d["Average_Distance_Whole_Recording"])).nice()
.range([0, visWidth2]);
const y = d3.scaleLinear()
.domain(d3.extent(comboArr, d => d[IMUsensor])).nice()
.range([visHeight2, 0]);
// create and add axes
const xAxis = d3.axisBottom(x);
g.append("g")
// move to bottom of chart
.attr("transform", `translate(0, ${visHeight2})`)
// add axis
.call(xAxis)
// remove baseline from axis
.call(g => g.select(".domain").remove())
// add grid lines
// refernces https://observablehq.com/@d3/connected-scatterplot
.call(g => g.selectAll('.tick line')
.clone()
.attr('stroke', '#d3d3d3')
.attr('y1', -visHeight2)
.attr('y2', 0))
// add title
.append("text")
.attr("x", visWidth2 / 2)
.attr("y", 40)
.attr("fill", "black")
.attr("text-anchor", "middle")
.text("Distance Travelled (m)");
const yAxis = d3.axisLeft(y);
g.append("g")
// add axis
.call(yAxis)
// remove baseline from axis
.call(g => g.select(".domain").remove())
// add grid lines
// refernces https://observablehq.com/@d3/connected-scatterplot
.call(g => g.selectAll('.tick line')
.clone()
.attr('stroke', '#d3d3d3')
.attr('x1', 0)
.attr('x2', visWidth2))
// add title
.append("text")
.attr("x", -40)
.attr("y", visHeight2 / 2)
.attr("fill", "black")
.attr("dominant-baseline", "middle")
.text("Avg Variance");
// draw points
g.append("g")
.selectAll("circle")
.data(comboArr.filter(d => selections.get(d.recipe_type)))
.join("circle")
.attr("cx", d => x(d["Average_Distance_Whole_Recording"]))
.attr("cy", d => y(d[IMUsensor]))
.attr("fill", d => recipeColor(d.recipe_type))
.attr("r", 3);
return svg.node();
}
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.
