Published
Edited
May 6, 2021
example = {
var svg = d3.select(DOM.svg(width, height)).attr("id", "mysvg")
const bac = svg
.selectAll('path')
.data([{shapePath: bacillus}])
.enter()
.append('path')
.attr('d', d => d.shapePath)
.attr('stroke', 'black')
.attr('stroke-width', '5')
.attr('fill', 'lightgray')
.attr('transform', (d, i) => `translate(${(i % 10) * 50 + 80},${Math.floor(i / 10) * 60 + 170})`)
.attr('id', 'bac')
// TODO convert this to join syntax cuz wut
const circles = svg.selectAll('circle')
.data([
{x: 100, y: 200, id: 1}, // in
{x: 30, y: 200, id: 2} // out
])
.enter()
.append('circle')
.attr('r', 10)
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('id', d => d.id)
return svg.node()
}
path = document.getElementById('bac')
point = document.getElementById("mysvg").createSVGPoint();
point.y = 200;
point.x = 100;
// this should totally be true
path.isPointInFill(point)
md `## Okay now that that works.... given a path, can we randomly put a circle INSIDE the path?`
example2 = {
var svg = d3.select(DOM.svg(width, height)).attr("id", "mysvg")
const bac = svg
.selectAll('path')
.data([{shapePath: bacillus}])
.enter()
.append('path')
.attr('d', d => d.shapePath)
.attr('stroke', 'black')
.attr('stroke-width', '5')
.attr('fill', 'lightgray')
.attr('transform', (d, i) => `translate(${(i % 10) * 50 + 80},${Math.floor(i / 10) * 60 + 170})`)
.attr('id', 'bac')
// give these two circles an x and y we know will be inside our path
const circles = svg.selectAll('circle')
.data([
{id: 1}, // in
{id: 2} // out
])
.enter()
.append('circle')
//.attr('cx', d => d.x)
//.attr('cy', d => d.y)
//.attr('id', d => d.id)
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.
