The avatar for @phkindermann
Philipp Kindermann
Public
Werkzeuge der Informatik: Datenvisualisierung mit D3.js
Edited
Jan 30, 2024
Fork of Teil 2: Erstellen von SVGs mit D3.js (mit Lösungen)
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html`<svg width="96" height="93">
<path d="M0,0h7.75a45.5,45.5 0 1 1 0,91h-7.75v-20h7.75a25.5,25.5 0 1 0 0,-51h-7.75zm36.2510,0h32a27.75,27.75 0 0 1 21.331,45.5a27.75,27.75 0 0 1 -21.331,45.5h-32a53.6895,53.6895 0 0 0 18.7464,-20h13.2526a7.75,7.75 0 1 0 0,-15.5h-7.75a53.6895,53.6895 0 0 0 0,-20h7.75a7.75,7.75 0 1 0 0,-15.5h-13.2526a53.6895,53.6895 0 0 0 -18.7464,-20z"></path>
</svg>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html`<svg id="container-1" width="450" height="200" style="border:1px solid black">
</svg>`
Insert cell
Insert cell
{
// Wähle SVG Container aus
let svg = d3.select("#container-1");
// Füge Rechteck hinzu
svg.append("rect")
.attr("x","50")
.attr("y","50")
.attr("id","rect1")
.attr("width","100")
.attr("height","100")
.attr("stroke","blue")
.attr("fill","none");
}
Insert cell
Insert cell
Insert cell
{
// Wähle SVG Container aus
let svg = d3.select("#container-1");
// Wähle Rechteck aus
let rect = svg.select("rect");
// Alternativ: let rect = d3.select("#container-1").select("rect")
// Ändere Breite
rect.attr("width","150");
}
Insert cell
Insert cell
Insert cell
{
// Füge Rechteck hinzu
let rect2 = d3.select("#container-1").append("rect")
.attr("x","250")
.attr("y","50")
.attr("id","rect2")
.attr("width","100")
.attr("height","100")
.attr("stroke","black")
.attr("fill","none");
// Ändere Füllfarbe
rect2.attr("fill","#FF9999");
}
Insert cell
Insert cell
{
// Wähle erstes Rechtecke aus
let rects = d3.select("#container-1").select("rect");
// Ändere Stroke
rects.attr("fill","#9999FF");
}
Insert cell
Insert cell
{
// Wähle alle Rechtecke aus
let rects = d3.select("#container-1").selectAll("rect");
// Ändere Stroke
rects.attr("stroke","green")
.attr("stroke-width","5");
}
Insert cell
Insert cell
{
// CODE HIER
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html`<svg viewBox="-10,0,125,68" width="880" height="600" id="footballfield" style="border: 1px solid black;">
<g stroke-width="0.5" stroke="white" fill="none">
</g>
</svg>`
Insert cell
Insert cell
{
let container = d3.select("#footballfield").select("g");
// Rahmen
container.append("g")
.html(rahmen);
// Links
container.append("g")
.html(links);
// Mitte
container.append("g")
.html(mitte);
// Rechts
container.append("g")
.attr("transform","translate(105,0) scale(-1,1)")
.html(links);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
width = pitchWidth * scaleFactor
Insert cell
height = pitchHeight * scaleFactor
Insert cell
Insert cell
html`<svg id="footballfield-2" style="border: 1px solid black;">
<g stroke-width="0.5" stroke="white" fill="none">
</g>
</svg>`
Insert cell
Insert cell
Insert cell
function erstelle_spielfeld(g) {
// Rahmen
let rahmen_g = g.append("g");
erstelle_rahmen(rahmen_g);
// Links
let links_g = g.append("g");
erstelle_seite(links_g);
// Mitte
let mitte_g = g.append("g");
erstelle_mitte(mitte_g);
// Rechts
let rechts_g = g.append("g")
.attr("transform","translate("+pitchWidth+",0) scale(-1,1)");
erstelle_seite(rechts_g);
}
Insert cell
function erstelle_rahmen(g) {
g.append("rect")
.attr("x","-20")
.attr("y","-20")
.attr("width",width+40)
.attr("height",height+40)
.attr("fill",pitchColor);
g.append("rect")
.attr("x","0")
.attr("y","0")
.attr("width",pitchWidth)
.attr("height",pitchHeight);
}
Insert cell
function erstelle_seite(g) {
// Strafkreis
g.append("circle")
.attr("cx","11")
.attr("cy",pitchHeight/2)
.attr("r","9.15")
// Strafraum
g.append("rect")
.attr("x","0")
.attr("y",pitchHeight/2 - 11 - 9.15)
.attr("width","16.5")
.attr("height","40.3")
.attr("fill",pitchColor);
// 5-Meter-Raum
g.append("rect")
.attr("x","0")
.attr("y",pitchHeight/2 - 9.15)
.attr("width","5.5")
.attr("height","18.3");
// Tor
g.append("rect")
.attr("x","-2.5")
.attr("y",pitchHeight/2 - 7.32/2)
.attr("width","2.5")
.attr("height","7.32");
// Elfmeter Punkt
g.append("circle")
.attr("cx","11")
.attr("cy",pitchHeight/2)
.attr("r","1")
.attr("fill","white");
// Ecke oben links
g.append("path")
.attr("d","M0,3 A 3,3 0,0,0 3,0");
// Ecke unten links
g.append("path")
.attr("d","M3,"+pitchHeight+" A 3,3 0,0,0 0,"+(pitchHeight-3));
}
Insert cell
Insert cell
{
let svg = d3.select("#footballfield-2")
// viewBox festlegen
svg.attr("viewBox","-10,-10," + (pitchWidth + 20) + ","+ (pitchHeight+20))
.attr("width",width)
.attr("height",height);
let container=svg.select("g");
container.attr("stroke-width",lineWidth);
erstelle_spielfeld(container);
}
Insert cell
Insert cell
Insert cell
function erstelle_mitte(g) {
// Mittellinie
// Mittelpunkt
// Mittelkreis
}
Insert cell
Insert cell
Insert cell
Insert cell
html`<svg id="taktiktafel" style="border: 1px solid black;">
<g stroke-width="0.5" stroke="white" fill="none">
</g>
</svg>`
Insert cell
Insert cell
{
let svg = d3.select("#taktiktafel")
// viewBox festlegen
svg.attr("viewBox","-10,-10," + (pitchWidth + 20) + ","+ (pitchHeight+20))
.attr("width",width)
.attr("height",height);
let container=svg.select("g");
container.attr("stroke-width",lineWidth);
erstelle_spielfeld(container);
}
Insert cell
Insert cell
function add_player(g,x,y,color) {
g.append("circle")
.attr("cx",x * pitchWidth)
.attr("cy",y * pitchHeight)
.attr("r",pitchWidth/50)
.attr("fill",color)
.attr("stroke","black")
.attr("stroke-width",lineWidth/4);
}
Insert cell
Insert cell
{
// Wir entfernen erst alle Spieler, die noch auf dem Spielfeld sein könnten
d3.select("#taktiktafel").selectAll("#players").remove();
let g = d3.select("#taktiktafel").append("g").attr("id","players");
// Farben
let gk_1 = "#FFCCCC"; // Torwart Team 1
let pl_1 = "#FF7777"; // Feldspieler Team 1
let gk_2 = "#CCCCFF"; // Torwart Team 2
let pl_2 = "#7777FF"; // Feldspieler Team 2
// Team 1
// Torwart
add_player(g,1/100,1/2,gk_1);
// Verteidiger
add_player(g,1/6,1/8,pl_1);
add_player(g,1/6,7/8,pl_1);
add_player(g,1/7,3/8,pl_1);
add_player(g,1/7,5/8,pl_1);
// Mittelfeldspieler
add_player(g,1/4,2.5/8,pl_1);
add_player(g,1/4,5.5/8,pl_1);
add_player(g,1/3,1/2,pl_1);
// Stürmer
add_player(g,2/5,1/9,pl_1);
add_player(g,2/5,8/9,pl_1);
add_player(g,9/20,1/2,pl_1);
// Team 2
// Torwart
add_player(g,99/100,1/2,gk_2);
// Verteidiger
add_player(g,5/6,1/8,pl_2);
add_player(g,5/6,7/8,pl_2);
add_player(g,6/7,3/8,pl_2);
add_player(g,6/7,5/8,pl_2);
// Mittelfeldspieler
add_player(g,3/4,2.5/8,pl_2);
add_player(g,3/4,5.5/8,pl_2);
add_player(g,2/3,1/2,pl_2);
// Stürmer
add_player(g,3/5,1/9,pl_2);
add_player(g,3/5,8/9,pl_2);
add_player(g,11/20,1/2,pl_2);
// Ball
g.append("circle")
.attr("cx",21*pitchWidth/40)
.attr("cy",pitchHeight/2)
.attr("r",pitchWidth/100)
.attr("fill","white")
.attr("stroke","black")
.attr("stroke-width",lineWidth/4);
}
Insert cell
Insert cell
drag = {

function dragstarted() {
d3.select(this).attr("stroke-dasharray", "1");
}

function dragged(event) {
console.log(event);
d3.select(this)
.attr("cx", event.x)
.attr("cy", event.y);
}

function dragended() {
d3.select(this).attr("stroke-dasharray", "0");

}

return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
Insert cell
Insert cell
d3.select("#taktiktafel").select("#players").selectAll("circle").call(drag);
Insert cell
Insert cell
Insert cell
{
// CODE HIER
// Schiedsrichter
// Linienrichter oben
// Linienrichter unten
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more