Full Stack Software Engineer at Alteryx in Boston, MA
Published
Edited
Jul 28, 2019
Importers
f1 = (sy, sw, my, ey, ew, cl, w, h) => {
const xScale = d3.scaleLinear()
.domain([0, w])
.range([0, dims.width - dims.marginLeft - dims.marginRight])
const yScale = d3.scaleLinear()
.domain([0, h]).nice()
.range([dims.height - dims.marginTop - dims.marginBottom, 0])
const points = [
[0, sy],
[sw, sy],
[w/2, my],
[w - ew, ey],
[w, ey]
]
const p2 = points.map(([x,y]) => [xScale(x), yScale(y)])
console.log(p2)
function draw(points) {
const path = d3.path()
path.moveTo(points[0][0], points[0][1]);
path.lineTo(points[1][0], points[1][1]);
path.bezierCurveTo(
points[1][0] + cl,
points[1][1],
points[2][0] - cl,
points[2][1],
points[2][0],
points[2][1]);
path.bezierCurveTo(
points[2][0] + cl,
points[2][1],
points[3][0] - cl,
points[3][1],
points[3][0],
points[3][1]);
path.lineTo(points[4][0], points[4][1]);
return path
}
const svg = d3.select(DOM.svg(dims.width, dims.height))
.attr('style', `background-color: ${colors.palegray};`)
const canvas = svg
.append('g')
.attr('transform', `translate(${dims.marginLeft}, ${dims.marginTop})`)
const bounds = canvas.selectAll('line.guide')
.data(yScale.range())
.enter()
.append('line')
.attr('class', 'guide')
.attr("fill", "none")
.attr("stroke-width", "1.5px")
.attr("stroke", colors.gray)
.attr("x1", xScale.range()[0])
.attr("x2", xScale.range()[1])
.attr("y1", d => d)
.attr("y2", d => d)
var path = canvas.append("path")
.data([p2])
.attr("fill", "none")
.attr("stroke-width", "1.5px")
.attr("stroke", colors.blue)
.attr("d", draw)
console.log(xScale.domain())
const nSteps = 1000
svg.node().value = d3.range(nSteps).map(d => {
const xD = xScale.domain()[1] - xScale.domain()[0]
const x = d * xD/(nSteps - 1)
return {
x,
y: yScale.invert(path.node().getPointAtLength(d).y)
}
})
return svg.node()
}
viewof s1 = f1(0.3,10,1,0,10,80,30,1)
s1[999]
viewof s2 = f1(0,5,1,0.5,10,80,30,1)
f2()
f2 = (nPoints=5,w=10,h=10) => {
const xScale = d3.scaleLinear()
.domain([0, w])
.range([0, dims.width - dims.marginLeft - dims.marginRight])
const yScale = d3.scaleLinear()
.domain([0, h]).nice()
.range([dims.height - dims.marginTop - dims.marginBottom, 0])
const points = d3.range(nPoints).map(d => {
return [d*w/(nPoints-1), d3.randomUniform(0, w)()]
})
var line = d3.line()
.x(function(d) { return xScale(d[0]); })
.y(function(d) { return yScale(d[1]); })
.curve(d3.curveCatmullRom.alpha(0.5));
const svg = d3.select(DOM.svg(dims.width, dims.height))
.attr('style', `background-color: ${colors.palegray};`)
const canvas = svg
.append('g')
.attr('transform', `translate(${dims.marginLeft}, ${dims.marginTop})`)
const bounds = canvas.selectAll('line.guide')
.data(yScale.range())
.enter()
.append('line')
.attr('class', 'guide')
.attr("fill", "none")
.attr("stroke-width", "1.5px")
.attr("stroke", colors.gray)
.attr("x1", xScale.range()[0])
.attr("x2", xScale.range()[1])
.attr("y1", d => d)
.attr("y2", d => d)
var path = canvas.append("path")
.data([points])
.attr("fill", "none")
.attr("stroke-width", "1.5px")
.attr("stroke", colors.blue)
.attr("d", line)
const nSteps = 1000
svg.node().value = d3.range(nSteps).map(d => {
const xD = xScale.domain()[1] - xScale.domain()[0]
const x = d * xD/(nSteps - 1)
return {
x,
y: yScale.invert(path.node().getPointAtLength(d).y)
}
})
return svg.node()
}
s2[999]
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.
