{
let hoehen = [100,50,75,150,100];
let svg = html`<svg width="800" height="200"></svg>`;
d3.select(svg).selectAll("rect")
.data(hoehen)
.join("rect")
.attr("x", (d,i) => 100 * i)
.attr("y","0")
.attr("width","100")
.attr("height", d => d)
.attr("stroke","black")
.attr("fill","#99FFFF");
return svg;
}
{
let svg = html`<svg width="810" height="310"></svg>`;
while(true) {
let n = Math.ceil(Math.random() * 8); // 1 bis 8 Rechtecke
let hoehen = Array.from({length: n}, () => Math.ceil(Math.random() * 12) * 25); // Zufällige Höhe in 25,50,...,300
d3.select(svg).selectAll("rect")
.data(hoehen)
.join("rect")
.attr("x", (d,i) => 100 * i)
.attr("y","0")
.attr("width","100")
.attr("height", d => d)
.attr("stroke","black")
.attr("fill","#99FFFF");
yield svg;
await Promises.tick(2500); // Warte 2,5 Sekunden
}
}
{
let svg = html`<svg width="800" height="300"></svg>`;
while(true) {
let n = Math.ceil(Math.random() * 8); // 1 bis 8 Rechtecke
let hoehen = Array.from({length: n}, () => Math.ceil(Math.random() * 12) * 25); // Zufällige Höhe in 25,50,...,300
d3.select(svg).selectAll("rect")
.data(hoehen)
.join(
enter => enter.append("rect")
.attr("fill","#FF9999"),
update => update
.attr("fill","#99FFFF")
)
.attr("x", (d,i) => 100 * i)
.attr("y","0")
.attr("width","100")
.attr("height", d => d)
.attr("stroke","black");
yield svg;
await Promises.tick(2500); // Warte 2,5 Sekunden
}
}
{
let svg = html`<svg></svg>`;
erstelle_spielfeld(d3.select(svg));
let g = d3.select(svg).append("g").attr("id","players");
// Farben
let colors = {'gk_1' : "#FFCCCC",
'pl_1' : "#FF7777",
'gk_2' : "#CCCCFF",
'pl_2' : "#7777FF",
'ball' : "#FFFFFF"}
let iter = 0;
while (true) {
g.selectAll("circle")
.data(iter == 0 ? spieler : spieler2)
.join("circle")
.attr("cx", d => d.x * pitchWidth)
.attr("cy", d => d.y * pitchHeight)
.attr("r", function(d) {
if (d.t == "ball")
return pitchWidth / 100;
return pitchWidth / 50;})
.attr("fill",d => colors[d.t])
.attr("stroke","black")
.attr("stroke-width",lineWidth/4);
iter = 1 - iter;
yield svg;
await Promises.tick(2500); // Warte 2,5 Sekunden
}
}
{
let svg = html`<svg width=300 height=300></svg>`;
let g = d3.select(svg).append("g").attr("id","punkte");
let point_data = []
while (true) {
if (point_data.length < 10) {
let x = Math.ceil(Math.random() * 300);
let y = Math.ceil(Math.random() * 300);
point_data.push({'x': x, 'y': y})
} else {
point_data = []
}
console.log(point_data);
g.selectAll("circle")
.data(point_data)
.join("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", 1)
.attr("stroke", "black")
.attr("stroke-width", 5);
yield svg;
await Promises.tick(2500); // Warte 2,5 Sekunden
}
}
md`Probieren wir's aus.`
dur = 1000;
{
let svg = html`<svg></svg>`;
erstelle_spielfeld(d3.select(svg));
let g = d3.select(svg).append("g").attr("id","players");
// Farben
let colors = {'gk_1' : "#FFCCCC",
'pl_1' : "#FF7777",
'gk_2' : "#CCCCFF",
'pl_2' : "#7777FF",
'ball' : "#FFFFFF"}
let iter = 0;
while (true) {
g.selectAll("circle")
.data(iter == 0 ? spieler : spieler2)
.join("circle")
.transition()
.duration(dur)
.attr("cx", d => d.x * pitchWidth)
.attr("cy", d => d.y * pitchHeight)
.attr("r",function(d) {
if (d.t == "ball")
return pitchWidth / 100;
return pitchWidth / 50;})
.attr("fill",d => colors[d.t])
.attr("stroke","black")
.attr("stroke-width",lineWidth/4);
iter = 1 - iter;
yield svg;
await Promises.tick(2500); // Warte 2,5 Sekunden
}
}
{
let svg = html`<svg width="800" height="300"></svg>`;
while(true) {
let n = Math.ceil(Math.random() * 8); // 1 bis 8 Rechtecke
let hoehen = Array.from({length: n}, () => Math.ceil(Math.random() * 12) * 25); // Zufällige Höhe in 25,50,...,300
d3.select(svg).selectAll("rect")
.data(hoehen)
.join(
enter => enter
.append("rect")
.attr("fill","#FF9999")
.transition()
.duration(dur)
.attr("height", d => d),
update => update
.transition()
.duration(dur)
.attr("fill","#99FFFF")
.attr("height", d => d),
exit => exit
.transition()
.duration(dur)
.attr("height",0)
.remove()
)
.attr("x", (d,i) => 100 * i)
.attr("y","0")
.attr("width","100")
.attr("stroke","black");
yield svg;
await Promises.tick(2500); // Warte 2,5 Sekunden
}
}
posY = d3.scaleLinear().domain([100, 0]).range([0, pitchHeight]);
import {Scrubber} from "@mbostock/scrubber"
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.
