projectLogo = {
const text = await FileAttachment("InteractiveLogoLettering_IntearctiveLogo@2.svg").text();
const document = (new DOMParser).parseFromString(text, "image/svg+xml");
const svg = d3.select(document.documentElement).remove();
const lettering = svg.select('#lettering')
const _w = svg.attr('width')
const _h = svg.attr('height')
svg.attr('width',null).attr('height',null)
let data = Array.from( Array(amount), (x,i)=>({
id:i,
r:d3.randomUniform(size[0],size[1])(),
x:d3.randomUniform(0,_w)(),
y:d3.randomUniform(0,_h)(),
}) );
const elmCursor = svg.select('#cursor').node();
const cursor = {
id:"cursor",
r: parseFloat(elmCursor.getAttribute("r")),
fx: parseFloat(elmCursor.getAttribute("cx")),
fy: parseFloat(elmCursor.getAttribute("cy")),
show: true
};
data.push(cursor)
const g = svg.append('g').classed('circles',true);
let circle = g.selectAll('circle')
.data(data, d=>d.id)
.enter()
.append('circle')
.attr('id',d=>'id-'+d.id)
.attr('fill', 'gray')
.attr('r',d=>d.r);
const simulation=d3.forceSimulation(data)
//.force('charge', d3.forceManyBody().strength(0.02))
.force('collide', d3.forceCollide(d=>d.r+1).iterations(4))
.alpha(1)
.alphaMin(0.8)
.restart()
.on('tick',()=>{
console.log(simulation.alpha())
console.log(data[data.length-1])
circle.attr('cx',d=>{
d.x = d.x<0 ? 0 : (d.x>_w)? _w : d.x;
d.y = d.y<0 ? 0 : (d.y>_h)? _h : d.y;
return d.x;
})
circle.attr('cy',d=>d.y)
})
.on('end',()=>{
svg.style('background-color','rgba(81, 81, 252, .1)')
lettering.select('#keep').selectAll('*').each(function(){
isContained(this, circle);
})
lettering.select('#exclude').selectAll('*').each(function(){
isContained(this, circle, false);
})
data=data.filter(d=>d.show)
circle = circle.data(data, d=>d.id)
circle.exit().remove();
circle = circle.enter().append('circle')
.attr('id',d=>'id-'+d.id)
.attr('fill', 'gray')
.attr('r',d=>d.r)
.merge(circle)
.attr('fill','#5151fc');
// uncomment this to export a refined SVG
lettering.attr('display','none');
mutable dataLogo = data.map(d=>{
delete d.index;
delete d.vx;
delete d.vy;
delete d.show;
return d;
});
});
return svg.node();
}
import {rangeSlider} from '@mootari/range-slider'
Point2D = kld.Point2D
ShapeInfo = kld.ShapeInfo
Intersection = kld.Intersection
IntersectionQuery = kld.IntersectionQuery
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.
