Visueller Journalist bei der NZZ im Ressort Visuals.
Public
Edited
Sep 12, 2023
2 forks
chart = {
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("width", width)
.attr("height", height)
.style("border", "1px solid lightgrey");
// Radiale Achse:
const axisGrid = svg.append("g");
// Kreise
axisGrid.selectAll("circle")
.data(radialTicks)
.join("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", (d) => rScale(d))
.attr("fill", "none")
.attr("stroke", (d, i) => i===0? "black": "darkgrey")
.attr("stroke-width", 1);
// Circle Labels
axisGrid.selectAll("text")
.data(radialTicks)
.join("text")
.attr("class", "legend")
.style("font-size", "10px")
.attr("text-anchor", "start")
.attr("font-family", "GT America")
.attr("fill", "darkgrey")
.attr("dy", "0.35em")
.attr("x", 7)
.attr("y", (d, i) => -rScale(d)+10)
.text((d) => d>0? d: "");
// Winkel-Achse:
const axis = svg.append("g");
// Y-Axis
axis.selectAll("line")
.data(data)
.join("line")
.attr("x1", (d) => d3.pointRadial(x(d.label), innerRadius)[0])
.attr("y1", (d) => d3.pointRadial(x(d.label), innerRadius)[1])
.attr("x2", (d) => d3.pointRadial(x(d.label), outerRadius)[0])
.attr("y2", (d) => d3.pointRadial(x(d.label), outerRadius)[1])
.attr("stroke", "black")
.attr("stroke-width", 1);
// Labels 25, 50, 75, 100
axis.append("g")
.selectAll("text")
.data(data)
.join("text")
.attr("class", "legend")
.style("font-size", "12px")
.attr("text-anchor", "middle")
.attr("font-family", "GT America")
.attr("dy", "0.35em")
.attr("transform", (d, i) => i === 1? `translate(-50,-130)rotate(45)`: i === 2? `translate(${width/2-10},${-height/2})rotate(90)`: "rotate(0)")
.attr("x", (d, i) => rScale(100 * 1.1) * Math.cos(angleSlice*i - Math.PI/2))
.attr("y", (d, i) => rScale(100 * 1.1) * Math.sin(angleSlice*i - Math.PI/2))
.text((d) => d.label);
// Inhalt:
const content = svg.append("g");
// Linie hinzufügen
content.append("path")
.attr("fill", "none")
.attr("stroke", myPartyColor.color)
.attr("stroke-width", 1.5)
.attr("d", line
.radius(d => rScale(d.value))(data));
// Area einzeichnen
content.append("path")
.attr("fill", myPartyColor.color)
.attr("fill-opacity", 0.2)
.attr("d", area
.innerRadius(innerRadius)
.outerRadius(d => rScale(d.value))
(data));
// Dots einzeichnen
content.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", (d,i) => rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2))
.attr("cy", (d,i) => rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2))
.attr("r", 4)
.attr("fill", myPartyColor.color);
return svg.node();
}
width = 370
height = 370
margin = 20
innerRadius = 10
outerRadius = width / 2 - margin
labels = data.map((d) => d.label)
x = d3.scaleBand().domain(labels).range([0, 2 * Math.PI])
rScale = d3.scaleLinear()
.domain([0, 100])
.range([innerRadius, outerRadius])
line = d3.lineRadial()
.curve(d3.curveLinearClosed)
.angle(d => x(d.label))
area = d3.areaRadial()
.curve(d3.curveLinearClosed)
.angle(d => x(d.label))
angleSlice = Math.PI * 2 / 8
radialTicks = [0, 25, 50, 75, 100]
Inputs.table(data)
data = [
{label:"Offene Aussenpolitik",value:20},
{label:"Liberale Wirtschaftspolitik",value:73},
{label:"Restriktive Finanzpolitik",value:60},
{label:"Law & Order",value:75},
{label:"Restriktive Migrationspolitik",value:85},
{label:"Ausgebauter Umweltschutz",value:21},
{label:"Ausgebauter Sozialstaat",value:33},
{label:"Liberale Gesellschaft",value:39}
];
partyColors = [
{name: "SVP", color: "#316641"},
{name: "SP", color: "#ce4631"},
{name: "FDP", color: "#1b87aa"},
{name: "Die Mitte", color: "#df7c18"},
{name: "GPS", color: "#93a345"},
{name: "GLP", color: "#00988c"},
{name: "EVP", color: "#e3b13e"},
]
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.
