Engineer on the Shiny team at RStudio. Biostats Ph.D. from Vanderbilt.
Published
Edited
Feb 14, 2018
viewof draw_plot = {
const svg = d3.select(DOM.svg(width, height));
let output;
// invisible draw target
const draw_target = svg.append('rect')
.attr('width', width)
.attr('height', height)
.attr('opacity', 0);
const x = d3.scaleLinear()
.domain([0,1])
.range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
.domain([0,1])
.range([height - margin.bottom, margin.top]);
// draw axes
// Add the x Axis
svg.append("g")
.attr("transform", "translate(0," + (height - margin.bottom)+ ")")
.call(d3.axisBottom(x));
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
const drawingSel = svg.append('path')
.attr('class', 'draw_line')
.style('fill', 'none')
.style('stroke', 'back')
.style('stroke-width', 3);
const line = d3.area()
.x(d => x(d.x))
.y(d => y(d.y));
const step_size = 0.01
const data = d3.range(0, 10, step_size)
.map(d => ({x:d, y:null, defined:0}));
const drag = d3.drag()
.on('drag', function(){
const pos = d3.mouse(this),
x_val = clamp(0, 1, x.invert(pos[0])),
y_val = clamp(0, 1, y.invert(pos[1]));
// I want to send the updated data to the viewof.
data.forEach(d => {
// find closest point to our x_val
if (Math.abs(d.x - x_val) < step_size/2){
d.y = y_val;
d.defined = true;
}
});
drawingSel.attr('d', line.defined(d => d.defined)(data));
//const to_return = svg.node()
//to_return.value = [];
//yield to_return
})
svg.call(drag);
const to_return = svg.node()
to_return.value = data;
return to_return
}
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.
