Public
Edited
Oct 3, 2023
viewof eyes = Inputs.range([2, 20], { label: "Eyes", step: 1 })
{
const svg = d3.create("svg").attr("height", height).attr("width", width); //crea una immagine svg 100px per 100px
let cx = width / 2;
let cy = height / 2;
svg
.append("circle") // crea un cerchio
.attr("cx", cx) // con centro in x 150
.attr("cy", cy) // e y 50
.attr("r", size / 2) // con raggio 50px
.attr("fill", "black"); // di colore rosso
//gambe destra
for (let i = 0; i < 4; i++) {
let giuntoX = size / 2 + 20 + i * 20 + Math.random() * 10;
let giuntoY = 0 + i * 10;
let points = [
[cx, cy],
[cx + giuntoX, cy - giuntoY],
[cx + giuntoX, height]
];
svg
.append("path")
.attr("d", d3.line()(points))
.attr("fill", "none")
.attr("stroke", "black");
svg
.append("path")
.attr("transform", `translate(${cx + giuntoX},${height})`)
.attr(
"d",
d3.arc()({
innerRadius: 0,
outerRadius: Math.random() * 5 + 5,
startAngle: -Math.PI / 2,
endAngle: Math.PI / 2
})
);
}
//gambe sinistra
for (let i = 0; i < 4; i++) {
let giuntoX = size / 2 + 20 + i * 20 + Math.random() * 10;
let giuntoY = 0 + i * 10;
let points = [
[cx, cy],
[cx - giuntoX, cy - giuntoY],
[cx - giuntoX, height]
];
svg
.append("path")
.attr("d", d3.line()(points))
.attr("fill", "none")
.attr("stroke", "black");
svg
.append("path")
.attr("transform", `translate(${cx - giuntoX},${height})`)
.attr(
"d",
d3.arc()({
innerRadius: 0,
outerRadius: Math.random() * 5 + 5,
startAngle: -Math.PI / 2,
endAngle: Math.PI / 2
})
);
}
//eyes
for (let i = 0; i < eyes; i++) {
let angle = Math.random() * Math.PI - Math.PI;
let distance = Math.random() * 0.3 + 0.5;
let eyeSize = Math.random() * 5 + 5;
let xPos = width / 2 + (Math.cos(angle) * size * distance) / 2;
let yPos = height / 2 + (Math.sin(angle) * size * distance) / 2;
let eye = svg.append("g");
eye
.append("circle")
.attr("cx", xPos)
.attr("cy", yPos)
.attr("r", eyeSize)
.attr("fill", "white");
eye
.append("circle")
.attr("cx", xPos)
.attr("cy", yPos)
.attr("r", eyeSize / 3)
.attr("fill", "red");
}
return svg.node(); // chiedi a Observable di renderizzare il risultato del codice
}
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.
