Published
Edited
Aug 21, 2019
{
const height = 600
const canvas = DOM.canvas(width, height)
var context = canvas.getContext("2d")
var IL = topojson.feature(us, us.objects.states).features[2]
var path = d3.geoPath().context(context)
// manually scale and translate
IL.geometry.coordinates[0][0] = IL.geometry.coordinates[0][0].map(d => {
return [(d[0]*4.340501577185316)-2127.3181992769573, (d[1]*4.340501577185316)-876.3608573210386]
})
// outline IL
context.beginPath()
context.strokeStyle = '#ccc'
path(IL)
context.stroke()
// complicate the lines so the spaces between the stripes aren't so large
var complicatedLine = []
IL.geometry.coordinates[0][0].map((o, i, a) => {
if(i == 0) { return }
complicateLine(5, a[i-1][0], a[i-1][1], o[0], o[1]).forEach((o) => { complicatedLine.push(o) })
})
// draw the intersection points
var cursor = [10, 0]
var intersections = []
for(var n = 0; n < 200; n++) {
cursor[1] = cursor[1] + yscale
var dest = [cursor[0]+width, cursor[1]]
complicatedLine.forEach((o, i, a) => {
if(i == 0) { return }
var res = intersects.lineLine(cursor[0], cursor[1], dest[0], dest[1], o[0], o[1], a[i-1][0], a[i-1][1])
if(res) {
context.beginPath()
context.strokeStyle = 'red'
context.moveTo(o[0], o[1])
context.lineTo(a[i-1][0], a[i-1][1])
context.stroke()
intersections.push([o[0], o[1]])
}
return res
})
}
// draw the stripes
context.beginPath()
context.strokeStyle = 'blue'
intersections.forEach((o, i, a) => {
if(i == 0) { context.moveTo(o[0], o[1]); return }
context.lineTo(o[0], o[1])
})
context.stroke()
// highlight the beginning and the end of the stripes
context.beginPath()
context.strokeStyle = 'green'
context.lineWidth = 2
context.arc(intersections[0][0], intersections[0][1], 5, 0, Math.PI * 2)
context.stroke()
context.beginPath()
context.strokeStyle = 'red'
context.lineWidth = 2
context.arc(intersections[intersections.length-1][0], intersections[intersections.length-1][1], 5, 0, Math.PI * 2)
context.stroke()
return canvas
}
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.
