{
const svg = d3.create("svg")
.attr("viewBox", wide ? [0, 0, width, height] : [0, 0, height, width])
.style("margin", "0 -14px")
.style("width", "calc(100% + 28px)")
svg.append("g")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.selectAll("path")
.data(contourscontours)
.enter().append("path")
.attr("stroke-width", (d, i) => i % 5 ? 0.25 : 1)
.attr("d", d3.geoPath());
svg.append("g")
.attr("stroke", "white")
.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r", 2);
return svg.node();
}
gridSliderValue = Generators.input(gridSlider)
g=gridSliderValue+1
ng=5
//gravPoint = Array.from({length: ng}, () => ({x: + Math.round(Math.random()* width/g)*g , y: +Math.round(Math.random()* height/g)*g }));
gravPoint=[
{x:800, y:30},
{x:250, y:250},
{x:50, y:500},
{x:500, y:900},
{x:400, y:150},
]
data = Array.from({length: n}, () => {
const gpi = Math.round(Math.random()* (ng-1))
const x = gravPoint[gpi].x + Math.log(Math.random())*400* (Math.random()-0.5 )//d3.randomNormal(1, 0.2) //(Math.random()-0.5)*100
const y = gravPoint[gpi].y +Math.log(Math.random())*400* (Math.random()-0.5 ) //+ d3.randomNormal(1, 0.2)//(Math.random()-0.5)*100
return({x: + x , y: y })
}
);
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.
